Forstå CSS Writing Methodologies

I dette indlæg vil vi se hvad CSS skrive metoder er, nogle velkendte metoder, og hvordan de kan være nyttige for os i at optimere vores CSS-kode. Lad os starte med det enkleste spørgsmål at få bolden til at rulle. Hvad er en metode?

En metode er et system af metoder. Tænk på en metode som blot en måde at gøre noget systematisk på, på en bestemt forudindstillet måde at gøre ting for at opnå det resultat, vi ønsker.

For at få bedre resultater, Vi forbedrer vores metoder ved at planlægge dem bedre, ændre ordren, forenkle trin - uanset hvad der virker hurtigere og er mere effektiv.

CSS Metodologi

Lad os nu tale om CSS-metodologi. Ligesom med næsten alt i livet, har vi også en metode til at skrive CSS: nogle skriver reset CSS først, nogle layout layout styles sidst, nogle starter med to til tre klasser til styling et element, nogle skriver alle CSS koderne i en enkelt fil.

Vores foretrukne metoder er enten etableret på egen hånd over tid eller påvirket af andre eller kræves på vores arbejdsplads eller på grund af alt ovenfor. Men over tid har CSS veteraner formuleret metoder til at skrive CSS det er mere fleksibel, defineret, genanvendelig, forståelig og håndterbar.

Vi skal se på disse formulerede metoder, som vil omfatte:

1. OOCSS (Objektorienteret CSS)
2. BEM (Blok, Element, Modifier)
3. ACSS (Atomic CSS)
4. SMACSS (skalerbar og modulær arkitektur til CSS)

Bemærk: Ingen af ​​de nedenstående begreber bør forveksles med nogen ramme, bibliotek eller værktøj, der kan have samme navn og koncept som disse metoder. Dette indlæg handler kun om metoderne til at skrive CSS.

1. OOCSS

Udviklet af Nicole Sullivan i 2008, omfatter nøglebegreberne for OOCSS (Object Oriented CSS) CSS objekt identifikation, adskillelse af struktur og visuelle stilarter og undgå placering baseret stilarter.

I OOCSS er det første skridt, Nicole foreslår, at vi gør identificere objekter i CSS.

“I grund og grund er et CSS "objekt" et gentagende visuelt mønster, som kan abstraheres til en uafhængig udgave af HTML, CSS og muligvis JavaScript. Det objekt kan derefter genanvendes gennem et websted. - Nicole Sullivan, Github (OOCSS)“

Tag for eksempel denne struktur fra dette websted. Her er noget, der er et gentagende visuelt mønster og har sin egen uafhængige HTML og / eller CSS:

Vi har her to typer objekter, et større eksempel på titler, som vi vil navngive post-billede-primær og et sidebar med titler, som vi vil navngive post-forhåndsvisningskvalitet sekundær.

Vi er nødt til separat struktur og hud (dvs. stilarter der skaber objekternes udseende). De to typer objekter har forskellige strukturer, en er i en større boks, selvom de ligner hinanden, med billeder til venstre og titler til højre.

Lad os give billederne af begge objekter en klasse post-forhåndsvisning-billede og tilføj den kode, der lægger billedet til venstre. Dette forhindrer os i at gentage koden for hvor at sætte billedet inde i objekter i CSS. Hvis der er andre lignende genstande, genanvendes vi post-forhåndsvisning-billede for dem.

Hud adskillelse kan også gøres for enklere stilarter som grænser eller baggrunde. Hvis du har flere objekter med samme blå grænse, Oprettelse af en separat klasse for den blå grænse og tilføje det til objekter vil reducere antallet af gange de blå grænser skal kodes i CSS.

Nicole foreslår også at ikke Tilføj stilarter baseret på placering, for eksempel i stedet for at målrette alle links inde i en bestemt div for at fremhæve, giv disse links a highlighter klasse med de relevante CSS-stilarter. På denne måde, når du skal markere et link i en anden del af siden, kan du genbruge highlighter-klassen.

Fordele ved OOCSS: Genanvendelige visuelle styling koder, placering fleksible koder, reduktion i dybt indlejrede selektorer.

Ulemper af OOCSS: Uden en hel del gentagne visuelle mønstre forekommer adskillelsesstruktur og visuelle stilkoder unødvendige.

2. BEM

Udviklet af udviklere hos Yandex i 2009 omfatter nøglebegreberne for BEM (Block, Element, Modifier) ​​identifikation blok, element & modifier og navngive dem i overensstemmelse hermed.

EN “blok” er stort set den samme som en “objekt”(fra eksemplet før), en “element” henviser til komponenterne i blokken (billede, titel, eksempeltekst i ovenstående forhåndsvisning-indlæg- objekter). EN “modifier” kan bruges, når tilstanden af ​​en blok eller et element ændrer sig, for eksempel når du tilføjer en aktiv klasse til et menupunkt for at markere det, fungerer den aktive klasse som din modifikator.

