Content Marketing

Vad är Cascading Style Sheets (CSS)?

Läs nedan för en fullständig förklaring av hur cascading stylesheets fungerar. Vi visar våra appar högst upp på sidan så att de är lätta att hitta och använda. Om du läser den här artikeln via e-post eller flöde, klicka dig vidare till komprimera din CSS.

Om du inte faktiskt utvecklar webbplatser kanske du inte helt förstår överlappande stilmallar (CSS). CSS är ett formatmallsspråk som används för att beskriva utseendet och formateringen av ett dokument skrivet i html or XML. CSS kan användas för att specificera stilar för olika element som typsnitt, färg, mellanrum och layout. CSS låter dig separera presentationen av ditt HTML-dokument från dess innehåll, vilket gör det lättare att underhålla och uppdatera den visuella stilen på din webbplats.

CSS språkstruktur

Smakämnen väljare är HTML-elementet du vill formatera, och egenskapen och värde definiera de stilar du vill tillämpa på det elementet:

selector {
  property: value;
}

Till exempel kommer följande CSS att göra allt <h1> element på en sida har en röd färg och en teckenstorlek på 32px:

CSS

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

Produktion

Rubrik

Du kan också ange CSS för ett unikt ID på ett element:

CSS

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

Produktion

intro

Eller tillämpa en klass över flera element:

CSS

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

Produktion

Jag vill markera ett ord i span-taggen.

Du kan inkludera CSS i ditt HTML-dokument på tre sätt:

  1. Inline CSS, med hjälp av style attribut på ett HTML-element
  2. Intern CSS, med en <style> element i <head> av ditt HTML-dokument
  3. Extern CSS, med en separat .css-fil länkad till ditt HTML-dokument med hjälp av <link> element i <head> av ditt HTML-dokument

Responsiv CSS

CSS är otroligt flexibel och kan användas för att justera visningen av element baserat på skärmupplösning, så att du kan ha samma HTML men bygga den mottaglig till enhetens upplösning:

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

CSS-kompression

Du kan se i exemplet ovan att det finns en kommentar, en mediefråga och flera stilar som använder mellanslag och radmatningar för att organisera vyn av CSS. Det är en bra praxis att förminska eller komprimera din CSS på din webbplats för att minska filstorlekarna och, därefter, den tid det tar att begära och rendera din stil. Det är inte en liten summa... du kan se över 50 % besparingar på några av exemplen ovan.

Många serverkonfigurationer erbjuder verktyg som automatiskt komprimerar CSS i farten och cachelagrar den minifierade filen så att du inte behöver göra det manuellt.

Vad är SCSS?

Sassy CSS (SCSS) är en CSS-förprocessor som lägger till ytterligare funktionalitet och syntax till CSS-språket. Den utökar funktionerna för CSS genom att tillåta användning av variabler, mixins, funktioner och andra funktioner som inte är tillgängliga i standard CSS.

SCSS-fördelar

  • Förbättrad underhållsbarhet: Med hjälp av variabler kan du lagra värden på ett ställe och återanvända dem i hela din stilmall, vilket gör det lättare att underhålla och uppdatera dina stilar.
  • Bättre organisation: Med mixins kan du gruppera och återanvända uppsättningar av stilar, vilket gör din stilmall mer organiserad och lättare att läsa.
  • Ökad funktionalitet: SCSS innehåller många funktioner som inte är tillgängliga i standard CSS, såsom funktioner, kontrollstrukturer (t.ex. om/annat) och aritmetiska operationer. Detta möjliggör en mer dynamisk och uttrycksfull styling.
  • Bättre prestanda: SCSS-filer kompileras till CSS, vilket kan förbättra prestandan genom att minska mängden kod som behöver tolkas av webbläsaren.

SCSS Nackdelar

  • Inlärningskurva: SCSS har en annan syntax än standard CSS, och du måste lära dig denna nya syntax innan du kan använda den effektivt.
  • Ytterligare komplexitet: Även om SCSS kan göra din stilmall mer organiserad och lättare att underhålla, kan den också introducera ytterligare komplexitet i din kodbas, särskilt om du inte är bekant med de nya funktionerna och syntaxen.
  • Verktyg: För att använda SCSS behöver du en kompilator för att översätta din SCSS-kod till CSS. Detta kräver ytterligare inställningar och verktyg, vilket kan vara ett hinder för inträde för vissa utvecklare.

I det här exemplet nedan använder SCSS-koden variabler för att lagra värden ($primary-color och $font-size) som kan återanvändas i hela stilmallen. CSS-koden som genereras från denna SCSS-kod är likvärdig, men den inkluderar inte variablerna. Istället används variablernas värden direkt i CSS.

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

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

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

En annan funktion hos SCSS som visas i det här exemplet är kapslade stilar. I SCSS-koden är h1 stilar är kapslade i body stilar, vilket inte är möjligt i standard CSS. När SCSS-koden kompileras expanderas de kapslade stilarna till separata stilar i CSS-koden.

Sammantaget ger SCSS många fördelar jämfört med standard CSS, men det är viktigt att överväga avvägningarna och välja rätt verktyg för ditt projekt baserat på dina behov och begränsningar.

Douglas Karr

Douglas Karr är CMO för Öppna INSIGHTS och grundaren av Martech Zone. Douglas har hjälpt dussintals framgångsrika MarTech-startups, har hjälpt till med due diligence på över $5 miljarder i Martech-förvärv och investeringar, och fortsätter att hjälpa företag att implementera och automatisera sina försäljnings- och marknadsföringsstrategier. Douglas är en internationellt erkänd digital transformations- och MarTech-expert och talare. Douglas är också en publicerad författare till en Dummies guide och en bok om företagsledarskap.

Relaterade artiklar

Tillbaka till toppen knappen
Stänga

Adblock upptäckt

Martech Zone kan ge dig detta innehåll utan kostnad eftersom vi tjänar pengar på vår webbplats genom annonsintäkter, affiliate-länkar och sponsring. Vi skulle uppskatta om du tar bort din annonsblockerare när du tittar på vår webbplats.