CSS-nimeämiskäytännöt, jotka säästävät virheenkorjauksen tunteja

Olen kuullut paljon kehittäjiä sanovan, että he vihaavat CSS: ää. Kokemukseni mukaan tämä johtuu siitä, ettemme viettänyt aikaa CSS: n oppimiseen.

Korealainen?

알림: 한국인 독자 분들 을 위해 본 기사 는 는 는 되었으며, 되었으며 독자 여기

CSS ei ole kaunein kieli, mutta se on onnistunut ylläpitämään verkon muotoilua jo yli 20 vuoden ajan. Ei menossa pahasti, vai mitä?

Kun kirjoitat lisää CSS: ää, näet kuitenkin nopeasti yhden ison haittapuhelun.

CSS: n ylläpito on todella vaikeaa.

Huonosti kirjoitettu CSS muuttuu nopeasti painajaiseksi.

Tässä on muutama nimeämiskäytäntö, joka säästää vähän stressiä ja lukemattomia tunteja.

olet ollut siellä aiemmin, eikö niin?

Käytä tavutettuja merkkijonoja

Jos kirjoitat paljon JavaScriptiä, muuttujien kirjoittaminen kamelin tapauksessa on yleinen käytäntö.

var redBox = document.getElementById ('...')

Hienoa, eikö totta?

Ongelmana on, että tämä nimeämismuoto ei sovellu hyvin CSS: ään.

Älä tee tätä:

.redBox {
  reunus: 1px kiinteä punainen;
}

Sen sijaan tee tämä:

.red-box {
   reunus: 1px kiinteä punainen;
}

Tämä on melko tavallinen CSS-nimeämiskäytäntö. Se on kiistatta luettavissa.

Se on myös yhdenmukainen CSS-omaisuuden nimien kanssa.

// Oikea
.jokoinen luokka {
   kirjasinpaino: 10em
}
// Väärä
.jokoinen luokka {
   fontWeight: 10em
}

BEM-nimeämissopimus

Joukkueilla on erilaisia ​​lähestymistapoja CSS-valitsijoiden kirjoittamiseen. Jotkut joukkueet käyttävät tavuviivojen rajaajia, kun taas toiset käyttävät mieluummin rakenteellisempaa nimeämiskäytäntöä nimeltään BEM.

Yleensä on 3 ongelmaa, jotka CSS-nimeämiskäytännöt yrittävät ratkaista:

  1. Tietää, mitä valitsin tekee, vain katsomalla sen nimeä
  2. Saadaksesi kuvan siitä, missä valitsinta voidaan käyttää, vain katsomalla sitä
  3. Tuntea luokanimien väliset suhteet vain katsomalla niitä

Oletko koskaan nähnyt luokanimet kirjoitettu tällä tavalla:

.nav - toissijainen {
  ...
}
.nav__header {
  ...
}

Se on BEM-nimeämissopimus.

Selitetään BEM 5-vuotiaalle

BEM yrittää jakaa yleisen käyttöliittymän pieniksi uudelleenkäytettäviksi komponenteiksi.

Mieti alla olevaa kuvaa:

Se on palkittu kuva keppi-miehestä :)

