Ved å kombinere Krefter SEM og BIO for å Forbedre CSS

0
33

CSS er enkelt, noen kanskje hevde, men at “lett” kan forårsake rotete kode. Dette er spesielt sant gjennom kraften av preprocessors som Sass eller Mindre der, hvis du ikke er forsiktig, CSS kan bli vanskeligere å håndtere i stedet for enklere. Sass? Hardere? Dette Hovedpunkt viser et godt eksempel på Sass hekkende helvete.

Hvis Sass koden ser ut som at, du kan definitivt forbedre koden din med SEM & BIO, en CSS-teknikk jeg skal introdusere deg til nå!

I denne artikkelen, jeg kommer til å bruke koden eksemplet nedenfor for å forklare hvordan SEM og BIO fungerer og hvordan de kan bidra til å forbedre din CSS-strategi.

Se Pennen av thebabydino (@thebabydino) på CodePen.

Generelt, SEM er opptatt med høyt nivå CSS filosofi mens BIO er en vanlig teknikk for å hjelpe deg å skrive bedre CSS for å oppnå SEM. Hovedformålet med både SEM og BIO er å bedre håndtere CSS spesifisitet som er en av de viktigste begreper du bør forstå for CSS.

Kreditt: Nana Doo

Først av alt, la oss snakke om SEM.

SEM

SEM står for:

  • Skalerbar
  • Extensible
  • Stabile

Prøver å oppnå disse tre faktorene kan definitivt forbedre din CSS-kode, og det hjelper deg å bygge din komponenter mye mer solid.

La oss snakke mer om hver faktor i detalj.

Skalerbar

En skalerbar (eller gjenbrukbare) komponent betyr at den samme ser komponenter bør brukes hvor du vil, uten å gjøre noen koding endringer.

Kreditt: Nana Doo

Fra CodePen eksemplet ovenfor, “Søk” – knappen i overskriften ser ut akkurat samme som ‘Link’ – knappen i sidefeltet. Når vi sammenligner HTML-koding,

  • “Søk” – knappen < – knappen> – element
  • men “Lenke” – knappen <a role=”button” … > – element

…og selv om markup er forskjellige, stiler er identiske med de samme klasser: .c-btn og .c-btn–gul.

Knappen stiler er skalerbare, og det tillater deg å legge til det samme ser komponenter hvor som helst du ønsker, så det vil ikke være forurenset av sine foreldre eller søsken. Dette kan spare deg fra den store hodepine av å ikke vite hvorfor helt urelaterte komponenter er brutt selv om endringene er gjort på en annen komponent fra et helt annet sted.

Kilde: Cartoon Network

Extensible

En utvidbar komponent kan lett gi ekstra funksjoner/funksjoner uten å bryte seg selv eller å bli skrevet fra bunnen av.

La oss se på CodePen eksempel igjen.

Se Pennen av iamryanyu (@iamryanyu) på CodePen.

Knappen i overskriften og i den viktigste delen ser ganske lik i tillegg til 3D-effekten. I dette tilfellet, i stedet for å opprette to forskjellige sett med knapper å ha en helt annen kode baser, vi kan utvide vanlig knapp stil, bare ved å legge til 3D-effekten til det.

Det gjelder det samme med knappen i bunnteksten. Selv om knappen har ulik farge og størrelse, og vi kan enkelt utvide den ved å legge til eller fjerne nye eller forskjellige funksjoner.

Kreditt: Nana Doo

Stabile

Sannsynligvis en av de største utfordringene for de fleste front-enders er å forstå CSS skrevet av andre mennesker, eller våre tidligere selv. Vi noen ganger bruke mer tid på å prøve å forstå den eksisterende koden enn å legge awesomely-skrevet ny kode.

Problemet kommer vanligvis fra:

  • ingen kommentarer, overhodet
  • over-engineering
  • ingen enkelt kilde av sannhet
  • ingen koding standard/beste praksis anses
  • eller alle av dem over
