Optimiser la lecture du code – Application aux feuilles de styles CSS…

Avec l’arrivée du CSS 3, la feuille de style va devenir l’élément clé d’un site Web. En effet le code du site en lui même sera tres simple avec les nouvelles normes HTML 5. Il n’y aura plus besoin de se soucier d’affecter des pseudos classes ou autres Id aux elements puisqu’ils seront déjà préformatés pour jouer un vrai rôle. Ainsi les nouvelles balises du HTML 5 (<header>, <article>, <nav>…) permettent de savoir dans quelle section du code on se trouve. Dans la feuille de style c’est une autre histoire. Le code peut vite devenir illisible et la modification devient très complexe. J’ai récemment parcouru une feuille de style CSS 3 d’un autre genre, propre, et surtout tres facile a lire. Je vais vous expliquer pourquoi. Il est facile de comprendre que CSS est un langage de description en cascade (comme son nom l’indique ;-)), il est donc important de mettre en avant cette hiérarchie dans le code lui même. Ainsi voici ce que cela donne

article {
 border: 10px solid #ebebe3; background-color: ...
 -webkit-box-shadow: 0 3px 5px #333; -moz-box-...
 }
 article header,
 article section,
 article footer {
  margin: 0 20px;
  }
  article header p,
  article footer p {
   margin: 3px 0 0 0; font-variant: small-caps;...
   text-shadow: 1px 1px 1px #fff;
   }

Quand on parcours rapidement ce code, on voit bien la structure hierarchique entre l’élément de base “article” et les sous elements “article header”, “article section”…

Le code est bien plus comprehensible et cela facilite ca maintenance.

La feuille de style n’étant pas un programme ou un script a proprement parlé, on oubli souvent les regles de mise en page que l’on peut utiliser dans les programmes ou les scripts…

Avec CSS 3, il devient indispensable de traiter la feuille de style comme un élément à part entière du site.

Une extension super interessante

Bonjour,

Aujourd’hui je vous parle outils et lus précisement outils pour developpeur Web…En effet qui n’a jamais rêvé de pouvoir tester son site avec differentes resolutions, tester le site avec et sans javascript d’un simple clic, recuperer les Class et les Id de tout les elements d’une page, selectionner dans la feuille de style CSS l’information sur un element particulier…

Toute ces petites fonctionnalités qui ne payent pas de mine sont tres interessante quand on se lance dans le developpement de site web…eh bien un developpeur a eu l’idee d’en faire une extension pour firefox. Cette extension qui s’appelle “Web Developper” est vraiment tres interessante, elle regorge de petites fonctionnalités qui vont faciliter la vie de tous les developpeurs.

Voici donc le lien direct pour recuperer l’Extension : Web Developper

Je ne resiste pas egalement a l’envie de mettre un lien direct sur le site de son auteur qui a developpé d’autres extensions tres interessantes : http://chrispederick.com/

Bon developpements a tous…