Forstå CSS Writing Methodologies

I dette innlegget skal vi se hva CSS skrivemetoder er, noen velkjente metoder, og hvordan de kan være nyttige for oss i å optimalisere vår CSS-kode. La oss starte med det enkleste spørsmålet for å få ballen til å rulle. Hva er en metodikk?

En metodikk er et system av metoder. Tenk på en metode som bare en måte å gjøre noe på systematisk måte, på en bestemt forhåndsinnstilt måte å gjøre ting for å oppnå det resultatet vi ønsker.

For å få bedre resultater, Vi forbedrer våre metoder ved å planlegge dem bedre, endre ordren, forenkle trinnene - hva som helst som fungerer raskere og er mer effektiv.

CSS Metodikk

La oss nå snakke om CSS-metodikk. På samme måte som med alt i livet, har vi en metode for å skrive CSS også: noen skriver tilbakestille CSS først, noen layoutformater sist, noen begynner med to til tre klasser for styling av et element, noen skriver alle CSS-kodene i en enkelt fil.

Våre foretrukne metoder er enten etablert på egen hånd over tid eller påvirket av andre eller påkrevd i vår arbeidsplass eller på grunn av alt ovenfor. Men over tid har CSS veteraner formulert metoder for å skrive CSS det er mer fleksibel, definert, gjenbrukbar, forståelig og overkommelig.

Vi skal se på disse formulerte metodene, som vil omfatte:

1. OOCSS (Objektorientert CSS)
2. BEM (blokk, element, modifier)
3. ACSS (Atomic CSS)
4. SMACSS (skalerbar og modulær arkitektur for CSS)

Merk: Ingen av konseptene nevnt nedenfor bør forveksles med noen rammeverk, bibliotek eller verktøy som kan ha samme navn og konsept som disse metodene. Dette innlegget handler bare om metodene for å skrive CSS.

1. OOCSS

Utviklet av Nicole Sullivan i 2008, inneholder hovedkonseptene til OOCSS (Object Oriented CSS) CSS gjenstand identifisering, separasjon av struktur og visuelle stiler, og unngå stedbaserte stiler.

I OOCSS er det første skrittet Nicole foreslår at vi gjør identifiser objekter i CSS.

“I utgangspunktet er et CSS "objekt" et repeterende visuelt mønster, som kan abstraheres til en uavhengig kutt av HTML, CSS og muligens JavaScript. Det objektet kan da gjenbrukes gjennom et nettsted. - Nicole Sullivan, Github (OOCSS)“

Ta for eksempel denne strukturen fra dette nettstedet. Her er noe som er et repeterende visuelt mønster og har sin egen uavhengige HTML og / eller CSS:

Vi har her to typer objekter, en større forhåndsvisning av titler som vi vil nevne post-preview-primær og et sidebar med titler som vi vil nevne post-forhåndsvisning-sekundær.

Vi må separat struktur og hud (dvs. stiler som lager objektets utseende). De to typer objekter har forskjellige strukturer, en er i en større boks, selv om de ser like ut, med bilder til venstre og titler til høyre.

La oss gi bildene av begge objektene en klasse post-preview-bilde og legg til koden som legger bildet til venstre. Dette hindrer oss fra å gjenta koden for hvor å sette bildet i objekter i CSS. Hvis det er andre lignende gjenstander, bruker vi oss igjen post-preview-bilde for dem.

Hudseparasjon kan også gjøres for enklere stiler som grenser eller bakgrunner. Hvis du har flere objekter med samme blå ramme, oppretter en egen klasse for den blå grensen og legger det til objekter vil redusere antall ganger de blå grensene må kodes i CSS.

Nicole foreslår også å ikke legg til stiler basert på plassering, for eksempel, i stedet for å målrette alle koblingene i en bestemt div for å markere, gi disse linkene a highlighter klasse med de riktige CSS-stilene. På denne måten når du trenger å markere en kobling i en annen del av siden, kan du gjenbruke høylyseklassen.

Pros av OOCSS: Gjenbrukbare visuelle styling koder, plassering fleksible koder, reduksjon i dype nestede selektorer.

Ulemper av OOCSS: Uten en god del gjentagende visuelle mønstre virker adskilte strukturer og visuelle stilkoder unødvendige.

2. BEM

Utviklet av utviklere på Yandex i 2009, omfatter nøkkelbegrepene for BEM (Blokk, Element, Modifier) ​​å identifisere blokkere, element & modifier og navngi dem tilsvarende.

EN “blokkere” er i det vesentlige det samme som en “gjenstand”(fra eksempelet før), en “element” refererer til komponentene i blokken (bilde, tittel, forhåndsvisningstekst i ovenstående forhåndsvis post- objekter). EN “modifier” kan brukes når tilstanden til en blokk eller et element endres, for eksempel når du legger til en aktiv klasse i et menyelement for å markere det, fungerer den aktive klassen som modifikator.

