Как мне организовать содержимое моих файлов CSS?

Question

Этот вопрос касается организации самих директив CSS в файле .css. При разработке новой страницы или набора страниц я обычно просто вручную добавляю директивы в файл .css, пытаясь реорганизовать, когда смогу. Через некоторое время у меня появятся сотни (или тысячи) строк, и при настройке макета может быть сложно найти то, что мне нужно.

У кого-нибудь есть советы по организации директив?

• Должен ли я попытаться организовать сверху вниз, имитируя DOM?
• Стоит ли организовывать функционально, объединяя директивы для элементов, которые поддерживают одни и те же части пользовательского интерфейса?
• Должен ли я просто отсортировать все по алфавиту по селектору?
• Какая комбинация этих подходов?

Кроме того, существует ли ограничение на количество CSS, которое я должен хранить в одном файле, прежде чем можно будет разбить его на отдельные файлы? Скажем, 1000 строк? Или всегда полезно хранить все это в одном месте?

Смежный вопрос: Какой лучший способ организовать правила CSS?

Answer 1

Поскольку фактическое упорядочение является важной частью того, как применяется ваш CSS, кажется немного глупым придерживаться «алфавитного» предложения.

Обычно вы хотите сгруппировать элементы по области страницы, на которую они влияют. Например. Сначала идут основные стили, которые влияют на все, затем стили верхнего и нижнего колонтитула, затем стили навигации, затем стили основного контента, затем стили вторичного контента.

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

Answer 2

Обычно я делаю это:

1. <link rel="stylesheet" href="css/style.css">

2. В style.css я @ импортирую следующее:

   @import url(colors.css);
   @import url(grid.css);
   @import url(custom.css); + some more files (if needed)
   

3. В colors.css I @import следующее (при использовании пользовательских свойств CSS):

   @import url(root/variable.css);
   

Все в порядке и легко получить любую часть кода для редактирования. Я буду рад, если это поможет как-то.

Answer 3

ITCSS

Гарри Робертс (CSS Wizardry)

Определяет глобальное пространство имен и каскад и помогает поддерживать низкую специфичность селекторов.

Структура

Первые два применяются только в том случае, если вы используете препроцессор.

1. (Настройки)
2. (Tools)
3. Дженерики
4. Элементы
5. Объекты
6. Компоненты
7. Козыри