Kreditt: Nana Doo

Med SEM og BIO, kan vi definitivt forbedre kode og lagre andre (inkludert oss selv!) fra rotete, unmaintainable kode.

BIO

Det finnes mange flotte teknikker der ute for å forbedre måten vi skriver CSS, og fra min erfaring, jeg funnet følgende tre teknikkene som utgjør BIO akronym fungerer veldig godt sammen

  • BEM
  • ITCSS
  • OOCSS
Kreditt: Nana Doo

Mye av utviklere/ingeniører allerede vet de kjente teknikker, men jeg ønsker å gå gjennom hver enkelt av dem og snakke om hvordan jeg bruker disse teknikkene.

BEM

BEM er svært populære metodikk og det har vært å hjelpe oss å forbedre måten vi tenker om CSS og Sass/Mindre.

BEM står for:

  • Blokk
  • Element
  • Modifier
Kreditt: Nana Doo

Som det dårlige eksemplet ovenfor viser, har vi en tendens til å overdrive kraften i Sass/Mindre og falle i hekke-helvete. Men med BEM, vi begynner å ha en svært lav CSS spesifisitet ved å opprettholde stiler i en (eller to) nivåer av hekkende.

Hvis du har opplevd noen kamper kjemper høyere CSS-spesifisitet, vil du vite hvor vondt det er å komme ut en vinner.

Kommer tilbake til vårt eksempel, HTML-markup ser ut som dette:

<div class=”o-grid”>
<div class=”o-grid__elementet o-grid__header”>

</div>
<div class=”o-grid__elementet o-grid__main”>

</div>
<div class=”o-grid__elementet o-grid__sidebar”>

</div>
<div class=”o-grid__elementet o-grid__footer”>

</div>
</div>

Eksemplet består av:

  • en blokk: .o-rutenett
  • elementer: .o-grid__element .o-grid – __ – overskriften .o-grid__viktigste, .o-grid – __ – sidepanelet .o-grid__bunntekst

Fordi BEM gir en navnekonvensjon som understreker unike klasser, vi trenger ikke å gå inn i dype hekkende som:

.o-grid {
.o-grid__item {

}
}

I stedet kan vi definere stiler det med færre nivåer:

.o-grid__item {

}

Dette er den største fortjeneste av BEM; å senke CSS spesifisitet som forbedrer hele CSS-koding effektivitet og erfaring.

Ett problem jeg ser fremdeles noen ganger selv med BEM er dårlig navn. Hvis du ikke betaler nok oppmerksomhet, kan du ende opp med en veldig lang klasse nam ut:

/* Yikes! */
.o-grid – __-element-søk-knappen-tekst-svg-ikonet {

}

Når du oppretter en klasse navn, gå med kjernen i begrepet BEM: komponent er en blokk og alle elementer inni er individuelt festet til blokken.

Fra vårt eksempel igjen, heter jeg .o-grid__form i stedet for .o-grid – __-element-form, fordi selve skjemaet er en egen komponent og trenger ikke å være bundet med, og være et barn av o-grid__element.

Også, til mer effektiv kontroll stiler, har jeg lagt til en annen klasse navn o-grid__header sammen med o-grid__element for å utvide stiler. Videre knappen inneholder BEM-stil klasser med tilnærming av OOCSS, som vi vil komme inn på neste.

OOCSS

Som vi allerede har diskutert, er det mange flotte CSS metoder og strategier for å hjelpe oss med å forbedre måten vi skriver CSS. Men, jeg ser en masse folk å tvinge seg selv til å bestemme om en metodikk til bruk ut av gjengen.

Fra min erfaring, er å kombinere metoder kan faktisk forbedre sine fordeler ved å kombinere det beste fra flere verdener. For eksempel, jeg personlig har funnet ut at BEM og OOCSS jobber godt sammen.

OOCSS står for Objekt-Orientert CSS og du kan tenke på det å jobbe som Lego-klosser:

