5 чекори до подобар CSS

Во зависност од вашето искуство, кодирањето на CSS понекогаш може да излезе од контрола. Со следењето на овие 5 едноставни чекори може доста да си го олесните вашиот живот :).

1. Ресетирање

Секогаш користете ресетирање. Не е битно дали ќе го користите ресетирањето на Eric Meyer или YUI или пак некое направено од вас, битно е да користите нешто.

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; border: 0; font-size: 100%; }

Ресетирањата на Eric Meyer и YUI се супер, но сепак не треба тие само да се земат и да се постават во вашиот проект. Најдобро би било вие сами да ги подесите по ваша желба, да избришите тоа што не ви треба или да го додадете тоа што ќе ви биде потребно. Направете си свое ресетирање.

Не користете глобални ресетирања како ова:

* { margin: 0; padding: 0; } 

За ова да се процесира е потребно повеќе време. Што мислите, што ќе му се случи на радио копче доколку му отстраните padding? Формуларите понекогаш можат да ви предизвикаат проблеми ако користите глобално ресетирање, па затоа подобро би било да ги оставите какви што се.

2. Организација

Треба да го организирате вашиот CSS код па така ќе можете полесно да ги пронајдете бараните елементи. Ова е пример за добро организиран CSS код:

/***** Ресетирање *****/
Отстранување на margin и padding од елементите

/***** Основни Елементи *****/
Дефинирање на стиловите за основните елементи:
body, h1-h6, ul, ol, a, p, итн.

/***** Повеќенаменски Класи *****/
Дефинирање на класи кои се користат во повеќе елементи пр.
float:left, clear:both, итн.

/***** Основен Изглед *****/
Дефинирање на основниот изглед: header, footer, итн.

/***** Header *****/
Дефинирање на сите елементи во header-от

/***** Содржина *****/
Дефинирање на сите елементи во делот со содржината

/***** Footer *****/
Дефинирање на сите елементи во footer-от

/***** Останато *****/
Дефинирање на останатите елементи

3. CSS Константи

Еден од начините да го заобиколите недостатокот на константи во CSS е да креирате свои најгоре во вашиот CSS фајл во коментари. Ова најчесто се користи за дефинирање на најчесто користените бои при што се избегнува користењето на алтернативни бои по грешка.

/*
Темно сива (текст): #333333
Темно плава (наслови, линкови) #000066
Плава (header) #333399
*/

4. Скратено пишување на вредности

Скратеното пишување на вредностите може да ви заштеди доста време, простор и килобајти.
Дефинирајте margin, padding или border по Горе-Десно-Долу-Лево редослед:

/* margin: горе десно долу лево; */
margin: 1em 0 2em 0.5em;
/* наместо
margin-top: 1em;
margin-right: 0;
margin-bottom: 2em;
margin-left: 0.5em; */

/* border: дебелина стил боја; */
border: 1px solid #000;

/* background: боја слика повторување позиција; */
background: #f00 url(background.gif) no-repeat 0 0;

/* font: големина/висина-на-линија фонт; */
font: 1em/140% "Lucida Grande", sans-serif;

5. Пронаоѓање на грешка

Додадете надворешна линија за да се означат елементите со што ќе можете да ги видете преклопувањата на елементите и вишокот на празни места.

* { border: 1px solid #f00; } /* за сите елементи */

div { border:1px red dashed; } /* за одреден елемент */
gravatar
Автор: Даниел Брзанов
За авторот:

Здраво! Јас сум Даниел a.k.a. Delicon, се занимавам со веб дизајн и програмирање повеќе од 10 години и сакам да го споделам своето знаење со сите што се заинтересирани за тоа.

2 Коментари

  1. Одлично, навистина ке ми го олеснат животот, особено 5-тото… Само не ми е јасно што фајде од константите кога е коментар, и ако сакаш да промениш боја на целиот CSS пак треба да одиш со find/replace, и да имаш константи дефинирано и да немаш, сеедно. Треба можеби во CSS стандардот да се воведат променливи…

  2. @Јовица

    Како што кажав "Еден од начините да го заобиколите недостатокот на константи во CSS…", значи CSS-от нема поддршка за константи, па така креираме свои во коментар кои ни служат на нас како 'константи', со чија помош се служиме додека го пишуваме остатокот од кодот.

    Пример:

    Се наоѓам некаде на средина од CSS кодот и не ми текнува како беше бојата за линкови, "дали беше #339933 или #993399". Што правам кога имам свои 'константи'? Одам најгоре во CSS фајлот, ја копирам точната боја за линкот и ја додавам на потребното место. Нема двоумење, нема внесување на грешна боја, нема губење време.