Управление CSS Explosion

Я часто видел, как люди разбивали файл на разделы с комментарием заголовка между разделами.

Что-то вроде

/* Headings and General Text */

.... stuff here for H1, etc..

/* Main page layout */

.... stuff here for layout page setup etc.

Это работает довольно хорошо и может помочь вам вернуться позже и найти то, над чем вы работаете.

Мой ответ является высокоуровневым, чтобы ответить на высокоуровневые проблемы, которые вы подняли в своем вопросе. Возможно, есть низкоуровневые организационные уловки и твики, которые можно сделать красивее, но ничто из этого не может исправить методологические недостатки. Есть несколько вещей, которые влияют на взрыв CSS. Очевидно, что это общая сложность сайта, а также такие вещи, как семантика именования, производительность CSS, организация файлов CSS и тестируемость/приемлемость.

Похоже, вы на правильном пути в отношении семантики именования, но можно сделать еще один шаг вперед. Разделы HTML, которые неоднократно появляются на сайте без структурных изменений (известные как "модули"), можно считать корнями селектора, и на их основе можно определять внутреннее расположение относительно этого корня. Это основной постулат объектно-ориентированного CSS, и вы можете прочитать/посмотреть больше об этом в этом выступлении инженера Yahoo.

Важно отметить, что этот чистый подход может идти вразрез с заботой о производительности, которая отдает предпочтение коротким селекторам, основанным либо на id, либо на имени тега. Нахождение баланса зависит от вас, но если у вас не огромный сайт, это должно быть просто руководством в вашей голове, напоминающим вам о том, что селекторы должны быть короткими. Подробнее о производительности здесь.

Наконец, вы собираетесь иметь один файл CSS для всего сайта или несколько файлов (один базовый файл, используемый с файлами для отдельных страниц или разделов)? Один файл лучше для производительности, но может быть сложнее для понимания/поддержания несколькими членами команды, и может быть сложнее для тестирования. Для тестирования я рекомендую вам иметь одну страницу CSS-теста, которая включает все поддерживаемые CSS-модули для проверки коллизий и непреднамеренного каскадирования.

В качестве альтернативы вы можете использовать многофайловый подход, чтобы распространить правила CSS на страницу или раздел. Это требует от браузера загрузки нескольких файлов, что является проблемой производительности. Вы можете использовать программирование на стороне сервера для определения и объединения (и минификации) файлов CSS в один файл динамически. Но поскольку эти файлы раздельные и тестирование для них будет раздельным, вы создаете возможность непоследовательного внешнего вида и ощущения на разных страницах/разделах. Таким образом, тестирование становится сложнее.

Вам предстоит проанализировать конкретные потребности клиента и сбалансировать эти проблемы соответствующим образом.

Вы также должны понимать, что такое каскад и вес, и как они работают.

Я заметил, что вы используете только идентификаторы классов (div.title). Знаете ли вы, что вы можете использовать и идентификаторы, и что идентификатор имеет больший вес, чем класс?

Например,

#page1 div.title, #page1 ul, #page1 span {
  // rules
}

заставит все эти элементы иметь общий размер шрифта, скажем, или цвет, или любые другие ваши правила. Вы даже можете заставить все DIV, которые являются потомками #page1, получить определенные правила.

Что касается веса, помните, что оси CSS движутся от наиболее общего/легкого к наиболее специфическому/тяжелому. То есть в CSS-селекторе спецификатор элемента преобладает над спецификатором класса, а спецификатор класса - над спецификатором ID. Цифры имеют значение, поэтому селектор с двумя спецификаторами элементов (ul li) будет иметь больший вес, чем селектор с одним спецификатором (li).

Думайте об этом как о цифрах. 9 в колонке единиц все равно меньше, чем 1 в колонке десятков. Селектор со спецификатором ID, спецификатором класса и двумя спецификаторами элементов будет иметь больший вес, чем селектор без ID, с 500 спецификаторами классов и 1 000 спецификаторами элементов. Это, конечно, абсурдный пример, но вы поняли идею. Суть в том, что применение этой концепции поможет вам очистить множество CSS.

BTW, добавление спецификатора элемента к классу (div.title) не является необходимым, если только вы не сталкиваетесь с конфликтами с другими элементами, имеющими class="title". Не добавляйте ненужный вес, потому что он может понадобиться позже.

Вот только 4 примера:

• CSS Conventions / Code Layout Models
• Есть ли стандарты CSS, которым я должен следовать при написании моей первой таблицы стилей?
• Какой лучший метод для приведения CSS в порядок?
• Best Practices - CSS Stylesheet Formatting

На все 4 вопроса мой ответ включал совет скачать и прочитать PDF Натали Даун CSS Systems. (PDF содержит массу заметок, которых нет в слайдах, так что читайте PDF!). Обратите внимание на ее предложения по организации.

EDIT (2014/02/05) четыре года спустя, я бы сказал:

• Используйте CSS-препроцессор и управляйте файлами как партициями (лично я предпочитаю Sass с Compass, но Less тоже неплох, и есть другие)
• Прочитайте о таких концепциях, как OOCSS, SMACSS и BEM или getbem.
• Посмотрите, как устроены популярные CSS-фреймворки, такие как Bootstrap и Zurb Foundation. Не стоит сбрасывать со счетов и менее популярные фреймворки - Inuit является интересным, но есть и множество других.
• Комбинируйте/минифицируйте ваши файлы с шагом сборки на сервере непрерывной интеграции и/или бегунком задач, таким как Grunt или Gulp.

• Создайте все перестановки.
• Пусть каждый перестановка представляет узел в график.
• Теперь для любых двух состояний добавить кромка со значением 1, если они совместно n-1 цифр (для источника из и для цели из конец), два, если они совместно используют n-2 цифры и так далее.
• Теперь вы можете найти кратчайший путь, содержащий n вершин.

Попробуйте exec maven плагин ...

Я нахожу, что трудным делом является перевод требуемого дизайна для сайта в серию правил. Если дизайн сайта ясен и основан на правилах, то имена классов и структура CSS могут вытекать из этого. Но если люди со временем случайным образом добавляют маленькие кусочки на сайт, которые не имеют большого смысла, вы не можете многое сделать с этим в CSS.

Я склонен организовывать файлы CSS примерно так:

1. сброс CSS, основанный на Эрика Мейера . (В противном случае я обнаружу, что для большинства элементов у меня есть по крайней мере одно или два правила, которые просто сбрасывают стили браузера по умолчанию - большинство моих списков не похоже на стиль HTML по умолчанию для списков, например.)

2. Сетевая система CSS, если сайт его вызывает. (Я основываю свое на 960 .gs )

3. Стили для компонентов, которые отображаются на каждой странице (колонтитулы и т.д.)

4. Стили для компонентов, которые используются в различных местах на сайте

5. Стили, которые относятся только к отдельным страницам

Как вы видите, большинство из них зависит от дизайна сайта. Если дизайн четкий и организованный, ваш CSS может быть. Если нет, ты облажался.

Взгляните на 1. SASS 2. Компас