Når du har identifisert komponentene, navngi dem tilsvarende. For eksempel:

• en menyblokk vil ha klassen Meny
• elementene vil ha klassen menu__item (blokk og element er adskilt med dobbel underskrift)
• Modifikatoren for deaktivert tilstand på menyen kan ha klassen menu_disabled (modifikator avgrenset av et enkelt understreke)
• Modifikator for deaktivert tilstand av et menyelement kan være menu__item_disabled.

For modifikatorer kan vi også bruke key_value format for navngivning. For eksempel å skille mellom menyelementer som knytter til foreldede artikler, kan vi gi dem klassen menu__item_status_obsolete, og for styling av menyelementer som peker på ventende dokumenter, kan klassenavnet være menu__item_status_pending.

Navngivningen kan endres til det som fungerer for deg. Tanken er å kunne identifisere, blokkere, elementer og modifikatorer fra klassenavnene. Sjekk ut noen av navngivningssystemet som er oppført på BEM-siden.

BEMs nettsted lister også hvordan blokk, element og modifiserer segregering også kan bringes inn i CSS-filsystemet. Blokkene som “knapper” og “innganger” kan ha egne mapper som består av filene (.css, .js) som er knyttet til disse blokkene, noe som gjør det enklere når vi vil importere disse blokkene i andre prosjekter.

Fordeler med BEM:Enkel å bruke klassenavn og reduksjon i dype CSS-valg.

Ulemper med BEM:For å holde navnene sane-looking, anbefaler BEM at vi holder blokkering til elementet nesting grunt.

3. ACSS

Gjort kjent av Yahoo, et sted nær slutten av den første tiår av 21^st århundre består ACSSs hovedbegreper av å lage klasser for det mest atomiske nivået av styling, dvs. et eiendomsverdi-par, og deretter bruke dem i HTML etter behov.

Det er vanskelig å bestemme når ACSS (Atomic CSS) ble først utviklet siden konseptet har vært i bruk en stund nå. Utviklere har brukt klasser som .clearfix overflow: hidden i lang tid. Ideen i ACSS er å ha en klasse for stort sett alle gjenbrukbare ikke-innholdsrelaterte eiendomsverdi-par vi trenger på vår side, og å legge til disse klassene når det trengs for HTML-elementene.

Nedenfor er et eksempel på klasser basert på ACSS og hvordan de brukes i HTML.

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

Som du kan se, vil antall klasser bli høye med denne metoden, og HTML-en vil bli overfylt av alle disse klassene. Denne metoden er ikke 100% effektiv, men kan gjøres nyttig hvis ønsket. Yahoo bruker dette til tross alt.

Pros av ACSS:Styling HTML uten å forlate HTML.

Ulemper med ACSS:For mange klasser, ikke veldig ryddig, og du kan hate det.

4. SMACSS

Utviklet i 2011 av Jonathan Snook SMACSS (skalerbar og modulær arkitektur for CSS) fungerer ved å identifisere de 5 forskjellige typene stilregler. Klassenavn og arkiveringssystem er opprettet basert på disse.

“SMACSS er en måte å undersøke designprosessen på og som en måte å tilpasse de stive rammeverkene til en fleksibel tankeprosess. - Jonathan Snook”

SMACSS identifiserer 5 typer stilregler nemlig base, layout, modul, state, og tema.

• Basestiler er standardstilene rettet mot de grunnleggende HTML-kodene som

  , .

• Layout-stiler er stiler som brukes til å definere sideoppsettet, for eksempel koding der topptekst-, bunntekst- og sidemenyene vil gå.
• Modul stiler er spesifikke for en modul som galleri eller lysbildefremvisning.
• Statestiler er for å fremheve elementer med foranderlige stater som skjult eller deaktivert.
• Tema brukes til å endre den visuelle ordningen på siden.

De forskjellige stilreglene kan identifiseres ved hjelp av et prefiks i klassenavnet, for eksempel l-header (for layout) eller t-header (for tema). Vi kan også organisere disse ulike reglene ved å plassere dem i separate filer og mapper.

Pros av SMACSS:Bedre organisert kode.

Ulemper med SMACSS: Ingen jeg kan tenke på.

Det er en gratis online-bok du kan lese om SMACSS, eller du kan kjøpe sin ebook-versjon for å studere den mer.

Konklusjon

De ovennevnte CSS metodene vil gi deg et system til Administrer og optimaliser CSS-kodene dine. De kan kombineres, som OOCSS-SMACSS, eller OOCSS-BEM, eller BEM-SAMCSS som passer dine behov.

Det finnes også rammer og biblioteker hvis du vil ha et automatisert system for å utføre CSS-metodologier som:

• OOCSS rammeverk
• BEM verktøy
• Organisk CSS-rammeverk (følger atomkoncept).