VândPupăză

Icon

Bine o zis cine o zis cand o zis ce o zis

Naming reutilizabil in CSS

Denumirea claselor sau id-urilor in CSS dupa proprietatile elementului este improprie. Exemple de denumire gresita sunt:

#rounded-menu sau .blueLink

Argumentul cel mai comun adus impotriva acestor denumiri este ca face dificila mentenanta codului in sensul ca proprietatile elementelor se vor schimba in timp ce numele de clasa / id raman aceleasi. Pe termen lung denumirile de acest gen isi pierd relevanta si fac debugging-ul dificil.

Un aspect care mi se pare des pierdut din vedere este ca aceste denumiri impiedica reutilizarea usoara a codului.
De multe ori te vezi construind componente similare in structura: meniuri liniare, box-uri de search, butoane proeminente.

Daca meniul tau se cheama #rounded-menu sau #top-menu implementarea sa intr-un alt site necesita niste renaming pentru a-i da ceva relevanta daca proprietatile nu raman similare.

OOCSS este un concept foarte bun in care iti construiesti componente generice pe care le poti extinde apoi in site-urile in care le implmenetezi.

.pipe-menu sau .tab-menu mi se par mai usor de reutilizat.

.box, .box-header, .box-footer, si .box-content pot fi niste componente foarte utile pe termen lung.

Object Oriented CSS

Suna profan in lumea CSS dar Nicole Sullivan propune ceva foarte sanatos: sa iei conceptele din programarea orientata pe obiecte si sa le aplici in dezvoltarea fisierelor tale de CSS.

In termeni simpli propunerea consta in a-ti scrie module generice pe care le vei reutiliza in paginile tale. Aceste module generice se vor extinde prin adaugarea mai multor clase.

Necesitatea OOCSS o vei simti atunci cand lucrezi la site-uri de talie mare cu multe pagini. Desi un site simplu poate beneficia de principiile OOCSS, atunci cand ai de intretinut zeci, sute de pagini suna mult mai rational sa iti standardizezi CSS-ul.

Prin standardizare nu ma refer la validare ci la construirea de elemente cu aspect general similar peste tot in paginile site-ului tau. In principiu nu ar trebui sa scrii CSS suplimentar pentru fiecare modul nou pe care il adaugi decat daca acesta este radical diferit de ceea ce ai deja la dispozitie.

In general developerii de front-end nu au incredere si prefera sa nu foloseasca din codul scris de ceilalti inaintea lor.

Nicole propune un framework (4kb !) construit pentru a ilustra principiile OOCSS pe care le sustine in aceasta prezentare:

Poti sa iti iei framework-ul OOCSS de pe github

Nicole Sullivan este un Perfomance Engineer de la Yahoo! care se ocupa si de tool-urile de la Exceptional Performance