Zašto biste trebali prestati pisati CSS u "CSS"

CSS uzorak koda

CSS je zabavno pisati, ali brzo se može zakomplicirati. Tipičan primjer je da se pomaknete prema gore kako biste provjerili heksadecimalne vrijednosti boja koje koristite.

Utipkavanje klase ili id-a nekoliko puta u jednu CSS datoteku ili kopiranje i lijepljenje prefiksa podrške svakog preglednika u vaš kôd za kompatibilnost između preglednika može otežati održavanje CSS datoteke.

// kompatibilnost s unakrsnim preglednikom
-webkit-transformacija: $ svojstvo
-ms-transform: $ svojstvo
pretvaranje: $ svojstvo
zaslon: -ms-flexbox;
prikaz: fleksibilnost;
-ms-flex-wrap: zamotati;
flex-wrap: omotati;

Sljedeći put kad želite pisati CSS, pokušajte uopće ne „pisati“ u CSS-u.

Umjesto toga, pokušajte koristiti CSS Preprocessors.

Što su predprocesori?

Prema MDN-u, CSS pretprocesor je program koji vam omogućuje generiranje CSS-a iz jedinstvene sintakse predprocesora. U njih upišete svoj CSS kôd, a zatim generirate odgovarajuću CSS datoteku kako biste oblikovali svoj HTML.

Neki od popularnih predprocesora koji se koriste uključuju SASS / SCSS, LESS, Stylus i PostCSS. Koristim SASS, tako da su moje ilustracije u ovom članku u SASS-u.

Iako predprocesori imaju svoju sintaksu, lako ih je nadoknaditi, samo nekoliko razlika od pisanja CSS-a vanilije.

6 razloga zbog kojih biste trebali prestati pisati CSS u „CSS“

Sintaksa predprocesora daje prostor za neke dodatne funkcionalnosti koje pružaju sljedeće:

1. Varijable

Preprocesori koriste varijable za pohranu vrijednosti za višekratnu uporabu. U varijablu možete pohraniti bilo koju vrstu stylinga. To mogu biti boja, obitelj fontova ili čak vrijednosti za oblaganje, marginu, širinu ili visinu.

Kada definirate varijablu, vrijednost nema potrebe pamtiti. Podsjetite varijablu kad god vam treba pohranjena vrijednost.

// varijable
$ my_font: Helvetica, sans-serif
$ moja boja: # 333

tijelo
  font: 100% $ moj-font
  boja: $ my-color

2. gniježđenje

HTML pišemo umetanjem djece / djece u roditeljske elemente poput ul, li i elementa u nav. Kada koristite predprocesore, ne morate svaki put pisati nadređeni CSS selektor (nav oznaka u ovom slučaju).

Pređite na sljedeći redak i utipkajte podređeni element kao što je prikazano u nastavku:

// navigacijska traka
nav
  ul
    marža: 0
    padding: 0
    list-style: nijedan

  li
    zaslon: linijski blok

  
    prikaz: blok
    padding: 6px 12px
    uređenje teksta: nijedno

Ul, li i selektori su ugniježđeni unutar navigatora.

Neki programeri vjeruju da ovo dolazi u CSS. Ali hej, još nije ovdje, ne boli se naviknuti se prije njegovog dolaska u CSS. :)

3. Uvoz

Proprocesori poboljšavaju postojeći uvoz CSS-a.

import omogućuje vam da podijelite CSS na manje datoteke za čitljivost i održivost. Ona uzima datoteku koju uvozite i dodaje je datoteci u koju uvozite.

// _reset.sass

html, body, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote
    marža: 0;
    padding: 0;
    granica: 0;
    veličina slova: 100%;
    font: naslijediti;
    okomito poravnavanje: osnovna crta;

Možete uvesti datoteku reseta.sass kao što je prikazano u nastavku:

// glavni.sass

@import resetiraj

tijelo
  font: 100% Helvetica, sans-serif
  boja pozadine: #efefef

To znači da možete imati datoteku main.sass, a zatim druge poput reset.sass, header.sass, footer.sass ili varijable.sass. Ostale datoteke uvezete u main.sass koristeći sintaksu uvoza prethodnika.

Uvezena datoteka dodaje se na kraj datoteke main.sass (datoteka u koju ste uveli).

4. produžiti

produži pohranjivanje stajlinga ili serije stajlinga u klasu. Djeluje kao varijabla. Koristi klasu rezerviranog mjesta (%) da bi rekao kompajleru da ne ispisuje klasu ako nije produžen.

Kad se klasa proširi na element, tada element nasljeđuje sva svojstva stila spremljena u klasi rezervi rezervi. Po potrebi još uvijek možete dodati jedinstveni stil.

// Ovaj CSS će se ispisati jer je% shared-shared produljen.
// "%" ilustrira klasu rezerviranog mjesta
% Poruke Zajednički
  obrub: 1px kruta #ccc
  padding: 10px
  boja: # 333


// Ovaj CSS neće se ispisati jer se nikada ne povećava% jednaka visina.
% jednakih visina
  zaslon: fleks
  flex-wrap: zamotati
// To se proširuje bez dodavanja drugih stilova

.poruka
  @extend% poruka podijeljena
// Oni se protežu dodatnim stiliranjem (zelena, crvena, žuta)

.uspjeh
  @extend% poruka podijeljena
  boja obruba: zelena


.error
  @extend% poruka podijeljena
  boja obruba: crvena


.upozorenje
  @extend% poruka podijeljena
  boja obruba: žuta

To štedi vrijeme i održava vaš CSS čistim.

5. Aritmetičke operacije

Preprocesori vam omogućuju pokretanje aritmetičkih operacija u vašem CSS-u. Podržava standardne matematičke operatore poput +, -, *, / i%.

// Aritmetičke operacije
.container
  širina: 100%


članak [Uloga = „glavni”]
  pluta: lijevo
  širina: 600px / 960px * 100%

6. Minifikacija

Minification smanjuje veličinu vaše datoteke kako bi se ubrzalo vrijeme učitavanja. Iz vašeg koda uklanja bijele prostore i nepotrebne znakove (u ovom slučaju CSS).

Preprocesori vam omogućuju generiranje komprimirane verzije CSS-a. Znam da postoji nekoliko drugih načina da se to generira, ali hej, i ovo je u redu. :)

Zaključak

Upotreba terminala tijekom sastavljanja glavni je nedostatak korištenja predprocesora. Međutim, postoje i drugi načini sastavljanja, poput korištenja CodeKit, Compass.app i GhostLab. Sada postoje neki dodaci za uređivanje (poput Live Sass Compilera na Visual Studio Code) koji će vam pomoći i u tome.

Isprobajte bilo koji predprocesor po vašem izboru. Kladim se da više nikada nećete pisati CSS u „CSS“. Ako koristite predprocesore, podijelite svoje iskustvo u komentarima.

Mir van i sretno kodiranje!