Pentru fiecare programator în parte, site-ul este locul său de joacă. Fie că discutăm despre HTML, CSS, Java, fiecare coder are propiul stil. De aceea nu este bine să te joci cu jucăriile altui progamator, în locul său de joacă. Totuși, un programator responsabil și conștient, care nu dorește să-i îngreuneze viața celul ce va asigura mentenanța, va coda simplu și curat. Orice programator ar trebui să cunoască mici trucuri și tehnici pentru a reuși să codeze cât mai frumos un website.

10 trucuri pentru un cod CSS curat!

1. Absolute positioning

Gândește-te la fiecare site ca la o cutie. Ai dori să știi poziția clară a fiecărui element când deschizi acea cutie, nu? Ei bine, în cazul CSS acest lucru se poate rezolva destul de simplu. Aplică funcția „Absolute positioning” fiecărui element pentru a-i defini clar poziția. Selectează parametri: top, bottom, setează pixelii și nu uita să alegi „absolute” în cazul poziționării.

2. * Selector

Tot pentru o așezare curată în pagină trebuie folosit și micul element „*”. Spre exemplu, la setarea acestui element în fața unui block, dacă se aplică o modificare în codul CSS al acelui block, site-ul va suporta modificarea asupra tuturor elementelor din block. Astfel, ne e mai ușor să modificăm parametri în cazul listelor custom sau ale tabelelor de pe site.

3. Aranjarea tag-urilor

Pentru a te asigura că ai un cod curat, scris corect, nu încadra blocurile de elemente într-o structură inline. Spre exemplu, o ancoră <a> este un element inline, iar un heading <h1> este un element de block. Nu le intersecta!

4. Nume corecte pentru fiecare element

Folosește numai nume corecte pentru fiecare element codat. Alege nume care să descrie exact modalitatea de utilizare a acelui element sau nume care să ofere indicii clare asupra elementului: „MeniuPrincipal”, „ListaCulori”, „ButoniActiune”. Nu folosiți în denumirea elementelor NUME CE SEMNIFICĂ DESIGNUL, ci axați-vă pe NUME CE SEMNIFICĂ FUNCȚIONALITATEA elementelor.

5. Faceți curat după ce ați codat!

Folosiți progrămele precum: Tabifier sau CSS Optimiser pentru a curăța codul și pentru a primi mici sfatui despre optimizarea acestuia. Un astfel de program vă poate spune dacă este mai indicat să rupeți în mai multe secțiuni codul, să adăugați sau să ștergeți linii de cod etc.

6. Validarea codului

Tot în aceeași direcție puteți utiliza și etapa de validare a codului. Chiar dacă aceasta este de bază, mulți coderi o lasă baltă. Folosiți funcția de validare a codului pentru a identifica unele greșeli și pentru a verifica codul. Fie că este vorba de un paragraf neînchis, fie că este vorba de lipsa unui atribut ALT la o poză, funcția de validare te va ajuta să optimizezi codul și să lucrezi ca un adevărat profesionist.

7. Aplicarea codului CSS la mai multe elemente, cu o singură mișcare

Nu trebuie să umpleți codul cu 3 linii inutile atunci când doriți, spre exemplu, să schimbați un border în jurul a trei elemente diferite. Puteți alinia toate cele 3 elemente, aplicând modificarea asupra tuturor, printr-o singură virgulă plasată unde trebuie.

Exemplu: 

.blog, .img, .sidebar {

border: 1px solid #000;

}

8. Nu stricați elementele, atunci când efectuați modificări – funcția box-sizing:border-box

Când doriți să încadrați o cutie, spre exemplu, într-o bordură, aceasta va fi plasată la distanță față de marginea cutiei, în exterior, dacă folosiți funcția de add padding în mod normal. Dacă folosiți funcția box-sizing:border-box de la început, cutia își va micșora mărimea inițială, iar padding-ul își va prelua locul (în interiorul elementului deja definit – cutia), așa cum este normal.

9. Funcția ALL CAPS

Este absurd ca atunci când dorim să rescriem o secțiune de titlu sau subtitlu și dorim să scriem titlul ALL CAPS să ne reapucăm de cod și să schimbăm manual textul din acea secțiune. Nu vrem să stricăm codul deja definit, nici nu dorim să petrecem ore întregi pentru a schimba o secțiune. Putem efectua o astfel de acțiune prin funcția CSS „ALL CAPS”. 

Exemplu:  h2 { text-transform: uppercase; } – all caps

10. Butoanele de CALL generează probleme – formatați corect aceste butoane!

Atunci când avem un anunț pe site, spre exemplu, iar noi dorim să aplicăm un buton cu ajutorul cărora utilizatorii site-ului să ne sune direct, acest buton poate genera probleme la formatare. Folosiți o formatare specială pentru acel element, pentru a nu întâmpina probleme. Iată un exemplu:

(sursă photo: WebDesignerDepot)