Управление взрывом CSS [закрыто]

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

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

Например,

#page1 div.title, #page1 ul, #page1 span {
  /* правила */
}

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

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

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

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

Как уже упоминалось ранее, рекомендую ознакомиться с OOCSS (Объектно-Ориентированным CSS). Использование Sass, Less или Compass может показаться заманчивым, но пока "чистый" CSS не используется должным образом, применение этих технологий лишь усугубит ситуацию.

Во-первых, изучите основы эффективного CSS. Попробуйте воспользоваться Google PageSpeed и ознакомьтесь с тем, что написал Содерс о написании эффективного CSS.

Затем приступайте к изучению OOCSS.

1. Научитесь работать с каскадом (в конце концов, мы называем его Каскадными таблицами стилей).
2. Поймите, как правильно задать гранулярность (действуйте снизу вверх, а не сверху вниз).
3. Учитесь отделять структуру от оформления (что уникально, а какие вариации этих объектов?).
4. Учитесь разделять контейнер и содержимое.
5. Научитесь ценить сетки.

Это революционизирует каждую деталь написания CSS. Я полностью обновлён и наслаждаюсь этим процессом.

UPDATE: SMACSS схож с OOCSS, но его легче адаптировать в общем.

Это довольно распространенная практика — разбивать файл на секции с комментариями-заголовками между ними. Например:

/* Заголовки и общий текст */

.... код здесь для H1 и т.д.

/* Основной макет страницы */

.... код здесь для настройки макета страницы и т.д.

Такой подход действительно может значительно упростить возвращение к коду в будущем, так как помогает быстро находить нужные части и понимая, за что отвечает каждая секция.

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

Таким образом, вы получите лучшие стороны обеих стратегий: это повысит производительность (уменьшит количество HTTP-запросов к браузеру) и обеспечит разделение кода во время разработки.