Wat is CSS? Cascading Style Sheets, Responsive CSS, Sassy CSS, Comprimeren, Verkleinen, Unminificeren, Decomprimeren Tool

Wat zijn Cascading Style Sheets (CSS)?

Douglas Karr Donderdag februari 9, 2023

1 104 4 minuten lezen

Lees hieronder voor een volledige uitleg over hoe trapsgewijze stylesheets werken. We geven onze apps bovenaan de pagina weer, zodat deze gemakkelijk te vinden en te gebruiken is. Als je dit artikel leest via e-mail of feed, klik dan door naar comprimeer je CSS.

Tenzij u daadwerkelijk sites ontwikkelt, begrijpt u cascading style sheets mogelijk niet volledig (CSS). CSS is een stylesheet-taal die wordt gebruikt om het uiterlijk en de opmaak van een geschreven document te beschrijven HTML or XML. CSS kan worden gebruikt om de stijlen voor verschillende elementen te specificeren, zoals lettertype, kleur, spatiëring en lay-out. Met CSS kunt u de presentatie van uw HTML-document scheiden van de inhoud, waardoor het eenvoudiger wordt om de visuele stijl van uw website te onderhouden en bij te werken.

CSS-taalstructuur

De keuzeschakelaar is het HTML-element dat u wilt stylen, en de eigendom en waarde definieer de stijlen die u op dat element wilt toepassen:

selector {
  property: value;
}

De volgende CSS maakt bijvoorbeeld all <h1> elementen op een pagina hebben een rode kleur en een lettergrootte van 32px:

CSS

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

uitgang

Titel

U kunt ook CSS specificeren voor een unieke ID op een element:

CSS

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

uitgang

Intro

Of pas een klasse toe op meerdere elementen:

CSS

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

uitgang

ik wil markeren een woord in de span-tag.

U kunt op drie manieren CSS in uw HTML-document opnemen:

Inline CSS, met behulp van de style attribuut op een HTML-element

Interne CSS, met behulp van een <style> element in de <head> van uw HTML-document
Externe CSS, met behulp van een afzonderlijk .css-bestand dat is gekoppeld aan uw HTML-document met behulp van de <link> element in de <head> van uw HTML-document

Responsieve CSS

CSS is ongelooflijk flexibel en kan worden gebruikt om de weergave van elementen aan te passen op basis van de schermresolutie, zodat u dezelfde HTML kunt gebruiken maar deze kunt bouwen responsive naar de apparaatresolutie:

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

CSS-compressie

U kunt in het bovenstaande voorbeeld zien dat er een opmerking, een mediaquery en meerdere stijlen zijn die spaties en regelfeeds gebruiken om de weergave van de CSS te ordenen. Het is een goede gewoonte om uw CSS op uw site te verkleinen of te comprimeren om de bestandsgrootte te verminderen en vervolgens de tijd die nodig is om uw styling aan te vragen en weer te geven. Het is geen klein bedrag... u kunt meer dan 50% besparen op sommige van de bovenstaande voorbeelden.

Veel serverconfiguraties bieden tools die automatisch CSS direct comprimeren en het verkleinde bestand cachen, zodat u dit niet handmatig hoeft te doen.

Wat is SCSS?

Brutale CSS (SCSS) is een CSS-preprocessor die extra functionaliteit en syntaxis toevoegt aan de CSS-taal. Het breidt de mogelijkheden van CSS uit door het gebruik van variabelen, mixins, functies en andere functies toe te staan die niet beschikbaar zijn in standaard CSS.

SCSS-voordelen

Verbeterde onderhoudbaarheid: door het gebruik van variabelen kunt u waarden op één plek opslaan en ze in uw hele stylesheet hergebruiken, waardoor het gemakkelijker wordt om uw stijlen te onderhouden en bij te werken.
Betere organisatie: met mixins kunt u stijlensets groeperen en hergebruiken, waardoor uw stylesheet overzichtelijker en gemakkelijker leesbaar wordt.
Verbeterde functionaliteit: SCSS bevat veel functies die niet beschikbaar zijn in standaard CSS, zoals functies, besturingsstructuren (bijv. if/else) en rekenkundige bewerkingen. Dit zorgt voor een meer dynamische en expressieve styling.
Betere prestaties: SCSS-bestanden worden gecompileerd in CSS, wat de prestaties kan verbeteren door de hoeveelheid code te verminderen die door de browser moet worden geparseerd.

SCSS-nadelen

Leercurve: SCSS heeft een andere syntaxis dan standaard CSS en u moet deze nieuwe syntaxis leren voordat u deze effectief kunt gebruiken.
Extra complexiteit: hoewel SCSS uw stylesheet overzichtelijker en gemakkelijker te onderhouden kan maken, kan het ook extra complexiteit in uw codebase introduceren, vooral als u niet bekend bent met de nieuwe functies en syntaxis.
Tooling: om SCSS te gebruiken, heb je een compiler nodig om je SCSS-code in CSS te vertalen. Dit vereist extra setup en tooling, wat voor sommige ontwikkelaars een toetredingsdrempel kan zijn.

In dit voorbeeld hieronder maakt de SCSS-code gebruik van variabelen om waarden op te slaan ($primary-color en $font-size) die in de hele stylesheet kan worden hergebruikt. De CSS-code die wordt gegenereerd op basis van deze SCSS-code is equivalent, maar bevat niet de variabelen. In plaats daarvan worden de waarden van de variabelen rechtstreeks in de CSS gebruikt.

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

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

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

Een ander kenmerk van SCSS dat in dit voorbeeld wordt gedemonstreerd, zijn geneste stijlen. In de SCSS-code, de h1 stijlen zijn genest binnen de body stijlen, wat niet mogelijk is in standaard CSS. Wanneer de SCSS-code wordt gecompileerd, worden de geneste stijlen in de CSS-code uitgebreid tot afzonderlijke stijlen.

Over het algemeen biedt SCSS veel voordelen ten opzichte van standaard CSS, maar het is belangrijk om rekening te houden met de afwegingen en de juiste tool voor uw project te kiezen op basis van uw behoeften en beperkingen.