Reguli pentru scrierea css

selectoare în cascadă

Orice bloc de pe pagina ar trebui să fie descrisă printr-un selector de clasă. Nu utilizați în cascadă selectori, deoarece acestea încalcă principiul independenței componentei. Aceeași regulă se aplică în cazul selectoarelor descendent direct (>) și elementul adiacent (+).

  • Căutători state (selectate. Activ. Hover).
  • selectoare context. Există cazuri în care o componentă este folosită pe diferite pagini sau într-un mediu diferit. În acest caz, este convenabil să se utilizeze contextul selectorii. Este important ca aceste stiluri contextuale conținute în componenta mamă.
  • Aspect, în care nu se poate schimba structura HTML-tag-uri.

denumire clase

  • Numele de clasă sunt scrise în limba engleză în litere mici. Dacă nu sunteți sigur de ortografia cuvinte în limba engleză, verifica în dicționar. PhpStorm a construit-in corector ortografic.
  • Este de dorit ca terminologia din titlu se potrivesc cu numele de clasă, care operează dezvoltator (numele câmpurilor din baza de date, numele PHP-clase).
  • Pentru a separa cuvinte într-un nume, folosiți o cratimă (-).
  • Crearea CSS-selectoare numele cel mai informativ și ușor de înțeles. Acest lucru va ajuta la simplificarea și dezvoltarea de cod de depanare. Simțiți-vă libertatea de a folosi numele de clasă lungi.
  • nume de clasă ar trebui să reflecte esența unității, mai degrabă decât aspectul său.
  • Primul cuvânt în numele numele modulului de clasă ar trebui să meargă. În al doilea rând - numele blocului. Nume unitate poate consta din mai multe cuvinte. Acest format, pe de o parte, dreptul arată afilierea de stiluri, pe de altă parte - garantează unicitatea lor. Stilul unic asigură independența componentelor de aspect.
  • Elementele imbricate trebuie să păstreze context de denumire bloc. Blocul nu trebuie să fie elementul părinte direct.

Ambele opțiuni sunt valabile denumire:

Inline-stiluri

selectorul de tag-ul și atributul selectorului

Evitați utilizarea de nume de clase pentru tag-ul selectorului și atribut.

proprietăţi de stenografie

CSS oferă o varietate de stenografie (de exemplu, marja. Padding. Border, și altele), care se recomandă să fie utilizate ori de câte ori este posibil, chiar dacă numai una dintre valorile specificate. Folosind proprietăți utile stenografice pentru o mai mare eficiență și o mai bună înțelegere a codului.

Formele abreviate pentru font (font) și fundal (background) poate fi împărțită în mai multe proprietăți.

unități de măsură

Utilizați valorile în pixeli. Dimensiuni in px. absolut, clar, ușor de înțeles și nu depind de nimic. utilizarea unui procent acceptabil% peste tot, cu excepția dimensiunea textului (font-size).

0 și unități

Nu specificați o unitate de măsură pentru valorile nule.

Pentru a specifica culorile folosind elementele de hexazecimal sau RGBA (). Dacă doriți să specificați transparență. Nu utilizați RGB () și cazul superioară în proprietățile sens.

Evitați hacks în CSS-cod. Dacă totuși doriți să vă proprietățile unice ale unui anumit browser, utilizați clasele speciale .bx-crom. .bx-firefox. .bx-IE10.

reguli de grupare

Încercați să păstrați selectorii care descriu aspectul bloc specific, au fost în același loc și nu au fost împrăștiate pe CSS-fișier.

Pseudo (: înainte după.)

stiluri Reset (resetare CSS)

Nu utilizați CSS Reset layout. Componentele sunt unități independente. Ele nu ar trebui să afecteze CSS-reguli create pentru întreaga pagină. Acest lucru încalcă independența unității și face dificilă reutilizarea. stiluri de resetare de Master implementat folosind la nivel mondial CSS-reguli, care, în cele mai multe cazuri sunt scrise la selectorii de pe tag-ul, care nu este de dorit să se folosească de aspect. În plus, stilurile de reajustare afectează performanța paginii de redare, și poate interfera cu structura clienților.

prefixe browser

Proprietatea fără prefixul trebuie să fie întotdeauna la sfârșitul anului.

Selectoare stări (selectate, activă și hover)

Clasele Modifier sunt menționate în conformitate cu normele generale:

Priorități și selectoare Important!

Evitați utilizarea modificator prioritate! Important.

Fonturi, link-uri

Pentru înregistrarea textului, specificați întotdeauna familia de fonturi.