Est-ce ainsi que vous structureriez votre feuille de style CSS?

StackOverflow https://stackoverflow.com/questions/182528

  •  06-07-2019
  •  | 
  •  

Question

Laissant de côté la question de savoir si vous devriez servir une ou plusieurs feuilles de style, en supposant que vous n'en envoyez qu'une, que pensez-vous de cette structure de base?

/ * Structure * /

Tous les éléments de mise en page de modèles doivent être placés ici, ainsi l'en-tête, le pied de page, le corps, etc.

/ * Structure End * /

/ * Composants communs * /

Éléments répétés, tels que formulaires d'inscription, listes, etc.

/ * Composants communs à la fin * /

/ * Page spécifique 1 * /

Certaines pages peuvent avoir des styles spécifiques, cela irait ici.

/ * Page spécifique fin 1 / * /

/ * Page spécifique * /

Comme ci-dessus

/ * Spécifique Page 2 Fin * /

/ * Page spécifique etc * /

Et ainsi de suite.

/ * Page spécifique, etc. Fin * /

Était-ce utile?

La solution

Cela ressemble à la façon dont je structure la mienne, cependant, je trouve que l'utilisation de sous-titres est la meilleure façon de le faire. C'est pourquoi j'utilise cette structure:

/ ***************************  * GLOBAL *  ************************** /

/ * Tous les éléments communs figurent ici sous les sous-titres appropriés * /

/ * Mise en forme du titre * /

/ * Formatage du texte * /

/ * Formatage du formulaire * /

/ * Mise en forme du tableau * /

/ * etc * /

/ ***************************  * DISPOSITION *  ************************** /

/ * Tous les éléments de mise en page vont ici sous les sous-titres * /

/ * En-tête * /

/ * Barre latérale gauche * /

/ * Barre latérale droite * /

/ * Pied de page * /

/ ***************************  * LA NAVIGATION *  ************************** /

/ * Je mets la navigation séparément de la mise en page car il peut y avoir un certain nombre de points de navigation sous leurs sous-titres * /

/ * Navigation principale (horizontale) * /

/ * Navigation à gauche * /

/ * Navigation à droite * /

/ * Navigation en miettes de pain * /

/ ***************************  * FORMES *  ************************** /

/ * Toute mise en forme de formulaire qui diffère de la mise en forme habituelle, s'il existe plusieurs formulaires mis en forme différemment, utilisez des sous-titres * /

/ ***************************  * LES TABLES *  ************************** /

/ * Même transaction que les formulaires * /

/ ***************************  * LISTES *  ************************** /

/ * Même transaction que les formulaires et les tableaux * /

/ ***************************  * CONTENU *  ************************** /

/ * Toute mise en forme spécifique pour des pages particulières, regroupée par sous-titres pour la page de la même manière que les formulaires, les tableaux et les listes * /

/ ***************************  * SUPPORT CSS *  ************************** /

/ * Ceci s’applique à toute mise en forme spéciale pouvant être appliquée à n’importe quel élément d’une page et remplaçant ainsi la mise en forme normale de cet élément. Par exemple, cela pourrait avoir des choses comme: * / 

.float-right { float: right; }
.float-left { float: left; }
.float-center { margin-left: auto; margin-right: auto; }
.clear { clear: both }
.clear-block { display: block }
.text-left { text-align: left }
.text-right { text-align: right }
.text-center { text-align: center }
.text-justify { text-align: justify }
.bold { font-weight: bold }
.italic { font-style: italic }
.underline { border-bottom: 1px solid }
.nopadding { padding: 0 }
.nobullet { list-style: none; list-style-image: none }

/ * etc * /

L’espoir que cela aide.

En général, je ne recommande pas d’écrire sur une seule ligne comme celle-ci, ou comme suggéré dans le lien posté par Adam, il est très difficile de les survoler s’ils sont longs. Pour les exemples ci-dessus, il était juste plus rapide de les taper de cette façon, ainsi je n'ai pas eu à indenter chaque ligne.

Pour le formatage, je recommanderais cette structure: 

.class {
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
}

Et ainsi de suite, j'ai placé la structure de la classe ou de l'ID en haut, puis toute autre mise en forme, comme la police, etc. en dessous. Cela rend très rapide et clair de survoler.

Autres conseils

Tout ce qui est logique pour vous est suffisant. Franchement, quand quelqu'un d'autre cherche quelque chose dans votre feuille de style - ou quand vous venez chercher quelque chose, d'ailleurs - il ne va pas essayer de déterminer quelle était votre structure d'organisation. Ils vont juste chercher quelle classe ou quel élément ils ont besoin de voir. Donc, tant que vous gardez généralement des éléments liés les uns aux autres et que vous séparez des commentaires tels que @Matt, vous vous en tirez bien.

Le fait est que même avec une structure organisationnelle très bien pensée - tout comme avec un système de classement bien pensé -, on ne sait pas toujours ce qui se passe où; vous feriez donc mieux de faire preuve de discernement, de ne pas consacrer beaucoup de temps à l'organisation et de vous fier aux outils de recherche pour trouver ce dont vous avez besoin.

J'organise mes CSS de la même manière que la vôtre, mais je commence par une section de réinitialisation. L'idée principale est d'aller du général au particulier. Alors voilà:

  • réinitialiser
  • structure
  • html_tags
  • navigation
  • sections spécifiques
  • Messages d'erreur - c'est ma dernière section

La structure que vous avez présentée est exactement ce que j'utilise. Cependant, il me semble que la situation est encore trop complexe avec l'apparition de nouvelles règles qui se superposent mutuellement ... Je devrais peut-être essayer de m'en tenir à la solution suggérée dans le sujet lié à Adam.

Il semble que chaque fois que je crée un nouveau fichier css, je trouve un nouveau moyen de l’organiser. Et ils sont TOUS meilleurs que les précédents.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top