CSS Organisation/Struktur

Question

Ich habe daran gearbeitet, den besten Weg zu finden, CSS-Code zu organisieren, besonders auf größeren Sites. Ich bin weniger an Schreibstil interessiert und daran, wie Menschen ihren Code strukturieren und verwalten.

Ich habe diese Struktur verfolgt, die ich Werke recht gut für Wartbarkeit fühlen, aber ich wollte Ihre Meinung zu diesem Thema erhalten und andere Methoden hören:

/*======================================= 
1. =reset 
=======================================*/ 
/** 
Anything but * reset 
**/ 

/*======================================= 
2. =base 
=======================================*/ 
/** 
Base rules so naked HTML has basic style and displays consistently x-browser 
**/ 

/*======================================= 
3. =base forms 
=======================================*/ 
/** 
Base form framework 
**/ 

/*======================================= 
4. =base site 
=======================================*/ 
/** 
Rules common across the majority of pages 
e.g. header, footer, main columns, navigation, search bar etc. 
**/ 

/*======================================= 
5. =recurring styles 
=======================================*/ 
/** 
Re-useable snippets -- not to include positioning/structure etc. 
e.g. buttons, icons etc. 
**/ 

/*======================================= 
6. =recurring modules 
=======================================*/ 
/** 
Re-usable modules common to multiple pages/views but not majority 
e.g. a product carousel could be on the homepage as well as the product page and maybe even the checkout page etc. 
**/ 

/*======================================= 
7. =homepage 
=======================================*/ 
/** 
contains rules only applicable to homepage 
**/ 

/*======================================= 
8. =about page 
=======================================*/ 
/** 
contains rules only applicable to about page 
**/ 

/*======================================= 
9. =contact page 
=======================================*/ 
/** 
contains rules only applicable to contact page 
**/ 

...and so on 

Irgendwelche Gedanken sehr geschätzt werden würde.

Reiche

Answer 1

die Divisionen Sie gut aussehen angegeben haben - ich würde vorschlagen, dass jeder Abschnitt in einer eigenen Datei reset.css base.css forms.css halten - Sie können ganz einfach die Dateien kombinieren bei der Verwendung von http://developer.yahoo.com/yui/compressor/ bereitstellen. Hilft, die CSS bei der Entwicklung etwas kleiner zu halten.

Answer 2

Ich benutze SASS und organisieren alles mit Dateien (eine Datei könnte dann in einer anderen enthalten sein). Es macht Sinn, weil ich immer weiß, wo ich nach einer bestimmten Sache suchen muss, und die Leute werden nicht verwirrt, wenn sie durch eine lange einzelne CSS-Datei browsen. So diszipliniert es andere Leute, keine "zerbrochenen Fenster" zu hinterlassen.

Answer 3

Ich konfrontiert das gleiche Problem. Ich suche im Internet, ohne eine definitive Antwort zu finden.

Ich legte meine gemeinsame CSS-Datei ähnlich wie Ihre CSS-Layout. Ich lege dann die seitenspezifische Seite css in ihre eigenen Dateien. Warum die common.css mit seitenspezifischen CSS überladen? Viele Leute Artikel/Beiträge waren besorgt, dass zu viele Dateien die Website wegen offener Browserverbindungen verlangsamen würde. Während ich erkenne, dass dies ein Problem sein könnte, werde ich es ansprechen, wenn es eins wird. Wie in einer der anderen Antworten erwähnt, kann ich das CSS bei der Bereitstellung immer zusammenführen und komprimieren.

Answer 4

Mein aktuelles Projekt ist eine große SAAS-Anwendung, die eine Tonne CSS zu bewältigen hat. Ich ziehe es vor, meine in einer Datei zu behalten, nicht nur für die Geschwindigkeit der Belastung, sondern auch um die Anzahl der Male zu reduzieren, die ich während der Bearbeitung herumspringen muss. Außerdem muss ich mich nicht mit YUIs Macken auseinandersetzen. Mein vorheriger Arbeitgeber standardisierte auf YUI und wir haben es ausgiebig benutzt ... es funktioniert, aber es kann in der Eile sehr klobig werden.