Kilde: Flickr

OOCSS skaper hver enkelt del separat, og deretter konstruerer dem sammen for å bygge komponenter.

Fra vårt eksempel, jeg har opprettet knappene OOCSS navnekonvensjon:

  • .c-btn
  • .c-btn–gul
  • .c-btn–blå
  • .c-btn–3d
  • .c-btn–stor

Å gjengi den gule knappen søk i vårt eksempel topptekst -, kombinerer vi disse klassene:

  • .c-btn
  • .c-btn–gul

Hvis vi ønsker å ha 3D-knappen på den viktigste delen, og vi legger til i 3D-klassen .c-btn–3d og kaller det en dag.

Og for den blå knappen i bunntekst, kan vi slå gule modifikator til blå sammen med den store modifier. Som du kan se, knappen er ikke avhengig av toppteksten blokkere noe som gir oss større fleksibilitet med hvordan vi bruker og gjenbruke komponenter. Og ved å gjøre det, kan vi konstruere knappene uten at det påvirker andre komponenter eller mønstre samtidig få fordelen av lett utvide eit presentasjonsproblem nye funksjonen, som alternativ farger og former.

Her eksempel på en knapp samling som er opprettet ved hjelp av OOCSS å opprette varianter:

Se Penn Moderne Knappen Samling av Ryan Yu (@iamryanyu) på CodePen.

På toppen av BEM og OOCSS, med hjelp av ITCSS, kan vi ytterligere forbedre vår CSS-strategi. La oss se på at metoden next (neste).

ITCSS

ITCSS står for Omvendt Trekant CSS , og det bidrar til å organisere CSS ved å bruke en struktur som bestemmer hvordan bestemte å komme med en spesifikk komponent. Lubos Kmetko har skrevet en utmerket oversikt over ITCSS som er verdt å lese.

Du kan se hvordan jeg har satt ITCSS til bruk av splitting stiler opp ved gruppert nivåer av detaljer i dette Hovedpunkt.

Basert på dette eksemplet, kan du se hvordan jeg heter komponenter ved å legge til et navnerom for klassen. Så, for eksempel, en “knapp” komponent er innledes med en “c” (.c-knappen) for å indikere komponent status og hindre at det blir tatt for et annet element. Ved å gjøre dette, alle som jobber på prosjektet vet hvilken funksjon som bestemt klasse, og hvordan endre sine egenskaper kan påvirke andre områder.

Her er en visuell som illustrerer alle ITCSS nivåer:

La oss gå gjennom hver del.

Innstillinger

Innstillingene er vanligvis en samling av variabler som ikke genererer CSS, men brukes til klasser. Noen eksempler er:

  • Base
  • Farge
  • Typografi
  • Animasjon

Verktøy

Verktøy vil heller ikke gi noen CSS ennå, og er vanligvis preprocessor funksjoner som hjelper skrive eller utvide egenskaper på klasser:

  • Funksjoner
  • Plassholdere
  • Mixins
  • Media queries

Leverandører

Leverandører er tredjeparts stiler som er brukt på et prosjekt. Tenk på ting som du tilbakestill.css, normalisere.css, eller til og med Foundation og Bootstrap.

Årsaken til at disse stilene er høyere opp i strukturen, slik at vi kan overstyre dem hvis det trengs. Som du kanskje husker, hvis samme klasse kalles to ganger, cascade vil vise egenskapene for det andre eksempel, forutsatt at egenskapene er nøyaktig den samme:

.btn–stor {
polstring: 3em;
}

/* Dette en vinner ut */
.btn–stor {
polstring: 5em;
}

Bare for side note, i Sass, kan du bruke ~ til å peke til node_modules-mappen slik at du er i stand til å importere stil eiendeler fra kilden i stedet for å flytte det inn dine egne kataloger.

@import ‘~moderne normalisere/moderne-normalisere’;
Objekter

