Добри практики при писането на CSS

Реших да предприема поредица от уроци или както искайте ги наричайте, за CSS, HTML, JavaScript. Ще са в помощ на всички начинаещи, дори и за напреднали програмисти, които желаят да разширят или опреснят знанията си. Съдържанието във всички постове ще са лично мои творения, така че може и да не ви допада особено. Просто времето и опита са ми помогнали да ги открия, така че: ето ви ги на тепсия.
Започваме с едно леко подсещане: пишете хубав и четлив код. А това се постига, разбира се, чрез различни и установени добри практики. Няма да ви занимавам с глупости, просто ще спомена, че понякога нещо да работи правилно- не е достатъчно.

- коментирайте. Ще отделим по нататък специално внимание на коментарите. Все пак в началото на css документа декларирайте кратко описание на версията, авторът, контакти и тн. Другото важно е: кратко описание на структурата, нещо като легенда с основните части и елементи.

- слагайте интервали преди стойностите и таб на декларациите.

- с таб измествайте суб селекторите

body { 
    color: red;
}
  #wrapper { 
       background: green;
   }

В конкретния случай, имаме интервал пред red и таб отстояние преди color.  Както и #wrapper е изместен с таб по-навътре, като под елемент на body. Така получаваме доста подреден css с дървовидна структура- винаги може да разчетете, кой елемент след кой следва.

- съкратете синтаксиса. Като основен пример давам присъствието на margin-left: 10px и margin-top: 20px в един блок. Спокойно може да съкрати на margin: 20px 0 0 10px; Което от своя страна води до по бързо корегиране при проблем.

- отбележете главните и най-често ползваните класове в началото (Global)

- лично аз ползвам reset.css на Yahoo, за уеднаквяване на елементите под всички браузъри. (или на Ерик Мейър)

- за центриране на блок елементите използвайте margin: 0 auto;

- изчиствайте float-ните елементите, примерно като на следващия елемент използвате clear: both; или на родителския дадете overflow: hidden; а под IE6 задължително zoom: 1;

- различен css за фиксовете на различните браузъри

… и тук вече съвсем се отплеснах. Нахвърлих тези няколко правила, които ще използвам и ще разесня по- нататък: защо, как и къде е най- удачно използването им.

Извод: ако отворите css-а, който сте правили, пропуснете няколко страници и ако това което видите ви харесва- значи всичко е наред. Но ако ви изглежда леко объркващо, понякога търсите прекалено много, често използвате !important … то тогава нещо трябва да промените.

… надявам се да ви помогна с това :) Успех