Forstå CSS Writing Methodologies

I dette innlegget skal vi se hvilke CSS-skrivemetoder som er, noen velkjente metoder, og hvordan de kan være nyttige for oss når vi optimaliserer 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 forbedrer vi våre metoder ved å planlegge dem bedre, endre ordren, forenkle trinnene - hva som helst som fungerer raskere og mer effektivt .

CSS metodikk

La oss nå snakke om CSS-metodikk. Akkurat som med omtrent alt i livet, har vi en metode for å skrive CSS også: noen skriver tilbakestilt CSS først, noen layoutformater sist, noen begynner med to til tre klasser for styling av et element, noen skriver alle CSS-koder 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 som er mer fleksible, definerte, gjenbrukbare, forståelige og håndterbare .

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 nøkkelbegrepene til OOCSS (Objektorientert CSS) CSS- objektidentifikasjon, separasjon av struktur og visuelle stiler, og unngår stedbaserte stiler.

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

"I utgangspunktet er et CSS" -objekt et repeterende visuelt mønster, som kan abstraheres til en uavhengig utgave 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-primary og et sidebar med titler som vi vil nevne post-preview-secondary .

Vi må skille strukturen og huden (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 til begge objektene et bilde post-preview-image og legge til koden som legger bildet til venstre. Dette hindrer oss fra å gjenta koden for hvor å sette bildet inne i objekter i CSS. Hvis det er andre liknende objekter, bruker vi dem igjen post-preview-image .

Hudseparasjon kan også gjøres for enklere stiler som grenser eller bakgrunner . Hvis du har flere objekter med den samme blå grensen, kan du lage et eget kurs for den blå grensen og legge den til objekter, og redusere antall ganger de blå grensene må kode i CSS.

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

Fordeler med OOCSS : Gjenbrukbare visuelle stylingskoder, plassering fleksible koder, reduksjon i dype nestede selektorer.

Ulemper med 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 (Block, Element, Modifier) ​​å identifisere blokk, element og modifier og navngi dem tilsvarende.

En "blokk" er i det vesentlige den samme som et "objekt" (fra eksempelet før), en "element" refererer til komponentene i blokken (bilde, tittel, forhåndsvisningstekst i de preview-post- nevnt ovenfor). 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 klassemenyen
• elementene vil ha klassemenyen__item (blokk og element er adskilt med dobbel underskrift)
• Modifikatoren for deaktivert tilstand på menyen kan ha klassemenyen_disabled (modifikator avgrenset av et enkelt understreke)
• Modifikator for deaktivert tilstand for 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 klassemenyen__item_status_obsolete, og for å utforme menyelementer som peker på ventende dokumenter, kan menu__item_status_pending 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 . Ta en titt på noen av navngivningssystemet som er oppført på BEM-siden.

BEMs nettsted viser også hvordan blokk, element og modifiserer segregering også kan hentes 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-selektorer.

Ulemper med BEM: For å holde navnene sane utseende, anbefaler BEM at vi holder blokkering til elementet som ligger grunt.

3. ACSS

Gjort kjent av Yahoo, et sted nær slutten av den første årtusen av det 21. århundre består ACSSs hovedbegrep 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 å avgjøre 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 som vi trenger på nettstedet vårt, 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øy 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 i det hele tatt.

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) virker ved å identifisere de 5 forskjellige typestilreglene. 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 rammene til en fleksibel tankeprosess. - Jonathan Snook "

SMACSS identifiserer 5 typer stilregler, nemlig basis, layout, modul, tilstand og tema .

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

  , .

• Layout-stiler er stiler som brukes til å definere sideoppsettet, for eksempel koding hvor topptekst, bunntekst og sidemenyer 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.
• Temaet brukes til å endre sidenes visuelle plan.

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

Ovennevnte CSS-metodologier vil gi deg et system for å administrere og optimalisere CSS-koder . 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).