Методологія SMACSS

SMACSS - модульна архітектура для CSS, що маштабується (Scalable and Modular Architecture for CSS).

Категорії:

Base rules - базові стилі для тегів і основних класів (.clearfix, .modal і т.п.).

Layout rules - стилі макета, опис основних елементів, які зустрічаються 1 раз на сторінку (хедер, футер і т.п.).

Modules rules - стилі модулів, окремих блоків, постарайтесь селектори описувати лише класами, без тегів.

State rules - стилі станів модулів і скелета сайта (є сайдбар, немає сайдбара і т.п.).

Theme rules - стилі теми, кольорова гама, шрифти, фони.

Правила іменування

Для станів зручно додавати префікс is-:


				.aside.is-hidden { ... }

				.faq-item.is-collapsed { ... }

Дочірні елементи модулів повинні мати префікс - назву модуля:


				.faq { ... }

				.faq-item { ... }

				.faq-item.active { ... }

Таким чином можна уникнути перекриття класів іншими модулями, в яких теж можуть бути елементи .item, .active. Річ у тому, що далеко не всі розробники намагаються дотримуватися ієрархії в CSS:


				.faq { ... }

				.faq .item { ... }

				.faq .item.active { ... }

Часто цьому не приділяють уваги і подальше супроводження коду при розростанні проекту стає дуже проблематичним:


				.faq { ... }

				.item { ... }

				.active { ... }