Как се подрежда CSS?

След интересна дискусия със Стефан Кънев реших да систематизирам част от информацията в мрежата и да напиша по-подробно как си организирам аз CSS файловете.

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

Това е стар спор и има много аргументи за един или друг начин на подредба. Нека да не забравяме, че това е основно – лично предпочитание. На един човек му харесва така, на друг иначе. Не искам това да се превръща в поредния религиозен спор.

Коментари от типа: “На мен едноредовата/многоредовата подредба ми е тъпа.” ще бъдат трити без никакво предупреждение. Желанието ми е да предоставя систематизирана информация и да проведем интересна дискусия. Ако коментарът ти няма стойност към тази дискусия ще бъде премахнат.

Също така, не трябва да се забравя колко е лесно да се премине от едноредова подредба в многоредова и обратното. Редакторите правят тези наща доста лесно. Така че, моля ви, останете с отворен ум и нервните коментари на друго място.

Статията покрива работата със чист CSS. Скоро нашумелите препроцесори на CSS като sass и lesscss влизат в друга категория и не мисля че може да се коментират на същата основа.

Основно спорът се разделя на две групи:

Има известно количество допълнителни подредби, но с цел систематизирането на информацията ще ги ограничим до две.

Подредбата на един ред:

body { font: 12px/18px "Verdana", sans-serif; background: #FFF; color: #000; }

Подредба на много редове:

body {
    font: 12px/18px "Verdana", sans-serif;
    background: #FFF;
    color: #000;
}

Аргументи

Аргументи в защита на многоредовата подредба:

  • Лесно се виждат атрибутите към този селектор.
  • Може лесно да се види кой атрибут е променян когато направим diff на файла.
  • Защо да сканирам като мога да сгъна многоредовите декларации в кода си?

Аргументи срещу едноредовата подредба:

  • Неразбираеми редове
  • Едноредовата подредба прави подреждането на атрибутите по-трудно
  • Не е ефективна за ползване със Source Control
  • Новите специални атрибути специфични за всеки браузер правят едноредовата подредба изключително неприятна.

Аргументи в защита на едноредовата подредба:

  • Лесно се сканират селекторите
  • Сериозно намалява броя редове в кода ви

Аргументи срещу многоредовата подредба:

  • Трудно се сканира за определен селектор
  • Губи много място

Общи аргументи:

  • Подреждам си атрибутите по азбучен ред, много е яко!
    Това съм го срещал в защита и на двете подредби. Може да се ползва навсякъде. За мен е адски странен подход. Все пак пишете код а не списък с приятели. Азбучната подредба няма особено голям смисъл в този контекст.

Какво правя аз?

Аз пиша на един ред и си подреждам свойствата по логичен път. Да, от време на време се получават доста дълги редове, но ако слагате това което е най-маловажно отзад няма да има проблем.

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

Добре подреденият CSS код трябва сам да обяснява структурата на HTML’а за който е писан и то в дълбочина. Чрез едноредовата подредба на селектори лесно се виждат елементите за които са писани различни стилове и опитен кодер може бързо да сглоби HTML структурата без дори да е погледнал HTML файла.

Моите правила:

Подредба на един ред със следната подредба:

[selector] { display | dimensions | positioning | typography | styling }

display:
    display: block|inline|table-cell|list-item

dimentions:
    width | height

positioning:
    position & coordites | float | padding | margin

typograpy:
    font | line-height | letter-spacing

styling:
    color | border | background

Интересни четива по темата на Английски: