Расположение стилей

Посмотреть проект на GitHub

Стили каждого модуля должны храниться рядом друг с другом, можно их выделять как в закомментированные секции, так и в отдельные файлы:

/* Module name
-------------------------------------------------- */
.module { }

.module_list { }
    .module_list__modificator { }
/* /Module name */

Селекторы, модифицируемые каскадом, должны так же храниться рядом с родительским классом:

/* Module name
-------------------------------------------------- */
.module { }

.module_list { }
    .module_list .other-module { }
/* /Module name */

Исключением могут быть только классы из слоя контекста:

/* Module name
-------------------------------------------------- */
.module { }

.module_list { }
    .touch .module_list { }
    .ie9 .module_list { }
/* /Module name */

Такая организация стилей упрощает дальнейший рефакторинг кода и позволяет непосвященному разработчику быстро разобраться во всех стилях модуля и быстро приступить к работе с ним.

При чистке кода просто избавляться от старых модулей и от всех его зависимостей.

Про расположение стилей внутри секций можно почитать в модуле про модификаторы.

comments powered by Disqus