Kuidas otsustada, kas peaksite CSS-i klasse aheldama või laiendama

Foto Alexandru Tugui saidil Unsplash

Kui loote rakendust või veebisaiti, mis muutub sageli, lahendavad CSS-i modulaarsed meetodid paljusid probleeme. Selle asemel, et kopeerida oma HTML-i struktuuri CSS-is ja seda kaunistada, loote komponentide kulutatavad teegid. See muudab projektid skaleeritavamaks ja hoiab CSS-i koodbaasi kontrolli all.

CSS-i modulaarsus sõltub kompositsioonist, mis raskendab paratamatult HTML-i. See kõrvalmõju võib paljudele inimestele olla oluliseks hoiatavaks mõjuks selle tekitatud “paistetusest”.

Selles artiklis võrdleme kahte tehnikat: aheldamist ja pikendamist. Vaatame, mida nad pakuvad ja millised on nende puudused, et saaksite teha teadlikumaid valikuid.

Aheldamine

CSS-klasside aheldamine tähendab soovitud välimuse komponeerimist, lisades graanuliga modifikaatoreid HTML-valijale. Komposiitstiilid loovad lõpliku visuaalse tulemuse. See on vaikimisi käitumine enamiku modulaarsete CSS-i metoodikate puhul.

Võtame nupu jaoks järgmise OOCSS-koodi:

.btn {
  kuva: blokeerima;
  box-shadow: 0 0 5px 0 rgba (0, 0, 0, .2);
}
.btn-default {
  ääris: 3xx hall;
}
.btn-primaarne {
  taust: lilla; värv: valge;
}

Kui te peaksite modifitseerijaid aheldama, näeks teie HTML välja järgmine:

 esmane nupp 
 Vaikenupp 

Teeme nüüd natuke keerukamat, seekord BEM-iga (plokk, element, modifikaator):

  
    ...   
  
...

Siin on meil palju rohkem suhtlevaid klasse:

  • .Media-objekti plokil on mitu modifikaatorit (. Media-objekt - tagurpidi ja .media-objekt - visandatud).
  • Elemendil .media-object__img on üks modifikaator (.media-object__img - pleekinud).
  • Element .media-object__img on ka .img-plokk, millel on oma modifikaator (.img - ruut).

Plussid

Aheldamise klasside tipphetk on eraldi vastutus. See hoiab teie CSS-i andmebaasi puhta, kerge, mugavana loetava ja mittekorduvana. See, mida iga klass teeb, on kristallselge ja teate kohe, mida peaksite kasutama ja mida mitte.

See hoiab ära ka surnud koodi: kuna tegemist on ehitusplokkidega, on kõik potentsiaalselt kasulik. Komponendi eemaldamisel peate eemaldama ainult HTML-i.

Eraldi modifikaatorid on riigi esindamiseks suurepärased. Seega muudab see JavaScripti inseneride elu lihtsamaks. Kõik, mida nad peavad tegema, on klasside lisamine ja eemaldamine.

Suurte projektide puhul võib see meetod säästa palju aega.

Miinused

Üks modulaarse CSS-iga inimestel kõige tavalisemaid probleeme on see, et see loob HTML-is “klassi hulluse”. Rangelt öeldes on see tõsi.

Projekteerimismustrid, mis jagavad vastutust, põhjustavad peaaegu alati rohkem faile ja verbaalset koodi. CSS pole erand: kui valite meetodi, mis peaks teie koodbaasi hooldatavamaks muutma, on vasteks pikad HTML-failid.

Nii palju koodi sisestamine on tänapäeval üha vähem probleemiks, kuna enamus toimetajaid ja IDE-sid pakuvad võimsat automaattäidet. Kuid nüüd on ikka rohkem koodi kirjutada iga kord, kui teete uue lehe või loote uue komponendi. Aja jooksul võib see tekitada segadust ja koondamist, mis ajab mõned arendajad eemale.

Pikendades

