book

css stylesheets doc

feuilles de style (Cascading Style Sheets).
Bonnes habitudes et conseils.


Conseils de base del'utilisation et la structure globale d'une feuille de style ("stylesheet").

Il est bon de travailler et de mettre à jour un simple fichier texte reprenant l'arborescence de la feuille de style utilisée pour chaque page.

Je sens que je vais passer pour un vieux chiant, mais oui...
En fait je m'y mets avec le temps, vu le nombre de fois où je suis retombé sur de vieux bidules à mettre à jour.
Là je m'y mets, j'en ai vraiment trop bavé pour rien. (structure générale du stylesheet css dans un fichier texte en début de développement).
format html (dernière version).

Pensez à l'encodage en enregistrant votr fichier texte (pensez à l'enregistrer en utf-8)

  • Chaque modification étant mise à jour devrait être reprise pour ce fichier qui peut être un simple fichier texte ou mieux un fichier xml afin de visualiser immédiatement les propriétés utilisées.

  • Ce faisant, on évite à chaque création de page de se perdre dans des ID ou classes non utilisés dans un fichier php ou html...

  • Si parfois on se dit que c'est une perte de temps, il est évident que sur la durée, dans le cas de remaniements ultérieurs du site, une bonne documentation concernant la structure et l'ordre dans lesquels apparaissent les élément est en réalité un gain d'énergie de temps et donc d'argent!
    Quand on parle de faire des économies, tout le monde écoute :)

  • Une Lapalissade : En css !important est une des instructions les plus importantes.
    N'oubliez JAMAIS quand quelque chose ne se passe pas comme prévu, que la raison est probablement (tout simplement) :
    Qu'une règle spécifiée ou modifiée dans un élément parent ne s'applique simplement pas, car elle est marquée comme !important dans un élément enfant.

  • Dans la feuille de style, il est utile de documenter même les éléments qui vous paraissent évidents...

    Quand vous êtes en vacances, lorsque vous travaillez dans une grande équipe, imaginez le nombre de coups de fil et d'appels à l'aide que vous pouvez ainsi éviter afin de rentrer ressourcés et pleinement efficace à votre retour.

    Exemple du début de chaque stylesheet si vous travaillez dans un environement assez large :

    @charset "utf-8";
                        /* CSS Document */
                        /*
                            ! If you make changes to this file, please keep save this original css as reference on the server.
                            Please comment ANY modification.
                        
                            CSS VALIDATOR :
                            http://jigsaw.w3.org/css-validator/
                            MARKUP VALIDATOR :
                            http://validator.w3.org/
                            <stylesheet>
                                <informations>
                                    <author>
                                        Nicolas Pirson
                                    </author>
                                    <contact>
                                        see details...
                                    </contact>
                                    <details>
                                        http://tatactic.be/appartement/map.html
                                    <details>
                                    <version>
                                        <date-creation-yyyymmdd>
                                            20113001
                                        <date-of-last-modification>
                                        <date-of-last-modification-yyymmdd>
                                            20113001
                                        <date-of-last-modification>
                                        <modified-by>
                                            Nicolas Pirson
                                        <modified-by>
                                    </version>
                                </informations>
                            <stylesheet>
                        */

    Exemple tout simple d'inclusion de commentaire pour vos remplaçants qui en période de vacances, ne sont pas toujours les plus grands spécialistes (non, je ne vise personne mais ça arrive...) :

    body a:hover{
                                /*
                                    http://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes
                                    http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes
                                    alway document your css!
                                    a:link    { color: red }
                                    a:visited { color: blue }
                                    a:hover   { color: yellow }
                                    a:active  { color: lime }
                                */
                                color:#999;
                            }

    Oui, la documentation renvoie vers le site du W3C et non vers un site lambda qui ne se soucie peut-être pas entièrement des recomendations dudit W3C


XHTML 1.0 STRICT - CSS2.1