CSS Academy · Lektion

Filorganisation: ITCSS och 7-1-mönstret

Strukturera CSS-filer med mönstret Inverted Triangle eller 7-1 för skalbara projekt.

Lektion 3 av 413 steg

Filorganisation: ITCSS och 7-1-mönstret är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.

Varför organisera CSS-filer?

När projekt växer blir en enda CSS-fil svår att hantera. Filorganisering hjälper team att dela upp CSS i logiska lager som läses in i rätt ordning och är enkla att hitta i.

ITCSS: Inverterad CSS-triangel

ITCSS organiserar CSS i lager ordnade efter ökande specificitet. Precis som en inverterad triangel finns de bredaste (mest generiska) reglerna överst och de mest specifika längst ned. Detta följer den naturliga kaskaden.

ITCSS-lager

ITCSS sju lager (från mest till minst generiska):

Settings – variabler och designtokens
Tools – mixins och funktioner
Generic – reset/normalisering
Elements – grundformat för HTML-element
Objects – layoutabstraktioner (inga visuella egenskaper)
Components – komponenter i användargränssnittet
Utilities – åsidosättningar och hjälpklasser, !important tillåts här

ITCSS-filstruktur

En typisk ITCSS-filstruktur:

  <pre class="file-tree">src/styles/
  01-settings/
    _colors.scss
    _typography.scss
    _spacing.scss
  02-tools/
    _mixins.scss
  03-generic/
    _reset.scss
  04-elements/
    _headings.scss
    _links.scss
  05-objects/
    _container.scss
    _media.scss
  06-components/
    _button.scss
    _card.scss
  07-utilities/
    _text-align.scss
    _display.scss</pre>

7-1-mönstret

7-1-mönstret organiserar Sass i sju mappar och en huvudfil som importerar allt:

abstracts/ – variabler, funktioner och mixins
base/ – reset, typografi och grundelement
components/ – knappar, kort och modaler
layout/ – sidhuvud, sidfot, sidofält och rutnät
pages/ – sidspecifika format
themes/ – flera teman
vendors/ – CSS från tredjepart

Huvudfil

En huvudfil, main.scss, importerar alla delvisa stilmallar i rätt ordning:

  <pre class="file-tree">@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'base/reset';
@use 'base/typography';
@use 'components/button';
@use 'components/card';
@use 'layout/header';</pre>

CSS-lager (@layer) för organisering

Moderna CSS @layer ger samma fördelar med kaskadordning som ITCSS utan en förprocessor. Lager deklareras en gång och deras prioritet är fast, oavsett källkodens ordning.

  <div class="card text-primary">Layered card text</div>

Colocation kontra centralisering

Ett alternativ till centraliserade formatfiler är att colocate komponentens CSS bredvid komponentfilen. Detta är vanligt i React/Vue-projekt som använder CSS Modules eller CSS-in-JS.

Namngivning av Sass-delvisa stilmallar

Delvisa Sass-filer börjar med ett understreck (_button.scss). Understrecket signalerar till Sass att filen inte kompileras självständigt – den måste importeras i en huvudfil.

PostCSS som alternativ

Om du inte använder Sass kan PostCSS med tillägget @import, eller inbyggd CSS @import med @layer, ge samma filorganisering utan en förprocessor.

CSS-filer för komponenter

Oavsett om du använder ITCSS, 7-1 eller samplacerade filer bör varje komponent ha en egen fil. Namnge filen efter komponenten som den formaterar: _card.scss, button.css, Nav.module.css.

Snabb kontroll

I ITCSS, vilket lager ligger allra högst upp i den inverterade triangeln (bredast/minst specifikt)?

Besvara frågan i den interaktiva lektionen

Sammanfattning

ITCSS ordnar CSS-lager från generiska till specifika enligt kaskaden. 7-1-mönstret organiserar Sass i sju mappar som importeras via en huvudfil. Moderna CSS @layer ger samma kaskadkontroll direkt i språket. Oavsett om filerna är centraliserade eller samplacerade är grundprincipen en fil per komponent och konsekvent ordnade importer.

Gratis att börja

Lär dig CSS med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Filorganisation: ITCSS och 7-1-mönstret” gratis?

Ja – hela texten till ”Filorganisation: ITCSS och 7-1-mönstret” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Filorganisation: ITCSS och 7-1-mönstret”?

Strukturera CSS-filer med mönstret Inverted Triangle eller 7-1 för skalbara projekt. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig CSS Academy?

Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Filorganisation: ITCSS och 7-1-mönstret”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här CSS Academy-lektionen?

Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Varför CSS-arkitektur är viktig
BEM: namngivning av block, element och modifierare
Filorganisation: ITCSS och 7-1-mönstret
Undvik specificitetskonflikter

← Tillbaka till CSS Academy