Kui te ei soovi klasse aheldada, saate neid laiendada. Meil on ikka samad eraldiseisvad plokid, kuid HTML-is aheldamise asemel pärandame põhiklassi omadused selle modifikaatoritele. Nii saame neid kõiki korraga kasutada.

Kasutame selleks Sassi funktsiooni @extend:

.btn {
  kuva: blokeerima;
  box-shadow: 0 0 5px 0 rgba (0, 0, 0, .2);
  & vaikimisi {
    @ laiendada .btn;
    ääris: 3xx hall;
  }
  & -primaarne {
    @ laiendada .btn;
    taust: lilla;
    värv: valge;
  }
}

Sellest saab järgmine CSS-i fragment:

.btn,
.btn-default,
.btn-primaarne {
  kuva: blokeerima;
  box-shadow: 0 0 5px 0 rgba (0, 0, 0, .2);
}
.btn-default {
  ääris: 3xx hall;
}
.btn-primaarne {
  taust: lilla; värv: valge;
}

Ülaltoodud CSS-i korral näeks meie HTML välja järgmine:

 esmane nupp 
 vaikenupp 

Näiliselt korduvate tundide keerutamise asemel on meil ainult üks. Sellel on selgesõnaline nimi ja see hoiab koodi loetavalt. Saame endiselt kasutada .btn üksi, kuid kui vajame selle varianti, peame uue klassi aheldamise asemel lisama sellele ainult modifikaatori osa.

Plussid

Selle meetodi esiletõstmiseks on segaduseta, paremini loetav ja kergem HTML. Moodul CSS-i valides otsustate teha ka rohkem HTML-i ja vähem CSS-i. CSSist saab juhiste loendi asemel teek. Seega veedate HTML-is rohkem aega, mistõttu võiksite seda hoida kerge ja hõlpsasti loetavana.

Miinused

Teie CSS võib tunduda kuiv, eriti kui kasutate eeltöötlejat, kuid klasside laiendamine toob kaasa palju raskema CSS-faili. Lisaks ei ole teil toimuva üle palju kontrolli: iga kord, kui kasutate rakendust @extend, teisaldatakse klassi määratlus ülaossa ja lisatakse valijate loendisse, kes jagavad sama reeglistikku. Selle protsessi tulemuseks võib olla imelik stiilide alistamine ja palju rohkem genereeritud koodi.

Samuti on vaja kasutada mitut modifikaatorit koos. Laiendusmeetodi abil ei kirjutata te enam HTML-i. Kui soovite luua uusi kombinatsioone, jääb teile üks lahendus: looge veelgi rohkem klasse, laiendades modifikaatoreid. Seda on raske hooldada ja selle tulemuseks on rohkem koodi. Iga kord, kui peate klasse segama, peate CSS-i redigeerima ja looma potentsiaalselt ühekordselt kasutatava reegli. Kui eemaldate kunagi seda kasutavat HTML-i, peate kustutama ka CSS-i klassi.

Järelmõtted

Modulaarne CSS on verbaalsema HTML-i hind, kuid selle pakutavate eeliste eest ei maksa palju maksta. Kui olete juba otsustanud, et vajate modulaarsust, ärge tulistage ennast jalaga, kasutades selleks sobimatuid tavasid. Selle tulemuseks on, et poole kasu saamiseks tuleb rohkem tööd teha. Pärimine on ahvatlev, kuid kompositsiooni on korduvalt tunnistatud palju paremaks strateegiaks.

HTML-i “paistetus” ei ole nii suur asi, kui vaadata selle tegelikku mõju. Modulaarsus loob paratamatult rohkem koodi - teie valitud meetod määrab ainult selle, kuhu see läheb. Toimivuse seisukohast on HTML rohkem kui CSS.

Ärge keskenduge väikestele asjadele, millel pole tähtsust. Selle asemel võta kasutusele tööriistad, mis aitavad koodil tõhusamalt kirjutada ja navigeerida. Proovige vaadata suurt pilti ja teha valikuid faktide, mitte isiklike eelistuste põhjal.

Algselt avaldati aadressil frontstuff.io.