CSS usor de intretinut

Cum cerintele de webdesign devin din ce in ce mai complexe, codul CSS devinde din ce in ce mai mare si mai greu de intretinut in timp. In acest articol am sa va vorbesc despre o serie de practici bune pentru a reusi sa aveti un fisier CSS ce poate fi intretinut cu ucurinta in timp.

Crearea unui "cuprins"

Cum fisierele CSS devin din ce in ce mai mari cu fiecare zi cred ca va fi mai usor sa gasiti ce cautati daca il impartiti in sectiuni.

/* reset  */

/* general */

/* typography */

/* header */

/* footer */

/* sidebar */

/* Home Page */

/* About Page */

/* Media Queries */

Scrierea codului CSS

Sunt sigur ca ati descarcat un fisier CSS de pe net sau poate chiar ati preluat codul CSS de la alt programator si ati avut surpriza de observa ca acest cod este greu de citit...acum, inchipuie-ti cat de greu va fi de modificat/intretinut acest cod.

Exista 2 moduri "standard" de a scrie CSS. Primul mod (si cel mai folosit), este modul "block":

#element{
	margin: 0 auto;
	width:80%;
	display: block;
}

Al doilea mod este cel "line":

#element{ margin: 0 auto; width:80%; display: block; }

Am incercat sa lucrez in ambele moduri, dar parerea mea este ca al doilea mod de a scrtie CSS devine putin obositor cand ai multe proprietati pe un element.

Folosirea Sass

CSS-ul era foarte simplu, dar cum timpul trece si apar tot felul de proprietati noi in fiecare zi devinde din ce in ce mai complex. De fapt, am ajuns in stadiul in care un fisier de 500 linii CSS este ceva normal, numai ca scrierea si intretinerea acestui fisier poate deveni destul de complicata. Aici intervin preprocesoarele precum SASS, iti permit folosirea unor lucruri ce nu exista in CSS, precum variabile, imbricare, mixins, mostenire si asa mai departe.

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Foloseste in mod corect ID-uri si Clase

Pentru a evita redundanta in stylesheet este important sa folosim atent clasele si id-urile. Eu am tendinta de a nu folos id-uri in CSS, dar daca le-as folosi cu siguranta ar fi pentur elemente singure, precum logo-ul.

#logo{
	width: 250px;
	height:90px;
	display: block;
	float:left;
}

In shcimb, clasele sunt folosite pentur a fi aplicate pe mai multe elemente.

.box{
	background: #E4F0FC;
	margin: 1em 0px 1.5em;
	padding: 9px 10px 9px 15px;
	color: #555;
	text-shadow: none;
	font-weight: bold;
}

Combinarea stylesheet-urilor

De fiecare data cand puneti un fisier CSS intr-un fisier HTML browser-ul va trebui sa faca un request HTTP pentru a putea folosi acel fisier. Fiecare request HTTP dureaza o perioada de timp, deci site-ul se va incarca mai greu. Va recomand sa combinati fisierele CSS folosind un tool precum  CSS Compressor 

Editor pentru CSS

Puteti folosi orice editor pentru CSS, veti putea scrie codul chiar si cu notepad, dar viata v-ar fi mult mai usoara daca ati folosi un editor special pentru CSS.

Minificare si GZip

Un alt mod bun de a optimiza viteza de incarcare a site-ului este  si de micsora consumul de banda este minificarea si comprimarea fisierelor CSS. Minificarea este procesul de scoatere a spatiilor goale si a comentariilor din CSS (poate sa duca la o scadere de pana la 80% a dimensiunii unui fisier).

Gzip reduce marimea raspunsului venit de la requestul HTTP. Un stylesheet gzipped poate fi redus cu pana la 70%. Puteti activa acest gzip copiind acest cod in fisierul vostru .htaccess

# BEGIN GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
# END GZIP