Når du har identificeret komponenterne, navngive dem i overensstemmelse hermed. For eksempel:

• en menu blok vil have klassen menu
• dets varer vil have klassen menu__item (blok og element adskilles med dobbelt understregning)
• Modifikatoren til deaktiveret tilstand i menuen kan have klassen menu_disabled (modifikator afgrænset af en enkelt understregning)
• Modifikator for deaktiveret tilstand for et menupunkt kan være menu__item_disabled.

Til modifikatorer kan vi også bruge key_value format til navngivning. For at skelne mellem menupunkter, der linker til forældede artikler, kan vi give dem klassen menu__item_status_obsolete, og til styling af menupunkter, der peger på ventende dokumenter, kan klassenavnet være menu__item_status_pending.

Navngivningen kan ændres til hvad der virker for dig. Ideen er at kunne identificere, blokere, elementer og modifikatorer fra klassenavne. Tjek nogle af navngivningssystemet, der er opført på BEM-webstedet.

BEMs websted lister også på hvordan blok-, element- og modifikationssegregationen også kan bringes ind i CSS-filsystemet. Blokken er ligesom “knapper” og “indgange” kan have deres egne mapper, der består af de filer (.css, .js), der er knyttet til disse blokke, hvilket gør tingene nemmere, når vi vil importere disse blokke i andre projekter.

Fordele ved BEM:Nem at bruge klassenavne og reduktion i dybe CSS-selektorer.

Ulemper ved BEM:For at holde navne sane udseende, anbefaler BEM, at vi holder blokerer for at elementere nedadgående.

3. ACSS

Lavet berømt af Yahoo, et sted nær slutningen af ​​den første årti af 21^st århundrede består ACSS 'nøglebegreber i at skabe klasser for det mest atomære niveau af styling, dvs. et ejendomsværdipar og derefter bruge dem i HTML efter behov.

Det er svært at afgøre, hvornår ACSS (Atomic CSS) blev udviklet først siden konceptet har været i brug i et stykke tid nu. Udviklere har brugt klasser som .clearfix overløb: skjult i lang tid. Ideen i ACSS er at har en klasse til stort set alle genanvendelige ikke-indholdsrelaterede ejendomsværdipar vi har brug for på vores hjemmeside, og at tilføje disse klasser, når det er nødvendigt for HTML-elementerne.

Nedenfor er et eksempel på klasser baseret på ACSS og hvordan de bruges i HTML.

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

Som du kan se, vil antallet af klasser blive højt med denne metode, og HTML'en bliver overfyldt af alle disse klasser. Denne metode er ikke 100% effektiv, men kan gøres nyttig, hvis det ønskes. Yahoo bruger det hele.

Fordele ved ACSS:Styling HTML uden at forlade HTML.

Ulemper med ACSS:For mange klasser, ikke meget pæne og du kan hader det.

4. SMACSS

Udviklet i 2011 af Jonathan Snook SMACSS (skalerbar og modulær arkitektur til CSS) virker ved at identificere de 5 forskellige typer stilregler. Klassenavne og arkiveringssystem er oprettet ud fra disse.

“SMACSS er en måde at undersøge din designproces og som en måde at tilpasse de stive rammer til en fleksibel tankeproces. - Jonathan Snook”

SMACSS identificerer 5 typer stilregler nemlig base, layout, modul, tilstand, og tema.

• Basisstile er standardformaterne rettet mod de grundlæggende HTML-tags som

  , .

• Layout-stilarter er stilarter, der bruges til at definere layoutet på siden, som kodning, hvor overskrift, sidefod og sidemenuer vil gå.
• Modulstilstande er specifikke for et modul som galleri eller diasshow.
• Statsformater er til at fremhæve elementer med foranderlige stater som skjult eller deaktiveret.
• Tema bruges til at ændre den visuelle ordning på siden.

De forskellige stilregler kan identificeres ved hjælp af et præfiks i klassenavnet f.eks. L-header (for layout) eller t-header (for tema). Vi kan også organisere disse forskellige typer regler ved at placere dem i separate filer og mapper.

Fordele af SMACSS:Bedre organiseret kode.

Ulemper ved SMACSS: Ingen jeg kan tænke på.

Der er en gratis online bog, du kan læse om SMACSS, eller du kan købe sin ebook-version for at studere det mere.

Konklusion

Ovennævnte CSS-metoder vil give dig et system til Administrer og optimer dine CSS-koder. De kan kombineres sammen, som OOCSS-SMACSS, eller OOCSS-BEM, eller BEM-SAMCSS, der passer til dine behov.

Der er også rammer og biblioteker, hvis du vil have et automatiseret system til udførelse af CSS-metoder som:

• OOCSS ramme
• BEM værktøjer
• Organisk CSS-ramme (følger atomkoncept).