Organisation/structure CSS

Question

J'ai travaillé sur la recherche de la meilleure façon d'organiser le code CSS, en particulier sur les sites plus importants. Je m'intéresse moins au style et plus à la façon dont les gens structurent et gèrent leur code.

J'ai suivi cette structure que je me sens fonctionne plutôt bien pour maintenabilité mais je voulais connaître votre opinion à ce sujet et entendre d'autres méthodes:

/*======================================= 
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 

Toute pensée serait très appréciée.

Rich

Answer 1

les divisions que vous avez spécifié bon coup d'oeil - je vous suggère de garder chaque section dans son propre fichier reset.css base.css forms.css - vous pouvez facilement combiner les fichiers lors du déploiement à l'aide http://developer.yahoo.com/yui/compressor/. Aide à garder le CSS un peu plus petit lors du développement.

Answer 2

J'utilise SASS et j'organise tout ce qui utilise des fichiers (un fichier peut alors être inclus dans un autre). C'est logique, parce que je sais toujours où chercher une chose spécifique et que les gens ne se perdent pas dans un long fichier css. Ainsi, il discipline d'autres personnes à ne laisser aucune «fenêtre brisée».

Answer 3

J'ai fait face au même problème. Je recherche sur le web sans trouver de réponse définitive.

J'ai fini par disposer mon fichier CSS commun similaire à votre mise en page CSS. Je mets alors la page css de page spécifique dans leurs propres dossiers. Pourquoi encombrer le common.css, avec css spécifique à la page. De nombreux articles/publications de personnes étaient préoccupés par le fait qu'un trop grand nombre de fichiers ralentirait le site en raison des connexions ouvertes du navigateur. Même si je reconnais que cela pourrait être un problème, je le traiterai quand il le deviendra. Comme indiqué dans l'une des autres réponses, je peux toujours fusionner et compresser le CSS au déploiement.

Answer 4

Mon projet actuel est une grande application SAAS qui a une tonne de css à traiter. Je préfère garder le mien dans un fichier, non seulement pour la vitesse de chargement, mais aussi pour minimiser le nombre de fois où je dois sauter quand je suis en train d'éditer ... plus, pas besoin de faire face aux caprices de YUI. Mon précédent employeur a standardisé YUI et nous l'avons largement utilisé ... ça fonctionne, mais ça peut devenir vraiment maladroit. Du point de vue de la structure, je casse un peu plus mon code. Je commence par les déclarations principales telles que */body/html/H1/P etc. Ensuite, je fais une section pour le contenu spécifique à la tête. Suivez cela avec une section générale du corps, avec des sous-sections pour chaque page qui pourrait avoir un contenu spécifique. Je ferme avec une section spécifique de pied de page. Je trouve que si je structure de façon logique comme la page est construite, au moins j'ai une idée où regarder - entête en haut, pied en bas, etc. Et, je peux passer du code au test local pour déployer en deux frappes.

Méfiez-vous de la minification sur CSS. Bien sûr, ça fonctionne. Mais dans le cas de mon dernier contrat, nous travaillions sur des sites qui changeaient presque tous les jours dans certains cas et une analyse commerciale révélait que nous allions réduire les ressources de l'entreprise en les minimisant et en les réduisant au minimum. . Tant que c'est la mise en cache et que vous ne chargez pas de multiples fichiers CSS, vous êtes bon. Dans la situation de ce travail, 1 page en particulier recevait 1 million d'uniques par jour, et le groupe d'affaires était bon de le garder non compressé malgré une économie potentielle de 5gb par jour sur une amélioration de 5k de la minification. La bande passante est moins chère que les ingénieurs de l'interface utilisateur, je suppose ...

Answer 5

Mon format de base est un commentaire de bloc en haut et en plongée dans les principales régions avec des commentaires d'en-tête (semblables aux vôtres).

/* 
* 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. 

quelques conseils.

descendants des sous-sections spécifiques Indente *

div#left-col { ... } 

    * html #left-col { ... } 

    #left-col p { ... } 

    #left-col ul { ... } 

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

     #left-col li { ... } 

* Mais keep rules efficient avec le nombre de descendants inclus dans un sélecteur. En règle générale, j'écris:

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

au lieu de:

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

Rappelez-vous, que ce changement précisément ce que la règle sélectionne, mais aussi longtemps que cela fonctionne pour vos pages et maintenable, il est OK .

Alphabétiser les propriétés.

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

Réduire de courtes règles à 1 ligne (si elle ne fait pas mal maintenabilité).

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