Razumevanje metodologij za pisanje CSS

V tem postu bomo videli metodologije pisanja CSS, nekatere dobro znane metodologije in kako jih lahko uporabimo pri optimizaciji naše kode CSS. Začnimo z najpreprostejšim vprašanjem, da dobimo žogico. Kaj je metodologija?

Metodologija je sistem metod. Razmislite o metodi, ki je preprosto način, da nekaj naredite na sistematičen način, v določenem prednastavljenem načinu, kako doseči želeni rezultat.

Za boljše rezultate, naše metode izboljšujemo z boljšim načrtovanjem, spreminjanje vrstnega reda, poenostavitev korakov - karkoli deluje hitreje in je več učinkovito.

Metodologija CSS

Zdaj pa govorimo o CSS metodologiji. Tako kot pri skoraj vsem življenju, imamo tudi metodo pisanja CSS-ja: nekateri CSS najprej ponastavijo pisanje, nekateri slogi postavitve prostora, nekateri začnejo z dvema do tremi razredi za styling element, nekateri pišejo vse kode CSS eno datoteko.

Naše najprimernejše metode so sčasoma že uveljavljene ali pa so pod vplivom drugih ali zahtevane na našem delovnem mestu ali zaradi vsega zgoraj navedenega. Toda sčasoma so veterani CSS oblikovali metodologij za pisanje CSS to je več prilagodljiv, opredeljen, ponovno uporabljiv, razumljiv in obvladljivo.

Preučili bomo oblikovane metodologije, ki bodo vključevale:

OOCSS (objektno usmerjen CSS)
BEM (blok, element, spreminjevalec)
ACSS (atomski CSS)
SMACSS (prilagodljiva in modularna arhitektura za CSS)

Opomba: Nobeden od spodaj navedenih konceptov ne sme biti zamenjen z nobenim okvirom, knjižnico ali orodjem, ki bi lahko imela isto ime in koncept kot te metodologije. Ta objava je le o metodologijah za pisanje CSS.

1. OOCSS

Razvila ga je Nicole Sullivan leta 2008, ključni koncepti OOCSS (Object Oriented CSS) vključujejo CSS predmet identifikacija, ločitev strukture in vizualnih stilov ter izogibanje slogom, ki temeljijo na lokaciji.

V OOCSS je prvi korak, ki ga Nicole predlaga, da storimo identificirati objekte v CSS.

“V bistvu je "objekt" CSS ponavljajoči se vizualni vzorec, ki ga lahko povzamemo v neodvisen odrezek HTML, CSS in morebiti JavaScript. Ta predmet se lahko nato ponovno uporabi na celotnem spletnem mestu. - Nicole Sullivan, Github (OOCSS)“

Vzemite na primer to strukturo s te strani. Tukaj je nekaj, kar je ponavljajoči se vizualni vzorec in ima lasten neodvisen HTML in / ali CSS:

Tukaj imamo dve vrsti predmetov, večji predogled naslovov, ki jih bomo poimenovali post-preview-primary in stransko vrstico z naslovi, ki jih bomo poimenovali post-preview-sekundar.

Moramo ločena struktura in koža (tj. slogi, ki ustvarjajo videz predmetov). Dve vrsti objektov imata različne strukture, ena je v večji škatli, čeprav sta podobni, s slikami na levi in naslovi na desni.

Dajmo slike obeh objektov v razred slika po ogledu in dodajte kodo, ki postavi sliko na levo. To preprečuje, da bi morali ponavljati kodo, kam naj se slika postavi znotraj objektov v CSS. Če obstajajo drugi podobni objekti, jih ponovno uporabimo slika po ogledu za njih.

Ločevanje kože je mogoče narediti tudi za preprostejše stile meja ali ozadja. Če imate več objektov z isto modro obrobo, ustvarjanje ločenega razreda za modro obrobo in dodajanje v objekte bo skrajšajte, kolikokrat je treba modre obrobe kodirati v CSS.

Nicole tudi predlaga ne dodajte sloge glede na lokacijo, na primer, namesto da bi ciljali vse povezave znotraj posameznega razdelka, označite te povezave a označevalni razred z ustreznimi stili CSS. Na ta način, ko morate označiti povezavo v drugem delu strani, lahko ponovno uporabite razred označevalnika.

Pros za OOCSS: Vizualne kode za večkratno uporabo, prožne kode lokacij, zmanjšanje globoko ugnezdenih selektorjev.

Slabosti OOCSS: Brez prevelikega števila ponavljajočih se vizualnih vzorcev se ločilna struktura in vizualne kode stilov zdijo nepotrebne.

2. BEM

Ključni koncepti za BEM (Block, Element, Modifier), ki so jih razvili razvijalci na Yandexu leta 2009, zajemajo prepoznavanje blok, element & modifikator in jih ustrezno imenuje.

A “blok” v bistvu enaka kot. \ t “predmet”(iz prejšnjega primera), “element” se nanaša na sestavne dele bloka (slika, naslov, besedilo predogleda v zgornjem besedilu) predogled- predmetov). A “modifikator” lahko uporabite, ko se stanje bloka ali elementa spremeni, na primer, ko dodate element v meni, da ga označite, aktivni razred deluje kot vaš modifikator.