Ei, se ei ole palkittu :(

Stick-man edustaa komponenttia, kuten suunnitteluosaa.

Saatat jo arvata, että BEM: n B tarkoittaa "estoa".

Todellisessa maailmassa tämä "lohko" voisi edustaa sivuston navigointia, otsikkoa, alatunnistetta tai mitä tahansa muuta suunnitteluruhkaa.

Edellä selitetyn käytännön mukaisesti tämän komponentin ihanteellinen luokanimi olisi stick-man.

Komponentin tulee olla muotoiltu seuraavasti:

.stick-man {
  
 }

Olemme käyttäneet täällä erotettuja jousia. Hyvä!

E Elementeille

'BEM'ssä oleva E tarkoittaa Elementtejä.

Suunnittelupalkit yleensä elävät harvoin eristyksissä.

Esimerkiksi keppi-miehellä on pää, kaksi upeaa käsiä ja jalkaa.

Pää, jalat ja käsivarret ovat kaikki komponentin osia. Niitä voidaan pitää lapsikomponenteina, ts. Kokonaiskomponentin lapsina.

BEM-nimeämiskäytäntöä käyttämällä elementtiluokan nimet johdetaan lisäämällä kaksi alaviivaa, jota seuraa elementin nimi.

Esimerkiksi:

.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

M muuntajille

'BEM' -merkinnässä oleva M tarkoittaa modifioijia.

Entä jos keppomiestä muunnettiin ja meillä voisi olla sininen tai punainen keihäs?

Todellisessa maailmassa tämä voi olla punainen tai sininen painike. Nämä ovat kyseisen komponentin muunnoksia.

BEM: n avulla modifikaattoriluokan nimet johdetaan lisäämällä kaksi tavuviivaa, jota seuraa elementin nimi.

Esimerkiksi:

.stick-man - sininen {
}
.stick-man - punainen {
}

Viimeinen esimerkki osoitti, että emokomponentti on muokattu. Näin ei aina ole.

Entä jos meillä olisi erikokoisia keppimiehiä?

Tällä kertaa elementtiä on muokattu. Muista, että elementti on alakomponentti koko sisältävässä lohkossa.

.Stick-man edustaa Estä, .stick-man__head elementtiä.

Kuten yllä olevasta esimerkistä voidaan nähdä, kaksoisvälejä voidaan käyttää myös seuraavasti:

.stick-man__head - pieni {
}
.stick-man__head - iso {
}

Huomaa jälleen kaksoisviivojen käyttö yllä olevassa esimerkissä. Tätä käytetään modifioijan osoittamiseen.

Nyt sinulla on se.

Periaatteessa näin BEM-nimeämiskäytäntö toimii.

Henkilökohtaisesti minulla on tapana käyttää vain tavuviivan delimetriluokan nimiä yksinkertaisiin projekteihin ja BEM enemmän osallistuviin käyttöliittymiin.

Voit lukea lisää BEM: stä.

Miksi käyttää nimeämiskäytäntöjä?

Tietotekniikassa on vain kaksi kovaa ongelmaa: välimuistin mitätöinti ja asioiden nimeäminen - Phil Karlton

Asioiden nimeäminen on vaikeaa. Yritämme tehdä asioista helpompaa ja säästää aikaamme tulevaisuudessa entistä ylläpidettävämmällä koodilla.

Asioiden oikea nimeäminen CSS: ssä helpottaa koodisi lukemista ja ylläpitämistä.

Jos valitset BEM-nimeämiskäytännön, suunnittelukomponenttien / lohkojen välinen suhde on helpompi nähdä tarkastelemalla merkintöjä.

Tuntuuko itsestään?

CSS-nimet JavaScript-koukkuilla

Tänään on Johanneksen ensimmäinen työpäivä.

Hänelle luovutetaan HTML-koodi, joka näyttää tältä:

John on lukenut tämän artikkelin ja tajuaa, että tämä ei ehkä ole paras tapa nimetä asioita CSS: ssä. Joten hän menee eteenpäin ja reagoi kooditietokantaan näin:

Näyttää hyvältä, vai mitä?

Johnille tuntematon, hän oli rikki kooditietokannan

Millä tavalla?

Jossain JavaScriptin koodissa oli yhteys aikaisempaan luokan nimeen siteNavigation:

// Javasript-koodi
const nav = document.querySelector ('. siteNavigation')

Joten luokan nimen muuttuessa nav-muuttujasta tuli nolla.

Kuinka surullista.

Tämänkaltaisten tapausten estämiseksi kehittäjät ovat keksineet erilaisia ​​strategioita.

1. Käytä js-luokan nimiä

Yksi tapa vähentää tällaisia ​​virheitä on käyttää js- * luokan nimeä osoittamaan suhdetta kyseiseen DOM-elementtiin.

Esimerkiksi:

Ja JavaScript-koodissa:

// Javasript-koodi
const nav = document.querySelector ('. js-site-navigation')

Tavallisesti jokainen, joka näkee js-site-navigation luokan nimen, ymmärtää, että JavaScript-koodissa on yhteys kyseiseen DOM-elementtiin.

2. Käytä Rel-määrite

En käytä tätä tekniikkaa itse, mutta olen nähnyt ihmisten tekevän.

Tunnistatko tämän?

Periaatteessa rel-määrite määrittelee linkitetyn resurssin suhteen asiakirjaan, josta siihen viitataan.

Edellisessä John-esimerkissä tämän tekniikan kannattajat tekisivät tämän:

Ja JavaScript:

const nav = document.querySelector ("[rel = 'js-site-navigation']")

Epäilen tätä tekniikkaa, mutta olet todennäköisesti törmännyt siihen joihinkin tietokantoihin. Väite tässä on, "No, Javascriptillä on suhde, joten käytän rel-määritteellä sitä kuvaamaan".

Verkko on iso paikka, jossa on paljon erilaisia ​​”menetelmiä” saman ongelman ratkaisemiseksi.

3. Älä käytä datamääreitä

Jotkut kehittäjät käyttävät datamääreitä JavaScript-koukkuina. Tämä ei ole oikein. Tietojen määritteitä käytetään määritelmän mukaan mukautettujen tietojen tallentamiseen.

Tietomääritteiden hyvä käyttö. Kuten Twitterissä nähdään

Muokkaa numeroa 1: Kuten jotkut hämmästyttävät ihmiset mainitsivat kommenttiosassa, jos ihmiset käyttävät rel-määrittettä, niin tietynlaisissa tapauksissa on ehkä hyvä käyttää tietoominaisuuksia. Se on puhelusi myöhemmin.

Bonusvinkki: Kirjoita lisää CSS-kommentteja

Tällä ei ole mitään tekemistä yleissopimusten nimeämisen kanssa, mutta se säästää myös aikaa.

Vaikka monet verkkokehittäjät yrittävät EI kirjoittaa JavaScriptiä koskevia kommentteja tai pysyä muutamassa, mielestäni sinun pitäisi kirjoittaa lisää CSS-kommentteja.

Koska CSS ei ole tyylikkäin ”kieli”, hyvin jäsennellyt kommentit voivat säästää aikaa, kun yrität ymmärtää koodiasi.

Se ei ole haittaa.

Katso, kuinka hyvin Bootstrap-lähdekoodi on kommentoitu.

Sinun ei tarvitse kirjoittaa kommentteja värin sanomiseksi: punainen antaa punaisen värin. Mutta jos käytät vähemmän ilmeistä CSS-temppua, kirjoita kommentti vapaasti.

Oletko valmis tulemaan Pro: ksi?

Olen luonut ilmaisen CSS-oppaan saadaksesi CSS-taitosi hellittämään heti. Hanki ilmainen e-kirja.

Seitsemän CSS-salaisuutta, joista et tiennyt