Comment dois-je organiser le contenu de mon fichier CSS(s)?

Question

Cette question est au sujet de l'organisation de la CSS directives elles-mêmes à l'intérieur d'un .fichier css. Lors de l'élaboration d'une nouvelle page ou un ensemble de pages, j'ai l'habitude de simplement ajouter des directives à la main à la .fichier css, en essayant de refactoriser quand je peux. Après un certain temps, j'ai des centaines (ou des milliers) de lignes et il peut devenir difficile de trouver ce dont j'ai besoin quand peaufiner la mise en page.

Quelqu'un aurait-il des conseils pour savoir comment organiser les directives?

• Devrais-je essayer d'organiser de haut en bas, imitant les DOM?
• Dois-je organiser sur le plan fonctionnel, en mettant directives pour les éléments qui prennent en charge les mêmes parties de l'INTERFACE utilisateur ensemble?
• Dois-je juste une sorte de tout en ordre alphabétique par le sélecteur?
• Une combinaison de ces méthodes?

Aussi, est-il une limite à combien CSS je devrais garder dans un fichier avant qu'il pourrait être une bonne idée de le casser dans des fichiers séparés? Disons, 1000 lignes? Ou est-ce toujours une bonne idée de garder le tout en un seul endroit?

Liés à la Question: Quelle est la meilleure façon d'organiser les règles CSS?

Answer 1

Jetez un oeil à ces trois présentations slideshare pour commencer:

• Belle Maintenable CSS
• Maintenable CSS
• Efficace, facile à gérer, modulaire CSS

Tout d'abord, et surtout, d'un document de votre CSS. Quelle que soit la méthode que vous utilisez pour organiser votre CSS, être cohérent et de le documenter. Décrire en haut de chaque fichier qu'est-ce que dans ce fichier, peut-être de fournir une table des matières, peut-être de référencement facile de rechercher pour les étiquettes uniques de sorte que vous sauter aux sections facilement dans votre éditeur.

Si vous souhaitez diviser votre CSS en plusieurs fichiers, par tous les moyens le faire. Oli déjà mentionné le fait que le supplément HTTP demandes peuvent être coûteux, mais vous pouvez avoir le meilleur des deux mondes. Utiliser un script de création d'une sorte de publier votre bien documenté, modulaire CSS pour un comprimé, un seul fichier CSS. Le YUI Compressor peut aider à la compression.

En contraste avec ce que les autres ont dit jusqu'à présent, je préfère écrire chaque propriété sur une ligne distincte, et l'utilisation de l'indentation pour grouper les règles. E. g. suivant Oli exemple:

#content {
    /* css */
}
    #content div {
        /* css */
    }
    #content span {
        /* css */
    }
    #content etc {
        /* css */
    }

#header {
    /* css */
}
    #header etc {
        /* css */
    }

Qui le rend facile de suivre la structure du fichier, en particulier avec assez d'espace et clairement marqué des commentaires entre les groupes, (bien que pas aussi facile de parcourir rapidement) et facile à modifier (puisque vous n'avez pas à parcourir par le biais unique de longues lignes de CSS pour chaque règle).

Comprendre et utiliser la cascade et la spécificité (tri de vos sélecteurs par ordre alphabétique est à droite).

Si je séparer mon CSS en plusieurs fichiers, et dans quels fichiers dépend de la taille et de la complexité du site et le CSS. J'ai toujours au moins un reset.css. Qui tend à être accompagné par layout.css générale de mise en page, nav.css si le site menus de navigation se compliquent un peu et forms.css si j'ai plein de CSS pour le style de mes formulaires. Autre que cela, je suis encore à essayer de le comprendre moi aussi. J'aurais colors.css et type.css/fonts.css de la scission de l'couleurs/graphisme et de la typographie, base.css afin de fournir un ensemble de base de style pour toutes les balises HTML...

Answer 2

J'ai tendance à orgainize mon css comme ceci:

1. réinitialiser.css
2. de la base.css: j'ai mis la disposition pour les principales sections de la page
   1. général styles
   2. L'en-tête
   3. Nav
   4. contenu
   5. le pied de page
3. de plus, [nom de la page].css: les classes qui sont utilisées uniquement dans une seule page

Answer 3

Cependant, vous trouverez qu'il est plus facile à lire!

Sérieusement, vous obtiendrez un milliard et cinq suggestions, mais vous allez seulement comme un couple de méthodes.

Certaines choses que je ne dis que:

• La rupture d'un fichier CSS en morceaux ne vous aider à vous organiser dans votre tête, mais il signifie plus de demandes des navigateurs, ce qui conduit à un ralentissement de serveur en cours d'exécution (plus de demandes) et il faut les navigateurs plus de temps à afficher les pages. Gardez cela à l'esprit.
• Rompre un fichier seulement parce que c'est un nombre arbitraire de lignes est stupide (à l'exception que vous avez énormément de rédacteur - en ce cas, obtenir un nouveau)

Personnellement, je code mon CSS comme ceci:

* { /* css */ }
body { /* css */ }
#wrapper { /* css */ }
#innerwrapper { /* css */ }

#content { /* css */ }
#content div { /* css */ }
#content span { /* css */ }
#content etc { /* css */ }

#header { /* css */ }
#header etc { /* css */ }

#footer { /* css */ }
#footer etc { /* css */ }

.class1 { /* css */ }
.class2 { /* css */ }
.class3 { /* css */ }
.classn { /* css */ }

En gardant les règles sur une ligne me permet de parcourir un dossier très rapide et de voir quelles sont les règles qui y sont. Quand ils sont élargis, je trouve ça trop dur travail, en essayant de savoir ce que les règles sont appliquées.

Answer 4

J'ai essayé un tas de stratégies différentes, et je reviens toujours à ce style:

.class {border: 1px solid #000; padding: 0; margin: 0;}

C'est le plus sympathique quand il s'agit d'une grande quantité de déclarations.

M. Snook écrit à ce sujet de près de quatre ans :).

Answer 5

FYI - j'ai posé la même question, dans le cas où vous souhaitez lire plus de réponses.