css семантичен код

В тази статия ще се опитам да насоча вниманието ви към писането на хубав и семантичен  CSS код, който да грабва окото и същевременно да върши важната работа, за която е предназначен.

1. Старайте се да нулирате – с по-прости думи, занулете отстоянията и подравняванията. Един ред като този:

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

поставен в началото на .css файла може да ви спести доста главоболия.

2. Подредете стойностите (различните property-та) по азбучен ред – това ще ви спести време при търсенето на дадена стойност.

div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}

3. Бъдете оргарнизирани – винаги добавяйте коментари към кода си, за  да се ориентирате по-лесно в повторната му редакция след време.

/*****Коментар*****/

Ако имате повече свойства с една и съща стойност, оргарнизирайте ги в един общ ред, например като този:

header a:link, #header a:visited {color:#fff:}

Можете да си подреждате елементите спрямо позицията в страницата като например: меню, съдържание, футер или пък спрямо обща черта, като: линкове, шрифтове, контейнери.

4. Плътност – стремете се когато използвате един метод на изписване на кода, да го поддържате. Ако разделяте всяко свойство на нов ред, го правете така за всички стойности на отделните елементи в страницата. Например:

div#header { float: left; width: 100%; }

или

div#header {
border-right: 1px solid #ccc;
float: rightright;
margin-right: 50px;
padding: 10px;
width: 300px;

5.  Подреждайте си кода – когато пишете своя html документ, подравнявайте елементите така, че да виждате кой, къде се отваря и затваря. Така по-лесно ще се ориентирате. Аз лично използвам notepad++ и табулацията ми е много удобна.

6. Валидирайте си кода – препоръчително е да видите за допуснати грешки през валидатора на w3. Все пак може неволно да сте допуснали правописна грешка или да сте присвоили на дадено свойство стойност, която не може да приеме.

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