Ko identificirate komponente, jih ustrezno poimenujte. Na primer:

blok menija bo imel razred meni
njeni predmeti bodo imeli razred menu__item (blok in element sta ločena z dvojno podčrtano)
modifikator za onemogočeno stanje menija ima lahko razred menu_disabled (modifikator ločen z eno podčrtano)
modifikator za onemogočeno stanje elementa menija menu__item_disabled.

Za modifikatorje lahko uporabimo tudi key_value format za poimenovanje. Če želite na primer razlikovati med elementi menija, ki povezujejo zastarele članke, jim lahko damo razred menu__item_status_obsolete, in za oblikovanje vseh elementov menija, ki kažejo na čakajoče dokumente, je lahko ime razreda menu__item_status_pending.

Poimenovanje je mogoče spremeniti v tisto, kar vam ustreza. Ideja je, da lahko identifikacijo, bloke, elemente in modifikatorje iz imen razredov. Oglejte si nekatere sisteme poimenovanja, ki so navedeni na spletnem mestu BEM.

Spletna stran BEM tudi navaja kako se lahko loči blok, element in modifikator v datotečni sistem CSS. Bloki všeč “gumbov” in “vhodi” lahko imajo svoje mape, ki vsebujejo datoteke (.css, .js), ki so povezane s temi bloki, zaradi česar je lažje, če želimo uvoziti te bloke v druge projekte.

Prednosti BEM:Enostavna uporaba razrednih imen in zmanjšanje globokih CSS selektorjev.

Proti BEM:Da bi imena ostala nespremenjena, BEM svetuje, da blokiramo plitvo gnezdenje.

3. ACSS

Naredil je slavni Yahoo, nekje blizu konca prvega desetletje 21^st stoletja, ključni koncepti ACSS sestavljajo ustvarjanje razredov za najbolj atomsko stopnjo stila, tj. par lastnosti lastnine, nato pa jih uporabite v HTML, kot je potrebno.

Težko je ugotoviti, kdaj je ACSS (Atomic CSS) prvič razvit, saj je koncept že nekaj časa v uporabi. Razvijalci so uporabljali razrede, kot je .clearfix overflow: hidden za dolgo časa. Ideja v ACSS je, da imajo razred za skoraj vsak par za lastnost-vrednost, ki ni povezana z vsebino potrebovali bomo na naši spletni strani in po potrebi dodali te razrede elementom HTML.

Spodaj je primer razredov, ki temeljijo na ACSS in kako se uporabljajo v HTML-ju.

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

Kot lahko vidite, se bo število razredov povečalo s to metodo, HTML pa bo natrpan s strani vseh teh razredov. Ta metoda ni 100% učinkovita, vendar je lahko uporabna, če jo želite. Yahoo to uporablja po vsem.

Prednost ACSS:Oblikovanje HTML-ja brez zapuščanja HTML-ja.

Proti ACSS:Preveč razredov, ki niso zelo čedni in bi vas lahko sovražili.

4. SMACSS

Leta 2011 ga je razvil Jonathan Snook. SMACSS (Scalable and Modular Architecture for CSS) deluje tako, da identificira 5 različnih tipov slogskih pravil. Na podlagi tega se ustvarijo imena razredov in zbirke podatkov.

“SMACSS je način, kako preučiti proces oblikovanja in kot način, da se ti togi okviri prilagodijo fleksibilnemu razmišljanju. Jonathan Snook”

SMACSS namreč opredeljuje 5 tipov stilskih pravil osnova, postavitev, modul, stanje, in temo.

Osnovni slogi so privzeti slogi, usmerjeni na osnovne oznake HTML
, .
Slogi postavitve so slogi, ki se uporabljajo za definiranje postavitve strani, na primer kodiranje, kjer bodo glave, noge in stranski meniji odšli.
Slogi modulov so specifični za modul, kot je galerija ali diaprojekcija.
Slogi držav so namenjeni označevanju elementov s spremenljivimi stanji, kot so skriti ali onemogočeni.
Tema se uporablja za spreminjanje vizualne sheme strani.

Različna pravila stila je mogoče identificirati z uporabo predpone v imenu razreda, na primer, l-header (za postavitev) ali t-header (za temo). Te različne vrste pravil lahko organiziramo tudi tako, da jih postavimo v ločene datoteke in mape.

Prednosti SMACSS:Bolje organizirana koda.

Proti SMACSS: Nobenega se ne spomnim.

Obstaja brezplačna spletna knjiga, ki jo lahko preberete o SMACSS, ali pa jo kupite v ebook verziji, da jo preučite več.

Zaključek

Zgoraj navedene CSS metodologije vam omogočajo sistem upravljate in optimizirate svoje kode CSS. Lahko se združijo skupaj, kot sta OOCSS-SMACSS ali OOCSS-BEM ali BEM-SAMCSS, da ustrezajo vašim potrebam.

Obstajajo tudi ogrodja in knjižnice, če želite avtomatiziran sistem za izvajanje metodologij CSS, kot so:

Okvir OOCSS
Orodja BEM
Organski okvir CSS (sledi atomskemu konceptu).