Co je CSS? Kaskádové styly, responzivní CSS, Sassy CSS, Komprimovat, Minifikovat, Unminify, Uncompress Tool

Co jsou kaskádové styly (CSS)?

Douglas Karr Čtvrtek, únor 9, 2023

1 104 Počet minut 4

Níže si přečtěte úplné vysvětlení toho, jak kaskádové styly fungují. Naše aplikace zobrazujeme v horní části stránky, aby bylo snadné je najít a používat. Pokud čtete tento článek prostřednictvím e-mailu nebo zdroje, klikněte na něj komprimovat svůj CSS.

Pokud weby skutečně nevyvíjíte, možná nebudete plně rozumět kaskádovým stylům (CSS). CSS je jazyk stylů používaný k popisu vzhledu a formátování dokumentu napsaného HTML or XML. CSS lze použít k určení stylů pro různé prvky, jako je písmo, barva, mezery a rozvržení. CSS vám umožňuje oddělit prezentaci vašeho HTML dokumentu od jeho obsahu, což usnadňuje údržbu a aktualizaci vizuálního stylu vašeho webu.

Struktura jazyka CSS

Projekt volič je prvek HTML, který chcete upravit, a majetek a hodnota definujte styly, které chcete na tento prvek použít:

selector {
  property: value;
}

Například následující CSS udělá vše <h1> prvky na stránce mají červenou barvu a velikost písma 32 pixelů:

CSS

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

Výstup

Záhlaví

Můžete také zadat CSS pro jedinečné ID prvku:

CSS

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

Výstup

Úvodní znělka

Nebo aplikujte třídu na více prvků:

CSS

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

Výstup

Chci zvýraznit slovo ve značce span.

CSS můžete do dokumentu HTML zahrnout třemi způsoby:

Inline CSS pomocí style atribut na element HTML

Interní CSS pomocí a <style> prvek v <head> vašeho HTML dokumentu
Externí CSS pomocí samostatného souboru .css propojeného s vaším HTML dokumentem pomocí <link> prvek v <head> vašeho HTML dokumentu

Reagovat na CSS

CSS je neuvěřitelně flexibilní a lze jej použít k úpravě zobrazení prvků na základě rozlišení obrazovky, takže můžete mít stejný HTML, ale vytvořit jej citlivý na rozlišení zařízení:

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

Komprese CSS

Ve výše uvedeném příkladu můžete vidět, že existuje komentář, mediální dotaz a několik stylů, které k uspořádání zobrazení CSS používají mezery a odřádkování. Skvělou praxí je minifikovat nebo komprimovat CSS na vašem webu, aby se zmenšila velikost souborů a následně i čas potřebný k vyžádání a vykreslení vašeho stylu. Není to málo… na některých výše uvedených příkladech můžete vidět více než 50% úsporu.

Mnoho konfigurací serverů nabízí nástroje, které automaticky za běhu komprimují CSS a ukládají miniifikovaný soubor do mezipaměti, takže to nemusíte dělat ručně.

Co je SCSS?

Sassy CSS (SCSS) je preprocesor CSS, který do jazyka CSS přidává další funkce a syntaxi. Rozšiřuje možnosti CSS tím, že umožňuje použití proměnných, mixinů, funkcí a dalších funkcí, které nejsou dostupné ve standardním CSS.

Výhody SCSS

Vylepšená udržovatelnost: Pomocí proměnných můžete ukládat hodnoty na jedno místo a znovu je používat v celé šabloně stylů, což usnadňuje údržbu a aktualizaci stylů.
Lepší organizace: Pomocí mixinů můžete seskupovat a znovu používat sady stylů, díky čemuž bude vaše šablona stylů přehlednější a snáze čitelná.
Rozšířená funkčnost: SCSS obsahuje mnoho funkcí, které nejsou dostupné ve standardním CSS, jako jsou funkce, řídicí struktury (např. if/else) a aritmetické operace. To umožňuje dynamičtější a výraznější styling.
Lepší výkon: Soubory SCSS jsou kompilovány do CSS, což může zlepšit výkon snížením množství kódu, který musí prohlížeč analyzovat.

Nevýhody SCSS

Křivka učení: SCSS má jinou syntaxi než standardní CSS a než ji budete moci efektivně používat, musíte se tuto novou syntaxi naučit.
Další složitost: Přestože SCSS může vaši šablonu stylů lépe zorganizovat a snáze udržovat, může také vnést další složitost do vaší kódové základny, zvláště pokud nejste obeznámeni s novými funkcemi a syntaxí.
Nástroje: Chcete-li používat SCSS, budete potřebovat kompilátor, který přeloží váš SCSS kód do CSS. To vyžaduje další nastavení a nástroje, což může být pro některé vývojáře překážkou vstupu.

V tomto příkladu níže používá kód SCSS k ukládání hodnot proměnné ($primary-color a $font-size), které lze znovu použít v celé šabloně stylů. Kód CSS, který je vygenerován z tohoto kódu SCSS, je ekvivalentní, ale nezahrnuje proměnné. Místo toho se hodnoty proměnných používají přímo v CSS.

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

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

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

Další funkcí SCSS, která je demonstrována v tomto příkladu, jsou vnořené styly. V kódu SCSS je h1 styly jsou vnořeny do body stylů, což ve standardním CSS není možné. Při kompilaci kódu SCSS se vnořené styly v kódu CSS rozbalí na samostatné styly.

Celkově SCSS poskytuje mnoho výhod oproti standardnímu CSS, ale je důležité zvážit kompromisy a vybrat ten správný nástroj pro váš projekt na základě vašich potřeb a omezení.