Den omvendte trekantarkitektur: hvordan man styrer store CSS-projekter

Du får en lille opgave for at løse nogle små stylingproblemer her og der. Du har fundet de korrekte CSS-regler til at anvende rettelsen, så du hurtigt dropper disse regler i bunden af ​​din CSS-fil, skubber dine ændringer og fortsætter derefter med vigtigere ting.

Over tid sker dette et par gange, og inden du ved af det, består "bunden" af din CSS-fil af et par hundrede linjer kode, som ingen forstår, og ingen tør at fjerne, da det uundgåeligt vil ødelægge ting.

Kender du dette scenarie, fordi du enten har gjort det selv, eller du har set kolleger gøre dette? Nå, læs videre og lov dig selv, at du aldrig vil gøre dette igen, for her er en nemmere måde at administrere dine CSS-filer på.

Introduktion til den omvendte trekantarkitektur

Den omvendte trekantarkitektur, også kendt som ITCSS, er en metode til at strukturere din CSS på den mest effektive og mindst spildende måde.

ITCSS blev først introduceret af Harry Roberts og kan bedst visualiseres af en op og ned lagdelt trekant. ITCSS definerer et projekts delte CSS-regler på en logisk og fornuftig måde, samtidig med at det giver et solidt niveau af indkapsling og afkobling af det, der forhindrer ikke-delte CSS-regler i at forstyrre hinanden.

ITCSS er meget fleksibel, da det ikke tvinger dig til at bruge specifikke navngivningskonventionmetoder som SMACCS, OOCSS eller BEM.

Principperne

ITCSS fungerer ved at strukturere hele dit CSS-projekt i henhold til disse 3 principper:

  1. Generisk til eksplicit

    Vi starter med de mest generiske, low-level, catch-all-stilarter. Dette kan være skrifttypeindstillinger eller for eksempel farvevariabler, hvis du bruger SCSS.

  2. Lav til høj specificitet

    De laveste specificitetsvælgere vises i starten af ​​dit projekt. Specificiteten stiger støt. På denne måde undgår vi specificitetskonflikter og tilsidesættelse af specificitet ved hjælp af !important.

  3. Vidtrækkende til lokaliseret

    Vælgerne i starten af ​​vores projekt påvirker mange DOM-elementer, f.eks. Din browser nulstil stilarter, mens vælgerne senere i vores projekt bliver meget lokaliserede, for eksempel specifikke stilarter for en komponent.

Trekantlagene

At holde sig til ovenstående principper betyder, at vi er nødt til at opdele vores CSS i lag. Hvert lag skal introduceres på et sted, der overholder hvert af kriterierne.

Det sker ofte, at CSS er grupperet efter for eksempel typografiske stilarter, formstilarter og typografier for en bestemt komponent. Disse grupper importeres ofte ikke i den mest effektive rækkefølge, og dette skaber nogle arve- eller specificitetsproblemer.

I ITCSS er hvert lag en logisk progression fra det sidste. Det øges i specificitet, indsnævres i rækkevidde og bliver mere eksplicit. Dette betyder, at vores CSS er lettere at skalere, da vi kun tilføjer det, der allerede er der, og ikke tilsidesætter det, der tidligere var skrevet.

En anden stor fordel ved at følge denne struktur er, at alle altid ved, hvor de skal finde visse CSS-regler, da de er logisk placeret. Dette undgår spørgsmålet om, at folk slipper deres CSS-regler i bunden af ​​filen.

Harry Roberts, skaberen af ​​ITCSS, lagde syv lag. Han beordrede dem som følger:

  1. Indstillinger

    Hvis du bruger en forprocessor som SCSS, er dette dit udgangspunkt. I dette lag definerer du dine variabler.

  2. Værktøjer

    Dette lag kan bruges til dit værktøj. Tænk på mixins og funktioner, der skal være tilgængelige globalt. Hvis de ikke behøver at være, skal du bare placere dem i laget, hvor de er nødvendige.

  3. Generisk

    I dette lag huser vi alle de meget høje og vidtgående stilarter. Dette lag er ofte det samme på tværs af alle dine projekter, da det indeholder ting som Normalize.css, CSS-nulstillinger og for eksempel regler for boksstørrelse.

  4. Elementer

    I dette lag lægger vi typografier til bare, ikke-klassificerede HTML-elementer. Du kan for eksempel tænke på understregninger til ankre på svæve eller skriftstørrelser til de forskellige overskrifter.

  5. Objekter

    I objektlaget styler vi de første elementer, der har klasser. Tænk på dine containere, indpakninger eller rækker. Du kan også definere dit gitter her.

  6. Komponenter

    Komponentlaget er det sted, hvor det meste af stylingmagien sker, da du styler dine UI-elementer her. I komponentbaserede rammer som Angular, Vue eller React er dette laget, hvor du importerer din styling til hver komponent, hvis du ikke inkluderer dem direkte i din komponent.

  7. Trumps

    Trumflaget er det beskidte lag. Selv efter at du har struktureret din styling i henhold til ITCSS-principperne, kan det ske, at du !importantf.eks. Skal bruge til at tilsidesætte nogle tredjeparts styling. Gør det i dette lag, da dette er det mest specifikke, lokale og eksplicitte lag.

Slutresultatet

Nu hvor jeg har forklaret lagene, er det tid til at se på, hvordan et simpelt slutresultat potentielt kunne se ud.

// [email protected] "globals";@import "branding";
// [email protected] "mixins";
// [email protected] "normalize";
// [email protected] "fonts";@import "form";
// [email protected] "grid";@import "wrappers";
// [email protected] "header";@import "sidebar";@import "carousel";@import "card";
// [email protected] "overrides";

Konklusion

Ligesom ITCSS ikke tvinger dig til at bruge en bestemt navngivningskonvention, tvinger det dig ikke til at bruge alle lag. Brug en lagstruktur, der fungerer bedst for dig, mens du opretholder ITCSS-principperne for generisk til eksplicit, lav til høj specificitet og vidtrækkende til lokaliseret.

Hvis du bemærker, at du skal tilsidesætte stilarter, betyder det næsten altid, at din struktur er ineffektiv. Hvis du har lyst til at lære mere om dette, anbefaler jeg at se denne video:

Leder du efter et job i Amsterdam?

Jeg arbejder for Sytac som Senior front-end-udvikler, og vi leder efter middel- / seniorudviklere, der specialiserer sig i Angular, React, Java eller Scala. Sytac er et ambitiøst konsulentfirma i Holland, der arbejder for mange kendte virksomheder inden for bank-, flyselskabs-, regerings- og detailsektoren.

Hvis du tror, ​​du har det, der kræves for at arbejde sammen med de bedste, så send mig en e-mail på luuk [dot] gruijs [at] sytac [dot] io, og jeg fortæller dig gerne mere.