6 съвета как да пишете по-семантичен CSS

 In Архив, Дизайн и код
css семантичен код

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. Все пак може неволно да сте допуснали правописна грешка или да сте присвоили на дадено свойство стойност, която не може да приеме.

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

Recommended Posts

Leave a Comment

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt

Start typing and press Enter to search