Structura / optimizare CSS - folositi declaratiile doar o data

Citeam articolele de pe Google Developers si am dat peste:
https://developers.google.com/speed/articles/optimizing-css

Cand am un proiect mic o sa incerc sa-l codez ca si cand ar fi o conditie reala sa scrii o declaratie doar o data, sunt curios cat de mult se complica situatia.

Aveti moduri de structurare a CSS pe care le folositi sau articole care v-au fost utile?

Nu știu ce ar fi mai rău: repetarea declarațiilor sau repetarea selectorilor. Urmând o astfel de regulă vei reuși să-ți dezorganizezi cu succes stilurile, mai ales dacă folosești un preprocesor.


Articolul pleacă de la niște premize greșite:

  • selectorii sunt întodeauna mai scurți decât proprietățile
  • gzip nu optimizează repetarea textului

Ori, în proiectele reale vei avea mereu selectori de genul .quick-user-search-button și .warning-popup-container pe care trebuie să pui, printre alte proprietăți ce nu sunt comune, și color:red. Ce ți se pare mai scurt? Repetarea selectorilor sau a proprietăților?

Apoi, despre gzip: aceleași caractere sunt compresate pe baza unui „dicționar”; îți propun următorul experiment: se dau două fișiere, a.css și b.css. În a.css pune ~1kb de CSS. În b.css pui același CSS ca în primul fișier, dar de două ori. Fă zip la ambele și spune-ne dacă b.css.gzip este dublu față de a.css.gzip. (spoiler alert: diferența este neglijabilă, și nu doar la fișiere de 1kb!)


Din ciclul fă ce zice popa, în stilul din pagina de care ai pomenit, la o primă căutare:

p .left {
    display: inline;
    float: left;
    margin: 1.5em 1.5em 1.5em 0;
    padding: 0
}

p .right {
    display: inline;
    float: right;
    margin: 1.5em 0 1.5em 1.5em;
    padding: 0
}

De asemenea, display:inline este folosit de nu mai puțin de 47 ori, float:left: 27 ori, float:right:18 ori, line-height este folosit de 64 ori (având diferite valori), text-decoration de 58 ori iar border: de… 114 ori!

Acum realistic vorbind, dacă într-o pagină simplă, ce conține doar text nu s-au putut respecta sugestiile lor, ce șanse crezi tu că sunt să poți aplica toată povestea asta într-un proiect real și ceva mai complex?

4 Likes

In ultimele zile am inceput un proiect nou, astfel ca incer sa imi fac un nou set de reguli best practice-uri. Pana acum am ajuns la

  1. Folosirea claselor doar pentru layout. Ex:
    https://gist.github.com/anonymous/fa13b702b4eba19cb1a6
  2. Float-urile left sau right le folosesc ca stiluri doar pentru containere. Pentru elementele in sine float, folosesc clase

Ex

<div class="navigation" style="float:left">
  <item class="left">
  </item>
  <item class="left">
  </item>
  <item class="right">
  </item>
</div>
  1. Folosest @extent acolo unde se poate cat mai mult.
    https://gist.github.com/anonymous/bda0fcdf57b61fe25bbc

  2. Folosesc un naming apropiat de BEM, https://gist.github.com/anonymous/177b31288b452944ca04 . Inca nu e definitivat. Momentan ma joc, si e posibil sa ajung la BEM, insa vreau sa simt “nevoia”.

  3. Folosesc selectorare de state-uri
    https://gist.github.com/anonymous/b3dec1dcdb2a18b6789f

P.S: nu sunt sigur ca toate cele de mai sus optimzieaza css. Practica @extend, pare sa fie o solutie pentru cei de la google.
@iamntz: Google se refera la optimizare css din punct de vedere al performantei sau al descarcarii? Ca daca e vorba de descarcare, repetarea unei declaratii de stil nu afecteaza prea mult la un gzip.

Păi de la ei citire:

A logical way to make your website faster is to make the client code you send to the browser smaller. When looking to optimize your CSS files, one of the most powerful measures you can employ is to use every declaration just once.

și

In our experience, using every declaration just once can reduce the CSS file size by 20-40% on average.

Ceea ce are sens doar dacă nu se folosește gzip. Gândește-te cum ai proceda dacă ai zece elemente, fiecare cu stiluri proprii dar și cu un stil comun (dar nu pentru toate, ci în pereche). Ai mări complexitatea codului de câteva zeci de ori.

Pe mine ma amuza discutiile astea cand ma gandesc la poze.

3 Likes