Hvorfor du skulle stoppe med at skrive CSS i “CSS”

En CSS-kodeeksempel

CSS er sjovt at skrive, men det kan hurtigt blive kompliceret. Et typisk eksempel er at skulle rulle opad for at kontrollere de hexadecimale værdier for de farver, du bruger.

At skrive en klasse- eller id-valg flere gange i en enkelt CSS-fil, eller at skulle kopiere og indsætte hver browsers supportpræfik til din kode hver gang for tværbrowser-kompatibilitet kan gøre din CSS-fil sværere at vedligeholde.

// cross-browser kompatibilitet
-webkit-transformation: $ ejendom
-ms-transform: $ ejendom
transform: $ ejendom
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

Næste gang du vil skrive CSS, prøv ikke at "skrive" i CSS overhovedet.

Prøv i stedet at bruge CSS-forprocessorer.

Hvad er forprocessorer?

Ifølge MDN er en CSS-forarbejdning et program, der giver dig mulighed for at generere CSS fra forbehandlerens egen unikke syntaks. Du skriver din CSS-kode i dem og genererer derefter en tilsvarende CSS-fil for at style din HTML.

Nogle af de populære forarbejdere, der skal bruges, inkluderer SASS / SCSS, LESS, Stylus og PostCSS. Jeg bruger SASS, så mine illustrationer i denne artikel er i SASS.

Selvom forbehandlere har deres egen syntaks, er de ret nemme at indhente, bare nogle få forskelle fra at skrive vanilje CSS.

6 grunde til, at du bør STOPPE Skrivning af CSS i “CSS”

Forprocessorers syntaks giver plads til nogle yderligere funktionaliteter, der leverer følgende:

1. Variabler

Forprocessorer bruger variabler til at gemme genanvendelige værdier. Du kan gemme enhver form for styling i en variabel. Det kan være farve, fontfamilie eller endda værdier for din polstring, margin, bredde eller højde.

Når du definerer variablen, er der ikke behov for at huske værdien. Husk variablen, når du har brug for den gemte værdi.

// variabler
$ my_font: Helvetica, sans-serif
$ min-farve: # 333

legeme
  font: 100% $ my-font
  farve: $ min-farve

2. Indlejring

Vi skriver HTML ved at indlejre barn / børn i overordnede elementer som ul, li og et element i en nav. Når du bruger forbehandlere, behøver du ikke at udskrive den overordnede CSS-valg (nav-tag i dette tilfælde) hver gang.

Gå til næste linje, og skriv underordnede elementer som vist nedenfor:

// navigations bar
nav
  ul
    margin: 0
    polstring: 0
    listestil: ingen

  li
    display: inline-block

  -en
    display: blok
    polstring: 6px 12px
    tekstdekoration: ingen

Ul, li og en vælger er indlejret inde i nav-vælgeren.

Nogle udviklere mener, at dette kommer til CSS. Men hey, det er ikke her endnu, det gør ikke ondt at vænne sig til det, før det ankommer til CSS. :)

3. Import

Forprocessorer forbedrer CSS's eksisterende import.

Med import kan du opdele din CSS i mindre filer for læsbarhed og vedligeholdelighed. Det tager den fil, du importerer, og tilføjer den til den fil, du importerer til.

// _reset.sass

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote
    margen: 0;
    polstring: 0;
    grænse: 0;
    skriftstørrelse: 100%;
    font: arve;
    lodret linje: baseline;

Du kan importere reset.sass-filen som vist nedenfor:

// main.sass

@import nulstilles

legeme
  font: 100% Helvetica, sans-serif
  baggrundsfarve: #efefef

Dette betyder, at du kan have main.sass-filen, så andre kan lide reset.sass, header.sass, footer.sass eller variables.sass. Du importerer andre filer til main.sass ved hjælp af forbehandlerens import-syntaks.

Den importerede fil føjes derefter til slutningen af ​​main.sass-filen (den fil, du importerede til).

4. Forlæng

udvide gemmer en styling eller serie af styling i en klasse. Det fungerer som en variabel. Den bruger en pladsholderklasse (%) til at bede kompilatoren om ikke at udskrive klassen, medmindre den udvides.

Når klassen udvides til et element, arver elementet alle de stylingegenskaber, der er gemt i pladsholderklassen. Du kan stadig tilføje unik styling om nødvendigt.

// Denne CSS udskrives, fordi% meddelelsesdelet udvides.
// "%" illustrerer pladsholderklassen
% Besked-delt
  kant: 1 stk. solid #ccc
  polstring: 10px
  farve: # 333


// Denne CSS udskrives ikke, fordi% lige højder aldrig udvides.
% for lige højder
  display: flex
  flex-wrap: wrap
// Dette strækker sig uden at tilføje nogen anden styling

.besked
  @extend% meddelelsesdelet
// Disse strækker sig med yderligere styling (grøn, rød, gul)

.succes
  @extend% meddelelsesdelet
  kantfarve: grøn


.fejl
  @extend% meddelelsesdelet
  kantfarve: rød


.advarsel
  @extend% meddelelsesdelet
  kantfarve: gul

Dette sparer tid og holder din CSS ren.

5. Aritmetiske operationer

Forprocessorer giver dig mulighed for at køre aritmetiske operationer i din CSS. Det understøtter matematiske standardoperatører som +, -, *, / og%.

// Aritmetiske operationer
.beholder
  bredde: 100%


artiklen [role = "main"]
  float: venstre
  bredde: 600px / 960px * 100%

6. Minifikation

Minificering reducerer din filstørrelse for at fremskynde indlæsningstid. Det fjerner hvide mellemrum og unødvendige tegn fra din kode (CSS i dette tilfælde).

Forprocessorer giver dig mulighed for at generere en komprimeret version af din CSS. Jeg ved, at der er flere andre måder at generere dette på, men hey, det er også cool. :)

Konklusion

At skulle bruge terminalen, når man kompilerer, er den største ulempe ved brug af forbehandlere. Der er dog andre måder at komponere på, f.eks. Anvendelse af CodeKit, Compass.app og GhostLab. Der er nu nogle in-editor plugins (som Live Sass Compiler på Visual Studio Code) til at hjælpe med dette også.

Prøv en hvilken som helst forbehandler efter eget valg. Jeg vedder på, at du ikke nogensinde vil skrive CSS i "CSS" mere. Hvis du har brugt forbehandlere, skal du dele din oplevelse i kommentarer.

Fred ud og lykkelig kodning!