Strukturell, breche ich meinen Code nur ein bisschen mehr. Ich beginne mit Hauptdeklarationen wie */body/html/H1/P usw. Dann mache ich einen Abschnitt für kopfspezifischen Inhalt. Folgen Sie dem mit einem allgemeinen Hauptteil, mit Unterabschnitten für jede Seite, die spezifischen Inhalt haben können. Ich schließe mit einem Footer-spezifischen Abschnitt. Ich finde, wenn ich es logisch strukturiere, wie die Seite gebaut wird, habe ich wenigstens eine Idee, wo ich suchen soll - Header oben, Fußzeile unten usw. Und ich kann von Code zu lokalem Test gehen, um in zu implementieren zwei Tastenanschläge.

Vorsicht vor Minification auf CSS. Sicher, es funktioniert. Aber im Falle meines letzten Vertrags arbeiteten wir an Websites, die sich in einigen Fällen fast täglich veränderten, und eine Geschäftsanalyse ergab, dass wir mehr Ressourcen des Unternehmens verbrennen würden, die uns davon abhalten würden, einfache, saubere CSS zu erstellen . Solange es Caching ist und Sie nicht mehrere CSS-Dateien laden, sind Sie gut. In der Situation dieses Jobs erhielt eine bestimmte Seite 1 Million Unikate pro Tag, und die Geschäftsgruppe war gut darin, sie unkomprimiert zu halten, trotz einer potenziellen Ersparnis von 5 gb pro Tag bei einer Verbesserung von 5k durch die Verkleinerung. Bandbreite ist billiger als UI-Ingenieure, ich denke ....

Answer 5

Mein Grundformat ist ein Block Kommentar an der Spitze und Tauchen in großen Regionen mit Header-Kommentare (ähnlich wie bei Ihnen).

/* 
* Title of the site 
* Author 
* Date created 
* Last updated 
* 
* 1-2 line description of what the style sheet is for. 
* 
*/ 


/* Reset (probably imported) 
-------------------------------------------------------------------------------- */ 
... 


/* A Framework (probably imported) 
-------------------------------------------------------------------------------- */ 
I like YUI Grids 


/* Global 
-------------------------------------------------------------------------------- */ 
Styles for basic elements like: body, h1-h6, p, ul, li, ..., and often a wrapper. 


/* Header 
-------------------------------------------------------------------------------- */ 
Any styles specifically for the header block (this is usually short) 


/* Body 
-------------------------------------------------------------------------------- */ 
Basic layout for the main body block 


/* Footer 
-------------------------------------------------------------------------------- */ 
Similar to header 


/* Utility Classes 
-------------------------------------------------------------------------------- */ 
Things like 
.align-center { text-align: center; }; 
.hide { display: none !important; } 
... 


/* Specific Pages 
-------------------------------------------------------------------------------- */ 
Those are my usual subsections (separated by 2 line breaks). Beyond that, short 
rules that only apply to a certain page or subset of pages will get a section like 
this. 

Noch ein paar Tipps:.

einrücken Nachkommen von bestimmten Unter *

div#left-col { ... } 

    * html #left-col { ... } 

    #left-col p { ... } 

    #left-col ul { ... } 

     * html #left-col ul { ... } 

     #left-col li { ... } 

* Aber keep rules efficient mit der Anzahl der Nachkommen in einem Selektor enthalten. Normalerweise würde ich schreiben:

div#left-col li span { font-weight: bold; } 

statt:

div#left-col ul li a span { font-weight: bold; } 

Denken Sie daran, dass diese Veränderung ist genau das, was die Regel wählt, aber so lange, wie es für Ihre Seiten funktioniert und wartbar, es ist OK .

Alphabetische Eigenschaften.

body { 
    color: #ccc; 
    font-family: Helvetica, Arial, sans-serif; 
    padding: 2em; 
    -webkit-something: some value; 
} 

Collapse kurze Regeln 1 Zeile (wenn es nicht Wartbarkeit tut nicht weh).

div#left { float: left; margin-top: 30px; width: 300px; }