14
мар 10

Как форматирате вашия CSS код?

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

Писането на CSS код според мен е изкуство. Виждал съм какъв ли не CSS и смея да твърдя, че има много хора които не знаят на какъв език пишат. Но Нека започнем от там:

Какво точно означава CSS (Cascading Style Sheets) ?

Пишейки тези редове реших да погледна какво казва wikipedia по този въпрос ?

И ето нейният отговор :

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.

Написано е чудесно нали ?

Малко ще се отплесна и ще спомена, че професионалното ми изкривяване, отваряйки някой сайт за първи път ме подтиква не целенасочено да използвам клавишната комбинация (Ctrl + U) и да започна да си зяпам я CSS, я HTML и много често откривам, че колегите писали го са прочели само тази част от wikipedia " ... (CSS) is a style sheet language ... " и пишат ли пишат SS. Не, няма правописна грешка, пишът си SS (Style Sheet) та пушек се вдига :) . Писането на CSS всашност е доста лесно казват някои ... "Нали използвам CSS файл"... Но има и по фрапиращи случаи, като например DSS или пък OSS ... и много много други, ще ви дам някои от примерите, които обичам да използвам :

DSS - Dummy Style Sheet
cSS - crazy Style Sheet
BSS - Boring Style Sheet
OSS - Only Style Sheet

Разбира се, тези наименования не са много оригинални, но много често са доста точни, когато се опитвам да наименувам дадена CSS творба ... и съм много горд с измислянето им гледайки разни писънки :)

Заключението : Много хора не са и чували за Cascading!

За други хора (силно се надявам и аз да съм от този тип), CSS означава "Cascading" и от там започва и свършва всичко останало.

Ако сте прочели статията, която посочих в началото на тази статия сте видяли, че има изброени няколко стила на форматиране, на които аз ще се опитам опиша с няколко думи плюсовете и минусите им.

Multi-line Format - Доста често използвано форматиране на CSS, чете се лесно и може бързо да се ориентирате. Минусът на този стил на писане е големия вертикален скрол на едиторът които ползваме.

Multi-line Format with Indenting - Това е също доста разпространен метод на форматиране, който обаче става доста не четим. Лично за мен идентирането по този начин е малко объркващо и не четимо при по-големи CSS файлове.

Single-line Format - Това е може би най-добрия начин да спестите някой друг байт от файла си и да го оптимизирате. Лично аз пиша от доста време по този начин (изключение прави този блок) и го намирам за доста приятен за използване ... помага ми да виждам всичко почти на един екран без да скролвам, но не всички "писатели" го харесват (хора всякакви идеали също).

Single-line Format with Tabbing, Single-line Format with Indenting, Mostly Single-line Format
- Тези начини за форматиране може би са удобни, но лично аз не обичам излишните табулации и спейсове. Най-голямата причина обаче си остава това, ча никога не сме сигурни колко селектора ще използваме и колко място да оставим между селекторите и декларациите които ще пишем.

Разбира се има най-различни вариации, които се използват за писане и никога не може да сме сигурни коя от тях е най-подходяща, но единственото нещо, което не трябва да забравяме е :

Да пишем добре форматиран код.

И да не забравяме, че :

Пишейки код, не го пишем само за себе си, но и за тези след нас!
мисля, че се подразбира, че може и вие да наследите парче код от колега, нали ?


тагове: ,

3 Responses за "Как форматирате вашия CSS код?"

  1. Здравей. Понякога и аз преглеждам кода с Firebug. Фрапантното което откривам е безумни наименования на селектори. А относно вида на писание, със сигурност предпочитам добре структуриран с код с табулатори и маркери. Всичко е става в пъти по ясно.

    Относно компресията, мисля че наличието на една картинка с размери 300x300 px, обезмисля оптимизацията на css.

  2. Pavel Ivanov казва:

    Според мен оптимизацията, компресията и всичко останало много зависи от цялостната идея и реализация на един проект. :) всяко нещо е за сметка на друго нещо :) и всичко е математика :) Всеки може да смята нали? Но на нас се пада честа да напишем формулата за успешен сайт :) и тук е момента на майсторството, професионализма, личните умения и т.н. :) За това аз съм на принципа всичко е важно, но има и по-важни неща :)

    Благодаря за коментара :)

  3. Юлиян казва:

    Хм, откривам себе си в Multi-line Format-а, но понякога, след като завърша css-а, обичам да съсипя напълно формата и да си оставя само за мен подредено копие :/

Отговор