Meilleures pratiques - Formatage des feuilles de style CSS

Question

Cette question peut sembler étrange... mais je vais la poser :

Je travaille actuellement à la création d'un site de taille assez importante en utilisant le design/css sans tableau (évidemment la meilleure façon de procéder). Malheureusement, j'ai une exigence qui est complètement hors de mon contrôle et qui stipule que je dois avoir une seule feuille de style pour le site.

À certains égards, c'est mieux, car cela m'oblige à réfléchir à la réutilisation du style de manière proactive pendant la conception des pages. D'un autre côté... la feuille de style devient monolithique et je me perds rapidement à essayer de trouver des styles que je sais avoir déjà définis.

J'aimerais me rendre service à moi-même (et à toute personne qui devra travailler sur le site à l'avenir) et rendre le CSS aussi lisible et facile à mettre à jour que possible. C'est là que vous intervenez. Je suis à la recherche de suggestions de formatage, d'organisation et de meilleures pratiques.

Quelqu'un doit être meilleur que moi dans ce domaine.

Answer 1

Pourquoi ne pas avoir plusieurs feuilles de style sur vos boîtes de développement, mais les faire fusionner en une seule dans vos scripts de déploiement.

Answer 2

J'ai récemment adopté l'indentation du code pour formater toutes mes feuilles de style. Cela permet de se débarrasser du mur de texte auquel la plupart des CSS ressemblent actuellement et facilite la recherche de déclarations spécifiques.

#menu {
  asd:asda;
}
  #menu a {
    asda:asd;
  }

  #menu ul {
    asd:asda;
  }
    #menu ul li {
      qwe:qwerty;
    }

#content {
  asd:asdf;
}
/* etc...*/

Answer 3

Faites attention à l'utilisation de @import, surtout dans un fichier css principal. Les feuilles de style @import ne seront pas téléchargées en parallèle et vous ne pouvez pas contrôler l'ordre dans lequel elles sont importées (dans IE). Voir la page Blog du site Web haute performance pour plus d'informations.

J'organise mon fichier CSS en plaçant les éléments communs (en-tête, navigation) en haut et les éléments plus spécifiques à une page en bas. Il n'est pas difficile de trouver des éléments parce que je débogue/travaille habituellement dans firebug qui donne le numéro de ligne de l'élément que vous inspectez.

Answer 4

Mon site possède un fichier global.css qui importe les autres CSS dans l'ordre dans lequel ils doivent s'enchaîner.

exemple :

Global.css file:
@import url('Directory/MainLayout.css');
@import url('Directory/Links.css')
@import url('Directory/Tables.css')

En procédant ainsi, vous pourrez organiser votre CSS.

Answer 5

Maintenance des feuilles de style

Normes et meilleures pratiques CSS

Créer un code facile à maintenir avec un guide de style CSS