Sådan skrives bedre CSS med BEM

Denne blog og video er især til udviklere, der ønsker at optimere deres CSS. Det er meget vigtigt at have læsbar CSS for dine holdkammerater og dig selv.

Det vil hjælpe dig og dit team med at udvikle webstedet eller applikationen yderligere på et senere tidspunkt.

Efter min mening er CSS-navnekonvention BEM den perfekte måde at skrive dine CSS-klasser og vælgere bedre end før.

Hvis du kan lide et visuelt eksempel på, hvordan jeg ville ændre min allerede CSS-udviklede til den mere læsbare BEM, kan du tjekke videoen.

Hvis du er mere en person at læse, skal du følge teksten herunder

Video noter

Eksempel på websted

I dette eksempel brugte jeg et Bootstrap-tema, du kan downloade Business-temaet gratis.

Sublim tekst

I denne editor brugte jeg Sublime Text editor. Du kan downloade det gratis. Hvis du ønsker en rigtig pro med Sublime Text, kan du tjekke kursus / bog for vores ven Wes Bos.

Detaljeret BEM-information

Hvis du vil læse BEM-dokumentationen, skal du kontrollere den på BEM-webstedet.

I min video viste jeg et detaljeret blogindlæg om BEM på CSSwizardy-webstedet.

Lad os komme ind i koden!

Trin 1: HTML & CSS, hvordan vi lærte det

Når du lærer at skrive CSS, ville det være noget, der ligner dette:

HTML

CSS

nav {
  højde: 60px;
  max-bredde: 1024px;
}

nav ul {
  margen: 0;
  polstring: 0;
  tekstjustering: center;
}

nav ul li {
  display: inline;
}

nav ul li a {
  display: inline-block;
  polstring: .5em 1em;
}

Analyse af HTML & CSS

Hvis du analyserer HTML og CSS, ser vi følgende.

  • Struktur med kun elementer
  • Ingen klasse navne
  • Valg af flere niveauer

Problemer, du vil opdage med at skrive HTML & CSS som dette!

Da jeg startede med Frontend Development, var det sådan, jeg fik at vide at skrive det.

Måske ser du ikke problemet, men i slutningen af ​​denne blog ved du det helt sikkert!

De problemer, du vil opdage med dette (i videoen vil du se det):

  • Hvis du vil bruge den samme HTML et andet sted, vil tingene være rodet, hvis du ændrer det her, fordi det afspejler overalt! Så det er ikke skalerbart.
  • For at overskrive stylingen bliver du nødt til at skrive meget specifikke vælgere med flere niveauer eller endda heste, brug! Vigtigt at overskrive.
  • Dette vil forårsage en masse fejl med store CSS-filer.
  • CSS-vælgerne forklarer ikke, hvor du kan finde HTML-elementerne på siden. Så det er ikke selvforklarende.

Trin 2: Optimer din HTML & CSS lidt bedre

Da jeg havde få års erfaring med Frontend Development, begyndte HTML & CSS at se sådan ud:

HTML

CSS

.navigation {
  højde: 60px;
  max-bredde: 1024px;
}

.navigation ul {
  margen: 0;
  polstring: 0;
  tekstjustering: center;
}

.navigation li {
  display: inline;
}

.navigation a {
  display: inline-block;
  polstring: .5em 1em;
}

Analyse af HTML & CSS

Hvis du analyserer den mere optimerede HTML og CSS, ser vi følgende.

  • CSS-vælgerne er kortere
  • CSS-vælgerne har en mindre specificitet
  • CSS-vælgerne indeholder noget mere kontekst, men ikke den kontekst, som BEM kunne give.

Da jeg var ved at udvikle dette, var det ret optimeret for mig, tænkte jeg. Men det tog mig et par år at finde ud af, at jeg havde brug for mere optimering. Fordi der stadig var et par problemer.

  • Hvis jeg havde brug for at overskrive styling, var det stadig nødvendigt at tilføje et par lag til mine vælgere ved at gøre det mere specifikt.
  • Undertiden når jeg arbejder med CSS-biblioteker / rammer, var jeg stadig nødt til at bruge! Vigtigt nogle gange.
  • Vælgerne var ikke så selvforklarende.

Trin 3: Brug af BEM til at skrive bedre HTML & CSS

Da jeg opdagede, at browsere læser forskellige vælgere end mennesker, var det som ”hvad? hej? ”. Dette var så nyt for mig! Jeg opdagede, at mine CSS-vælgere ikke var så gode, som jeg troede.

Så når jeg søgte efter metoder til at gribe ind og gøre CSS-vælgerne bedre, opdagede jeg BEM. I videoen kan du tjekke, hvordan jeg anvender BEM på CSS og HTML på et eksempelwebsted.

I dette eksempel kan du se, hvordan HTMl & CSS ifølge BEM vil se ud.

HTML

CSS

.main-nav {
  højde: 60px;
  max-bredde: 1024px;
}

.main-nav__list {
  margen: 0;
  polstring: 0;
  tekstjustering: center;
}

.main-nav__list-item {
  display: inline;
}

.main-nav__link-item {
  display: inline-block;
  polstring: .5em 1em;
}

.main-nav__link-item — aktiv {
  font-vægt: fed;
  farve: rød;
  baggrund: grå;
}

Analyse af HTML & CSS

Hvis du analyserer HTML & CSS, vil du opdage en klassens navn på hvert element. Klassenavne, der er selvbeskrivende. Du behøver ikke at kigge på et websted for at læse, hvor denne komponent står på siden.

Den erklærer for sig selv, at det er den vigtigste navigation. Alle lister og links giver også direkte kontekst for dig og dit team, der arbejder på den samme kode.

Lad os tjekke, om du løser de problemer, vi har set før.

  • Nu kan du kopiere HTML'en, og den vil forblive intakt. Hvis du vil bruge HTML igen, skal du ændre .main-nav til "footer-nav", og du vil ikke se nogen arvet styling fra hovednavigationen. Så dette er perfekt skalerbart.
  • Hvis du vil overskrive stylingen af ​​1 eller flere elementer, skal du kun tilføje et andet klassens navn, lige så enkelt!
  • Især når du bruger en CSS-forprocessor, vil din udviklingsstruktur have en god arkitektur.
  • CSS-vælgerne og klassens navne beskriver sig selv. Så det er let at finde nu. Det giver meget mere kontekst end før.

Opdateret: 04–10–2017 den 14:27

Andre BEM-eksempler

Hvis du ikke er overbevist om af mit eksempel, hvorfor du skal bruge BEM, og det er nu et problem! Tjek venligst Sparkbox's side, der er et meget detaljeret og praktisk eksempel på, hvordan du kan bruge BEM i din udvikling. (Jeg fik dette tip fra en af ​​kommentarerne til Reddit!

Hvis du har brug for hjælp

Hvis du har brug for hjælp til at indpasse din CSS i BEM-strukturen, så fortæl mig det i kommentarerne eller på Messenger !

Følg os på:

Følg os på Medium: https://medium.com/mr-frontend-community
 Følg os på Twitter: https://twitter.com/frontendmr
 Følg os på Facebook: http://facebook.com/mrfrontendcommunity/
 Følg os på Instagram: @mrfrontend