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.
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…