Mappstruktur

HTML

CSS

I takt med att projektet växer blir det allt mer viktigt att man redan från början använt en mappstruktur i vilken man enkelt kan hitta det man söker och därigenom snabba upp både utvecklingen och underhållet av koden. Speciellt viktigt är det med CSS-koden vilken snabbt blir lång, stor och oläslig.

Det finns många varianter på hur man kan tänka när man strukturerar upp sina filer. Här ska jag visa upp en som utgår ifrån en ganska grundläggande website.

Först och främst är det viktigt att ge sina filer rätt namn - alltså bör de heta vad de gör eller innehåller.

Se följande exempel:

• stylesheet.css
  länkar ihop css-filerna
• base/
  mapp för grundinställningar
  • reset.css
    nollställer webbläsaren
  • typography.css
    grundläggande typsnitt
  • color.css
    grundläggande färger
• components/
  mapp för komponenter
  • buttons.css
    knappar
  • navigation.css
    navigering
  • gallery.css
    t ex bildkarusell
• layout/
  mapp för layout
  • header.css
    design för header
  • grid.css
    grid
  • sidebar.css
    t ex meny
• pages/
  mapp för sidor
  • home.css
    home
  • about.css
    about
  • contact.css
    contact
• themes/
  mapp för tema
  • theme.css
    tema
  • admin.css
    tema för admin-sidor
• utils/
  mapp för funktioner
  • functions.css
    ex på funktion
• vendors/
  mapp för tredjepartsscript
  • bootstrap.css
    bootstrap
  • jquery-ui.css
    jquery-ui

Den största vinsten får man såklart på en stor sajt men det är inte så dumt att alltid lägga upp sina sidor på detta vis; då kan man lätt hitta koden man behöver ändra.

Läs mer:

Det mesta av idéerna här kommer från: