Стили каждого модуля должны храниться рядом друг с другом, можно их выделять как в закомментированные секции, так и в отдельные файлы:
/* 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