Есть ли какой нибудь порядок написания CSS кода?

Question

[hax0r :3]

Всем привет, вот мне всегда было интересно, есть ли какое нибудь правило написание CSS кода. Вот допустим я всегда пишу так:

.box {
    background: #000;
    width: 100px;
    height: 100px;
   overflow: hidden;
}

Или существует какое нибудь правило, что писать код правильнее будет так:

.box {
    width: 100px;
    height: 100px;
    background: #000;
    overflow: hidden;
}

Answer 1

[Юлия Старченко]

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

Comments

[hax0r :3]

Спасибо))) Четкий ответ на мой вопрос!)

[Евгений Петров]

Только рамки я выношу к набору, определяющим размеры (width, height, margin, padding). Ибо если box-sizing не border-box, то чревато.
А перед этим набором display, position + координаты + clip, float, overflow.
До сих пор не могу чётко найти место трансформациям, но, скорее всего, их место — перед набором размеров.

[Юлия Старченко]

Евгений Петров: я тоже раньше выносила их набору свойств модели блока, но так как дизайнеры вечно рисуют всякие нестандартные фигуры из сна наркомана, которые проще всего реализовать через несколько border-ов с разными комбинациями цветной-прозрачный, я их все-таки выношу к "украшательствам", чтобы не мешали. Поэтому у меня это уже, как привычка, а так да, конечно, этот товарищ относится к блочной модели и место его там))

[hax0r :3]

Юлия Старченко: Спасибо)))

Answer 2

[Nikolay Talanov]

https://css-tricks.com/poll-results-how-do-you-ord... - вот здесь хорошая группировка предложена, сам так же примерно пишу.

Answer 3

[Александр Петров]

Главное — одинаковый порядок.
А для этого существует великая расческа.

Answer 4

[Sanes]

Если ничего не путаю, то рекомендуется упорядочить по алфавиту.