В каком порядке нужно размещать CSS-селекторы?

Question

[webrapist]

Добрый вечер.

В каком порядке желательно размещать селекторы? Сначала идёт какой-нибудь reset-файл. Дальше я обычно делал так:
- Форматирование тегов: шрифты, отступы, поля для каких-нибудь тегов, оформления каких-нибудь глобальных блоков.
- И дальше форматирование уже более конкретное, к примеру, сначала оформляю шапку и так далее.

Или же все селекторы размещать в алфавитном порядке? Как лучше?

Answer 1

[Ivan Stroykin]

В алфавитном порядке не нужно.
Сначала "reset" свойства
Ниже основные правила (такие как работа со шрифтами и прочее)
Ниже правила для основных компонентов (заголовки, параграфы, формы и прочее, что не меняется из страницы к странице)
А дальше предпочитаю делить на блоки, к примеру:

/*-- TOPBAR --*/
.topbar {
    /* правила */
}
/*-- TOPBAR --*/

/*-- SIDEBAR--*/
.sidebar {
    /* правила */
}
.sidebar-box {
    /* дочерний элемент прописывается ниже родительского */
}
/*-- SIDEBAR--*/

Comments

[Ivan Stroykin]

Просто в дополнении напишу еще про написание свойств для классов.
Многие их пишут в алфавитном порядке, но лично мне такая идея не очень нравится. Я предпочитаю писать их в порядке соотношений, т.е., к примеру такие свойства стоят друг под другом
width и height, padding и margin и т.д.
position - всегда сверху
z-index - всегда снизу
display - сверху, но если есть position, то под ним.
Думаю идея понятна? :)
Ну это, конечно же, дело вкуса

[Сергей delphinpro]

Иван Стройкин: А я дополню. Вкусы у всех разные, а алфавит один.
Я пишу как попало, так быстрее. А после написания всех стилей для блока просто нажимаю горячую клавишу для сортировки по алфавиту. Код всегда попадает в СКВ единообразный, в диффах коммитов присутствуют только реальные изменения, а не перестановки строк, потому что в прошлый раз забыл в правильном порядке записать. И вообще всё прекрасно :)

[Ivan Stroykin]

Сергей: Прекрасное дополнение. Тоже хороший способ :)

Answer 2

[Сергей delphinpro]

normalize
init (box-sizing для всех, font-size для html, и прочие общие свойства такого рода)
layout - базовые раскладки для сайта
grid-system
typography
forms
components (BEM-blocks)
helpers - примитивы вроде .text-center: {text-align:center}
override - свалка стилей, перекрывающих стандартные стили CMS, поменять которые напрямую либо лень, либо нет возможности, либо слишком геморрно.

Разумеется, на вкус и цвет все фломастеры разные, так что определите для себя сами структуру стилей.

Answer 3

[bro-dev]

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

Answer 4

[Alexander Litvinenko]

шрифты\хелперы и прочая вспомогательная фихню
Далее в том же порядке, как встречаются в коде

А по нормальному все это в LESS запихнуто