Вы должны посмотреть на БЭМ .
Theory
BEM - это попытка предоставить набор инструкций для организации и присвоения имен селекторам css в попытке сделать вещи более пригодными для повторного использования и модульными и избежать столкновений между селекторами такого рода, которые часто приводят к спагетти-коду и головной боли специфичности.
Когда он используется правильно, он действительно имеет некоторые очень положительные эффекты.
- Стили делают то, что вы ожидаете, когда они добавляются к элементу
- Стили не пропускают и влияют только на то, что они добавлены к
- Стили полностью отделены от структуры документа
- Не нужно заставлять стили перебивать друг друга
BEM хорошо работает с SASS, чтобы привнести в CSS почти объектно-ориентированный стиль. Вы можете создавать модульные файлы, которые обрабатывают отображение одного элемента пользовательского интерфейса и содержат переменные, такие как цвета и «методы», например, как обрабатываются внутренние элементы. Хотя хардкорный ОО-программист может отказаться от этой идеи, на самом деле, применяемые концепции привносят множество более приятных частей ОО-структур, таких как модульность, слабая связь и тесная связь, а также возможность повторного использования без контекста. Вы даже можете создать способ, который выглядит как инкапсулированный объект, используя Sass и & operato r.
Более подробную статью из журнала Smashing Magazine можно найти здесь ; и один из Гарри Робертса из CCS Wizardry (который должен прочитать каждый, кто связан с css) здесь .
На практике
Я использовал это несколько раз, наряду с использованием SMACSS и OOCSS, то есть у меня есть кое-что для их сравнения. Я также работал в некоторых больших беспорядках, часто моего собственного, неопытного создания.
Когда я использую БЭМ в реальном мире, я дополняю технику парой дополнительных принципов. Я использую служебные классы - хороший пример - класс-оболочка:
.page-section {
width: 100%;
}
@media screen and (min-width: 1200px) {
margin: 0 auto;
width: 1200px;
}
И я также несколько полагаюсь на каскад и специфику. Здесь модуль БЭМ будет .primary-box, а .header будет контекстом для конкретной перегрузки
.header {
.primary-box {
color: #000;
}
}
(я изо всех сил стараюсь сделать все как можно более универсальным и контекстно-свободным, что означает хороший проект, почти все в модулях, которые можно использовать повторно)
Последнее замечание, которое я хотел бы здесь отметить, заключается в том, что каким бы небольшим и несложным ни был ваш проект, вы должны сделать это с самого начала по двум причинам:
- проекты усложняются, поэтому важно заложить хорошую основу, включая css
- даже проект, который кажется простым, потому что он построен на WordPress с небольшим JavaScript, все еще может быть очень сложным в CSS - ОК, вам не нужно делать никакого кодирования на стороне сервера, так что эта часть проста, но брошюра У фронтэнда Wear есть двадцать модулей и три варианта каждого: у вас там очень сложный CSS!
Веб-компоненты
В 2015 году мы начинаем изучать веб-компоненты. Я пока не знаю об этом огромном количестве, но они стремятся объединить все функциональные возможности внешнего интерфейса в автономные модули, эффективно пытаясь применить принципы BEM к внешнему интерфейсу в целом и разбросать компоненты, но полностью связанные друг с другом такие элементы, как фрагменты DOM, Js (MVC) и CSS, которые создают один и тот же виджет пользовательского интерфейса.
Делая это, они решат некоторые из первоначальных проблем, которые существуют с css, которые мы пытались решить с помощью таких вещей, как BEM, в то же время делая некоторые другие архитектуры переднего плана более разумными.
Здесь есть дальнейшее чтение здесь , а также каркас Полимер здесь , который стоит посмотреть
Наконец
Я также думаю, что это превосходное, современное руководство по CSS для лучших практик - разработанное специально для того, чтобы не допустить беспорядка в больших проектах CSS. Я стараюсь следовать большинству из них.