Gjenstander (namespace: o-) er brukt for design patterns, som for eksempel layout, der elementer blir arrangert snarere enn innredet. Objekt-klasser er brukt på tvers av alle sider, så hvis du gjør noen endringer i objektet klasser, du bør være svært forsiktig, fordi noen endringer kommer til å påvirke hver side i hele nettstedet.

Den vanligste objektklasser jeg bruker er:

  • .o-side: de ytre beholder som inneholder vanligvis maks bredde: 100vw og overflow: hidden.
  • .o-viktigste: den ytre beholderen for det viktigste området.
  • .o-container: den ytre beholderen for komponenter og det vanligvis gir en fast bredde.
  • .o-innhold: i tilfelle hvis noen ekstra konfigurering er nødvendig for den faktiske innholdet område.
  • .o-grid: hvis en grid layout med forskjellig antall kolonner er påkrevd.

Bruker du noen andre objekt klasser? Hvis så, kan du dele med meg. 😃

Elementer

Elementer (namespace: e-) er HTML native elementer som vi ikke ville stil basert på klasse navn. For eksempel, vi skal gi standard stiler for å <a> – element, snarere enn .link klasse.

// Gjør dette for standard link stil
en {
text-decoration: none;

og:hover {
background-color: blue;
color: white;
}
}

// Ikke gir standard link stil til en klasse
.link {
text-decoration: none;

og:hover {
background-color: blue;
color: white;
}
}

Det er fordi, spesielt i et CMS som WordPress, ville du ikke ønsker å legge til en klasse hver eneste gang du ønsker å bruke en kobling i innhold. Derfor gir vi et standard stil til <a> – element så uten noen klasse, linken vil fortsatt ha bra utseende stiler.

Komponenter

En komponent (namespace: c-) er en liten funksjon som utgjør en del av nettstedet. Tror knapper, trekkspill, glidere, sperrende dialogbokser, etc. Hver komponent er fullt funksjonell av seg selv og ikke stole på noen andre komponenter. Dette faktum bør vurderes når du navnet på komponenten.

For eksempel, på-knappen på den viktigste delen fra eksemplet ovenfor bør ikke bli kalt .c-main-knappen på grunn viktigste scopes det inne i den viktigste delen, og begrenser bruken av det i andre steder, for eksempel i en sidebar. Noe sånt .c-btn er mye hyggeligere fordi knappen er ikke lenger knyttet til noen andre bestemte deler av siden.

Hvis du trenger noen ekstra funksjoner, du kan alltids utvide egenskaper med en BEM modifier (ved å kombinere krefter!) eller bruk Omfang, som kommer opp i en bit.

Mønstre

Mye av utviklere/ingeniører bruker vilkårene component og mønster synonymt, og det er helt greit hvis du er mer komfortabel med det. Det er bare min preferanse for å skille de to begrepene.

For en generell tommelfingerregel, og jeg tror av et mønster (namespace: p) som en kombinasjon av komponenter, men på en måte som ikke skalerbar.

For eksempel, jeg ville vurdere trekkspill som en komponent. Det er skalerbar og kan brukes på nytt på egen hånd, noe som betyr at det kan brukes i andre deler av nettstedet uten å gjøre noen endringer selv om trekkspill ville inneholde andre komponenter slik som knapper.

På den annen side, overskriften, for eksempel, ville være et mønster fordi det er ikke skalerbar (overskriften kan ikke brukes i innhold eller sideområdet) og inneholder også andre komponenter slik som knapper, trekkspill, menyer, logoer, søk form etc.

Omfang

Vær advart; jeg bare bruke omfang hvis det er absolutt nødvendig. Formålet med omfanget (namespace: s-) er å gi oss den høyest spesifisitet, slik at vi kan overskrive alle stiler for et bestemt formål.

Husk, Hvis du finner deg selv ved hjelp av omfanget klasse mange ganger, du kan skrive stiler som er for spesifikke, og du bør vurdere refactor CSS struktur.

