Razumijevanje metodologija pisanja CSS-a

U ovom postu ćemo vidjeti što su CSS metodologije pisanja, neke dobro poznate metodologije i kako nam one mogu biti korisne u optimiziranju našeg CSS koda. Počnimo s najjednostavnijim pitanjem kako bi se lopta valjala. Što je metodologija?

Metodologija je sustav metoda. Razmislite o metodi kao o jednostavnom načinu rada na sustavan način, u određenom unaprijed određenom načinu rada kako biste postigli željeni rezultat.

Da biste dobili bolje rezultate, poboljšavamo naše metode planiranjem, mijenjanje redoslijeda, pojednostavljenje koraka - što god to bilo brže i više učinkovit.

CSS metodologija

Sada ćemo govoriti o CSS metodologiji. Baš kao i sa svime u životu, imamo i metodu pisanja CSS-a: neki CSS za resetiranje pisanja, neki stilovi rasporeda mjesta, neki počinju s dvije do tri klase za styling elementa, neki pišu sve CSS kodove u jednu datoteku.

Naše željene metode su ili bile utvrđene na vlastitu ruku s vremenom ili su pod utjecajem drugih ili su potrebne na našem radnom mjestu ili zbog svega navedenog. No, tijekom vremena, CSS veterani su formulirali metodologije za pisanje CSS-a to je više fleksibilan, definiran, ponovljiv, razumljiv i pokoran.

Razmotrit ćemo formulirane metodologije koje će uključivati:

OOCSS (objektno orijentirani CSS)
BEM (blok, element, izmjenjivač)
ACSS (atomski CSS)
SMACSS (skalabilna i modularna arhitektura za CSS)

Bilješka: Niti jedan od niže navedenih pojmova ne bi trebalo miješati s bilo kojim okvirom, bibliotekom ili alatom koji može imati isto ime i koncept kao ove metodologije. Ovaj post je samo o metodologijama za pisanje CSS-a.

1. OOCSS

Razvijen od strane Nicole Sullivan 2008. godine, ključni koncepti OOCSS-a (Object Oriented CSS) uključuju CSS objekt identifikacija, odvajanje strukture i vizualnih stilova te izbjegavanje stilova temeljenih na lokaciji.

U OOCSS-u, prvi korak koji Nicole predlaže je da to učinimo identificirati objekte u CSS-u.

“U osnovi, "objekt" CSS-a je ponavljajući vizualni uzorak, koji se može apstrahirati u nezavisni isječak HTML-a, CSS-a, a možda i JavaScript-a. Taj objekt može se zatim ponovno upotrijebiti na web-lokaciji. - Nicole Sullivan, Github (OOCSS)“

Uzmite za primjer ovu strukturu s ove stranice. Evo nečega što je ponavljajući vizualni uzorak i ima vlastiti HTML i / ili CSS:

Ovdje imamo dvije vrste objekata, veći pregled naslova koje ćemo imenovati post-pregled-primarna i sidebar s naslovima koje ćemo imenovati post-pregled-sekundarni.

Moramo odvojena struktura i koža (tj. stilove koji stvaraju izgled objekta). Dvije vrste objekata imaju različite strukture, jedna je u većoj kutiji iako izgledaju slično, a slike lijevo i naslovi desno.

Dajemo slike oba objekta klasom post pregled slika i dodajte kôd koji stavlja sliku s lijeve strane. To nas sprečava da ponovimo kod gdje staviti sliku unutar objekata u CSS-u. Ako postoje i drugi slični objekti, ponovno ih koristimo post pregled slika za njih.

Odvajanje kože također se može učiniti za jednostavnije stilove granice ili pozadine. Ako imate više objekata s istim plavim rubom, stvaranje zasebne klase za plavu granicu i dodavanje predmeta objektima smanjite koliko puta plave granice moraju biti kodirane u CSS-u.

Nicole također predlaže ne dodajte stilove na temelju lokacije, na primjer, umjesto da ciljate sve veze unutar određenog dijela da biste označili, dodajte te veze a klasa isticanja s odgovarajućim CSS stilovima. Na taj način, kada trebate označiti vezu u nekom drugom dijelu stranice, možete ponovno koristiti klasu isticanja.

Pros za OOCSS: Vizualni kodovi za višekratnu upotrebu, fleksibilni kodovi lokacija, smanjenje duboko uklopljenih selektora.

kontra OOCSS: Bez priličnog broja ponavljajućih vizualnih uzoraka, odvajanje strukture i vizualni kodovi stilova izgledaju nepotrebno.

2. BEM

Razvijeni od strane programera na Yandex-u 2009. godine, ključni koncepti za BEM (blok, element, modifikator) obuhvaćaju identifikaciju blok, element & modifikator i imenovanje u skladu s tim.

“blok” je u biti isto kao i “objekt”(iz prethodnog primjera), “element” odnosi se na komponente bloka (slika, naslov, tekst za pregled u gornjem tekstu) Pregled-pošta- objekti). “modifikator” može se koristiti kada se stanje bloka ili elementa promijeni, na primjer kada dodate aktivnu klasu stavci izbornika da biste je označili, aktivna klasa djeluje kao vaš modifikator.

