Организация и архитектура кода может существенно повлиять не только на скорость разработки, но и на скорость отображения страниц.
Правильно спроектированная архитектура CSS-кода и определение того, как разные компоненты будут взаимодействовать друг с другом, может ускорить разработку и производительность приложения.
Принцип объектно-ориентированного CSS впервые описана Николь Салливан в своей работе по написанию стилей для больших сайтов, часть работы которого, легла в основу UpCss.
Объектно-ориентированный CSS определяет два принципа:
- разделение структуры и оформления;
- разделение содержимого и контейнера.
Структура модуля должна быть прозрачной, позволяя другим стилям наследоваться и отображаться без конфликтов. Чаще это требует правильной сетки и структуры макета, наряду с хорошо продуманными модулями.
При написании CSS-кода необходимо придерживаться базовых правил:
- Избегайте присутствия идентификаторов элементов в селекторах.
- Не следует использовать селекторы потомков.
- Не следует к селекторам, отбирающим элементы по их имени (к примеру, h2 { … }) добавлять имена классов.
- Не рекомендуется применять директиву !important.
Пример:
<div class="alert alert-danger alert-round">
</div>.alert {...}
.alert-danger {...}
.alert-round {...}