Quelle est la meilleure façon d'organiser les règles CSS?

Question

Quelles sont les stratégies que vous aider à garder la trace d'un grand nombre de règles CSS? Comment vous organisez-vous vos fichiers, vos blocs de code, et vos règles?

Answer 1

pour un gros fichier de règles css je voudrais organiser de cette manière

1. fournir toute réinitialisation des règles CSS première
2. fournir toute générale des règles génériques (par exemple p { color: #553423; } prochaine
3. diviser le reste du document par les sections de la page
4. mettre chaque règle sur une ligne avec les règles générales suivies par des règles plus spécifiques
5. enumérer les sélecteurs à l'intérieur de chaque règle

exemple:

/*****
/*  ~masthead
/*****

#masthead {background-color: #cc00ff; color: #fff; width: 950px; }
#masthead h1 { background: transparent url(logo.png) no-repeat; text-indent: -9000px; width: 200px; }

/*****
/*  ~content
/*****

#content { background-color: #fedefd; margin:0; width: 357px; }
#content h1 { font-size: 120%; font-weight: bold; margin: 50px 20px 50px 70px; }
#content p em { color: magenta; }

De cette façon, vous pouvez

1. recherchez facilement un article (recherche de ~de tête de mât et vous êtes en haut de l'article)
2. numériser facilement toutes les règles d'une section à la fois pour déterminer si quelque chose est couvert ou non
3. de régler facilement les règles, même dans de longues lignes. alphabétiser les sélecteurs assure que "couleur" n'apparaît que deux fois dans la même règle

Answer 2

Mes 4 conseils:

Organiser votre css pour le retrait de l'enfant des éléments de plus que le reste:

#main_side {
    width: 392px;
    padding: 0;
    float: right; }

    #main_side #featured_articles {
        background: #fff; }

    #main_side #frontpageads {
        background: #fff;
        margin: 8px 0; }

Utiliser des abréviations:

margin:5px 0 4px 10px;

Divisez votre feuille de style dans des sections spécifiques:

Mondial de Styles (du corps, des paragraphes, des listes, etc), en-Tête, Structure de Page, en-Têtes, des Styles de Texte, de la Navigation, des Formes, des Commentaires, des Extras

Optionnel: Utiliser un compresseur pour serrez votre code dans un fichier de plus petite taille.

Answer 3

L'utilisation la plus efficace de CSS implique une importante ré-utilisation des classes. Alors qu'il est facile à la fois à un groupe de classes et les ID en fonction de l'endroit où ils apparaissent sur une page, cette méthode rompt rapidement vers le bas lorsque vous commencez à la façon appropriée de le ré-utiliser les classes qui finissent par apparaître dans de multiples domaines.

En outre, vous devriez éviter de nommer vos classes css après leur apparition, tels que h1.bleu, tr.55. Nommage des classes CSS de cette façon va à l'encontre de l'objectif de l'aide de CSS. Gardez à l'esprit qu'un jour, vous pourriez vouloir changer tout ce qui est bleu, rouge. Si vous nommez vos classes .le bleu et le .en rouge, vous avez de toucher le balisage afin d'accomplir votre tâche. Toutefois, si vous nommez vos classes .moduleHeader ou similaire, vous pouvez changer les couleurs de ces moduleHeaders dans le fichier css sans jamais toucher le balisage.

Bien construit fichiers css avec une importante ré-utilisation des classes est mieux organisées par ordre alphabétique de la classe. Cette méthode sera toujours organisée et aura du sens pour tout le monde qui travaille sur votre projet.

Je préfère gérer mes classes par ordre alphabétique dans une grande partie et alors un autre morceau pour mon ID est organisée par ordre alphabétique.

En fonction de la taille du site, il peut être une bonne idée de mettre des éléments de structure dans un fichier et de styles d'éléments (couleurs, choix des polices de caractères, etc) dans un autre fichier css. Cela vous permet d'avoir parfaitement utilisable site avec UNIQUEMENT les éléments de structure, et il vous permet également de "re-design" du site par le seul fait de toucher ou de changer les styles css feuille.

Dans la pratique, je préfère avoir une seule grande feuille css à la fois avec le "joli" des choses et de la structure parce que c'est embêtant pour permuter entre les deux dans un environnement de production. Toutefois, selon la structure de votre équipe, il peut fonctionner mieux pour vous dans un autre arrangement.

Dans une classe ou l'id de la déclaration, j'organise mes attributs par ordre alphabétique. J'ai essayé d'autres structures organisationnelles, mais le seul qui semble fonctionner pour d'autres personnes, sans formation, est dans l'ordre alphabétique.

Answer 4

En général j'essaie de mettre les règles de générique au plus spécifique. Par exemple, au début du document peut avoir des règles pour le body, div, h1 ect. Après que je vais passer dans la classe des règles spécifiques. Suivi à la fin de règles par id.

J'ai aussi vu des gens les règles du groupe, par leur utilisation. Par exemple, si votre page a une table; vous pouvez regrouper toutes vos règles pour le style de la table, les cellules, les données de l'ensemble. Ajouter éventuellement quelques commentaires dans le fichier css pour expliquer ce que chaque section est pour le rendre plus facile à trouver plus tard.

Answer 5

J'ai trouvé que les sélecteurs basée sur l'id ou une classe est moins fragile aux changements et plus facile à maintenir que celles que je poste. Ensuite, nous segment nos règles dans le site (global), et les règles d'application. Dans chaque fichier, nous organisons les choses dans l'ordre alphabétique et de la moins à la plus spécifique (par spécification css). Nous n'avons pas de minimiser ou réduire la lisibilité de nos règles, et de les commenter comme c'était le code. Quand je refactoriser le code d'une page HTML la première chose que je fais est bande le style du contenu, et de le déplacer dans les fichiers css. Je sais que c'est probablement évident.

/Allan