Her er et enkelt eksempel på bruk av omfanget klassen .s-hjem.

.c-trekkspill {
.s-home & {
// Endre bakgrunnsfargen spesielt på hjemmesiden
background-color: tomat;
}
}

Som en side note, i eksemplet ovenfor kan faktisk være refactored ved å gi en modifikator til trekkspill (f.eks .c-trekkspill–bg-tomat) i stedet for å bruke omfang klasse. Det ville være en mye mer utvidbar måte å skrive og gjøre komponenten mer modulbasert.

Ekstra Navneområdet

På toppen av navnerom som vi diskuterte over, det er to mer jeg bruker ofte:

  • er-: dette indikerer tilstanden i blokk eller elementet. Mest brukte klasse er .er aktive, som aktiv link i navigasjon.
  • js-: dette indikerer at det bestemte elementet er bundet til JavaScript-hendelser. For eksempel, js-menyen-klikk angir at elementet er bundet til klikk-hendelsen.

Linting

Til slutt lage regler med .stylelint og .eslint kan forbedre koden kvalitet.

I frontend arbeidsflyt, jeg kan ikke gjøre det som en anbefaling; jeg gjøre det obligatorisk, slik at sviktende av reglene vil ikke bli godkjent.

På denne måten kan vi sikre at koding kvalitet opphold på sitt beste og gi bedre koden til andre utviklere, inkludert din fremtidige selv.

I Aksjon

I denne delen ønsker jeg å diskutere hvordan vi kan bruke SEM og BIO. Jeg har laget en enkel, praktisk eksempel for å få oss i gang:

Se Pennen av iamryanyu (@iamryanyu) på CodePen.

De viktigste praksis med eksempelet er å bygge et trekkspill, som kan brukes som:

  • en vanlig trekkspill, men med forskjellig farge temaer i den viktigste delen
  • en meny i sidefeltet
  • en blokkere visning av sosiale medier ikoner i bunntekst

Det vi ønsker å oppnå er en komponent som er:

  • Skalerbar: som det kan legges i alle deler av siden som er uten koding endringer
  • Extensible: som det kan tjene ulike funksjoner med kjernefunksjonene som er uendret
  • Stabile: som det er organisert på en måte som gir mening

For å oppnå SEM, BIO har blitt brukt blant annet:

  • BEM: .c-trekkspill som en blokk og sine barn som elementer, også brukt modifikatorer, f.eks .c-trekkspill–lys og .c-trekkspill–mørk
  • ITCSS: bestilling/sortering av SASS filer håndterer CSS spesifisitet ganske godt. For eksempel, trekkspill-knappen i sidefeltet inneholder class=”c-trekkspill__trigger p-sidebar-menyen__ – knappen” som mønsteret (p-) overskriver komponent (c-) uten problemer.
  • OOCSS: trekkspill som er bygget med flere klasser, for eksempel class=”c-trekkspill c-trekkspill–mørke c-trekkspill–enkelt” som skaper et mørkt tema med åpning av et enkelt panel bare hver gang.

Avsluttende tanker

Jeg har brukt denne tilnærmingen for nesten alle mine prosjekter, inkludert universiteter, statlige etater, kommersielle forhandlere, og mange andre nettsteder. I hvert fall, jeg har levert alle prosjekter til kunder (nesten ingen saker under klienten godkjenning scenen og levert på tid); denne metoden har fungert for meg veldig godt så langt, og jeg tror det kan for deg også.

Som blir sagt, teknologier alltid endre (spesielt på fronten) og jeg er mer enn glade for å høre og diskutere noen av deres ideer/tilnærminger/strategier som fungerer for deg. Gi meg beskjed i kommentarfeltet!

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men sikkerhet og sikkerhetskopiering, Markdown-støtte, søk nettstedet, kommentar form, sosiale nettverk-tilkoblinger, og mer!