Šta je CSS? Kaskadni listovi stilova, responzivni CSS, drski CSS, alat za komprimiranje, minimiziranje, deminificiranje, dekomprimiranje

Šta su kaskadni listovi stilova (CSS)?

Douglas Karr Četvrtak, Februar 9, 2023

1 109 Čitanje 4 minuta

Pročitajte u nastavku za potpuno objašnjenje kako funkcionišu kaskadni listovi stilova. Naše aplikacije prikazujemo na vrhu stranice tako da ih je lako pronaći i koristiti. Ako čitate ovaj članak putem e-pošte ili feeda, kliknite do komprimirati svoj CSS.

Osim ako zapravo ne razvijate web lokacije, možda nećete u potpunosti razumjeti kaskadne tablice stilova (CSS). CSS je stilski jezik koji se koristi za opisivanje izgleda i formatiranja dokumenta u kojem je napisan HTML or XML. CSS se može koristiti za određivanje stilova za različite elemente kao što su font, boja, razmak i izgled. CSS vam omogućava da odvojite prezentaciju vašeg HTML dokumenta od njegovog sadržaja, što olakšava održavanje i ažuriranje vizualnog stila vaše web stranice.

CSS jezička struktura

The selektor je HTML element koji želite stilizirati i imovina i vrijednost definirajte stilove koje želite primijeniti na taj element:

selector {
  property: value;
}

Na primjer, sljedeći CSS će učiniti sve <h1> elementi na stranici imaju crvenu boju i veličinu fonta 32px:

CSS

h1 {
  color: red;
  font-size: 32px;
}

izlaz

naslov

Također možete odrediti CSS za jedinstveni ID na elementu:

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

izlaz

Intro

Ili primijeniti klasu na više elemenata:

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

izlaz

zelim vrhunac riječ u oznaci span.

Možete uključiti CSS u svoj HTML dokument na tri načina:

Inline CSS, koristeći style atribut na HTML elementu

Interni CSS, koristeći a <style> element u <head> vašeg HTML dokumenta
Eksterni CSS, koristeći zasebnu .css datoteku povezanu sa vašim HTML dokumentom pomoću <link> element u <head> vašeg HTML dokumenta

Responsive CSS

CSS je nevjerovatno fleksibilan i može se koristiti za podešavanje prikaza elemenata na osnovu rezolucije ekrana, tako da možete imati isti HTML, ali ga izgraditi odziv na rezoluciju uređaja:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

CSS kompresija

U gornjem primjeru možete vidjeti da postoji komentar, medijski upit i više stilova koji koriste razmake i redove za organiziranje prikaza CSS-a. Odlična je praksa minimizirati ili komprimirati svoj CSS na vašoj web-lokaciji kako biste smanjili veličinu datoteka i, posljedično, vrijeme potrebno da se zatraži i prikaže vaš stil. To nije mali iznos... možete vidjeti preko 50% uštede na nekim od gore navedenih primjera.

Mnoge konfiguracije servera nude alate koji će automatski komprimirati CSS u hodu i keširati minimizirani fajl tako da ne morate to raditi ručno.

Šta je SCSS?

Sassy CSS (SCSS) je CSS predprocesor koji CSS jeziku dodaje dodatnu funkcionalnost i sintaksu. On proširuje mogućnosti CSS-a dozvoljavajući upotrebu varijabli, miksa, funkcija i drugih funkcija koje nisu dostupne u standardnom CSS-u.

Prednosti SCSS-a

Poboljšana mogućnost održavanja: Uz korištenje varijabli, možete pohraniti vrijednosti na jedno mjesto i ponovo ih koristiti u cijeloj tablici stilova, što olakšava održavanje i ažuriranje stilova.
Bolja organizacija: Sa miksinama možete grupirati i ponovo koristiti skupove stilova, čineći vašu tablicu stilova organizovanijom i lakšom za čitanje.
Povećana funkcionalnost: SCSS uključuje mnoge funkcije koje nisu dostupne u standardnom CSS-u, kao što su funkcije, kontrolne strukture (npr. if/else) i aritmetičke operacije. Ovo omogućava dinamičniji i izražajniji stil.
Bolje performanse: SCSS datoteke se kompajliraju u CSS, što može poboljšati performanse smanjenjem količine koda koji pretraživač treba da analizira.

SCSS nedostaci

Krivulja učenja: SCSS ima drugačiju sintaksu od standardnog CSS-a i moraćete da naučite ovu novu sintaksu da biste je mogli efikasno koristiti.
Dodatna složenost: Iako SCSS može učiniti vašu tablicu stilova organiziranijom i lakšom za održavanje, on također može unijeti dodatnu složenost u vašu bazu koda, posebno ako niste upoznati s novim funkcijama i sintaksom.
Alati: Da biste koristili SCSS, trebat će vam kompajler da prevede vaš SCSS kod u CSS. Ovo zahtijeva dodatno podešavanje i alate, što može biti prepreka ulasku za neke programere.

U ovom primjeru ispod, SCSS kod koristi varijable za pohranjivanje vrijednosti ($primary-color i $font-size) koji se može ponovo koristiti u listi stilova. CSS kod koji se generiše iz ovog SCSS koda je ekvivalentan, ali ne uključuje varijable. Umjesto toga, vrijednosti varijabli se koriste direktno u CSS-u.

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

Još jedna karakteristika SCSS-a koja je demonstrirana u ovom primjeru su ugniježđeni stilovi. U SCSS kodu, h1 stilovi su ugniježđeni unutar body stilova, što nije moguće u standardnom CSS-u. Kada se SCSS kod kompajlira, ugniježđeni stilovi se proširuju u zasebne stilove u CSS kodu.

Sve u svemu, SCSS pruža mnoge prednosti u odnosu na standardni CSS, ali je važno uzeti u obzir kompromise i odabrati pravi alat za vaš projekat na osnovu vaših potreba i ograničenja.