Nakon što ste identificirali komponente, navedite ih u skladu s tim. Na primjer:

blok izbornika imat će klasu izbornik
njegove stavke će imati klasu menu__item (blok i element odvojeni su dvostrukom donjom crtom)
modifikator za onemogućeno stanje izbornika može imati klasu menu_disabled (modifikator razgraničen s jednom donjom crtom)
modifikator za onemogućeno stanje stavke izbornika menu__item_disabled.

Za modifikatore možemo također koristiti key_value format za imenovanje. Na primjer, da bismo razlikovali stavke izbornika koje povezuju zastarjele članke, možemo im dati klasu menu__item_status_obsolete, i za stiliziranje stavki izbornika koje upućuju na dokumente na čekanju, ime klase može biti menu__item_status_pending.

Imenovanje se može modificirati na ono što vam odgovara. Ideja je biti u stanju identificiraju, blokove, elemente i modifikatore iz naziva klasa. Provjerite neke od sustava imenovanja navedenih na web-lokaciji BEM.

BEM-ova stranica također navodi kako se blok, element i modifikator mogu razdvojiti u CSS datotečni sustav. Blokovi vole “tipke” i “ulazi” mogu imati vlastite mape koje se sastoje od datoteka (.css, .js) koje su povezane s tim blokovima, što olakšava rad kada želimo uvesti te blokove u druge projekte.

Pros za BEM:Jednostavna uporaba naziva razreda i smanjenje dubokih CSS selektora.

Nedostaci BEM-a:Kako bi imena ostala razumna, BEM savjetuje da blokiramo stavljanje gnijezda na plitko.

3. ACSS

Poznat po Yahoou, negdje pri kraju prve desetljeća 21. \ t^st stoljeća, ključni koncepti ACSS-a sastoje se od stvaranja klasa za najviše atomske razine stila, tj. para svojstava-vrijednosti, a zatim ih koristi u HTML-u prema potrebi.

Teško je odrediti kada je ACSS (Atomic CSS) prvi put razvijen od kada se koncept koristi već neko vrijeme. Programeri su koristili klase poput .clearfix overflow: hidden dugo vremena. Ideja ACSS-a je u tome imati klasu za gotovo svaki par za svojstvo-vrijednost koji se ne odnosi na sadržaj trebat će nam na našoj web-lokaciji i dodati te klase kada bude potrebno HTML elementima.

U nastavku je primjer klasa koje se temelje na ACSS i kako se one koriste u HTML-u.

 .mr-8 margin-right: 8px; .fl-r float: desno;

Kao što možete vidjeti, broj klasa će se povećati ovom metodom, a HTML će biti prepun svih tih razreda. Ova metoda nije 100% učinkovita, ali može biti korisna ako želite. Yahoo to ipak koristi.

Pros za ACSS:Styling HTML bez ostavljanja HTML-a.

Proti ACSS-u:Previše klasa, ne baš uredno i možda bi ga mrzio.

4. SMACSS

Razvijen u 2011 by Jonathan Snook SMACSS (Scalable i modularna arhitektura za CSS) radi tako da identificira 5 različitih tipova pravila stila. Na temelju njih kreiraju se nazivi klasa i sustav arhiviranja.

“SMACSS je način da se ispita vaš proces dizajna i kao način da se ti kruti okviri uklope u fleksibilan proces razmišljanja. - Jonathan Snook”

SMACSS identificira 5 tipova stilskih pravila baza, raspored, modul, stanje, i tema.

Osnovni stilovi su zadani stilovi usmjereni na osnovne HTML oznake
, .
Stilovi izgleda su stilovi koji se koriste za definiranje izgleda stranice, kao što je kodiranje gdje će se prikazivati zaglavlja, podnožja i bočni izbornici..
Stilovi modula specifični su za modul poput galerije ili dijaprojekcije.
Stilovi država služe za označavanje elemenata s promjenjivim stanjima kao što su skriveni ili onemogućeni.
Tema se koristi za promjenu vizualne sheme stranice.

Različita pravila stila mogu se identificirati pomoću prefiksa u nazivu klase, na primjer, l-zaglavlje (za raspored) ili t-zaglavlje (za temu). Također možemo organizirati ove različite vrste pravila tako da ih smjestimo u zasebne datoteke i mape.

Pros za SMACSS:Bolje organizirani kod.

Propasti SMACSS-a: Ništa se ne mogu sjetiti.

Tu je besplatna online knjiga koju možete pročitati o SMACSS-u, ili možete kupiti njenu ebook verziju da je proučite više.

Zaključak

Gore navedene CSS metodologije pružit će vam sustav upravljati i optimizirati CSS kodove. Mogu se kombinirati zajedno, poput OOCSS-SMACSS, ili OOCSS-BEM, ili BEM-SAMCSS, kako bi odgovarao vašim potrebama.

Postoje i okviri i knjižnice ako želite automatizirani sustav za izvršavanje CSS metodologija kao što su:

Okvir OOCSS
BEM alati
Organski CSS okvir (slijedi atomski koncept).