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

неделя, април 3rd at 20:18

След интересна дискусия със Стефан Кънев реших да систематизирам част от информацията в мрежата и да напиша по-подробно как си организирам аз 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

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

4 Responses

  1. Петьо вторник, април 5th
    at 07:55

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

  2. Радослав Станков вторник, април 5th
    at 11:28

    Преди време бях почитател на многоредовата подредба. Но в един момент се оказа, че реално това което правя в 90% от времето е чрез редактора затварям реда и така изведнъж минавам в едно редова. Така с малко побутване от Стефан Кънев и аз минах на едно редова схема.

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

  3. Гонзо вторник, април 5th
    at 16:33

    Единственото, с не съм съгласен е едноредовото подреждане на свойствата. Аз предпочитам всяко свойство да е на отделен ред, и когато свойствата са подредени по определен ред (гледам да спазвам същата подредба, но понякога като добавям нови правила, ги слагам най-отдолу), нещата стават много четими. Но това е въпрос на предпочитания и на спазване на общи правила в екипа.

    А между другото Стоян има един мноого стар пост по темата с много полезни коментари:
    http://www.phpied.com/css-coding-conventions/

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

    Друго нещо, което ми се струва удобно, но не го правя, е да се вкарат навътре декларациите за дъщерни елементи след декларацията за родителския:

    article {
    foo: bar;
    }

    article h1{
    ala: bala;
    }

  4. Ava събота, април 28th
    at 22:03

    Пише се ‘dimensions’,
    поздрави.

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *