06-01-2011, 12:54 PM
CSS: Pour des feuilles de styles plus lisible.
Par Viciousity
Bonjour à tous et à toutes,
Dans les lignes qui suivent, je vais essayer de vous donner quelque petit conseil sur la présentation de vos pages de style. Pourquoi ? Simplement car dans tout projet, il faut à un moment modifier son code ou bien même le partager. Du coup, si vous avez correctement codé, les gens qui reliront votre travail auront des facilités à comprendre votre code et qui sait a le modifier.
1.0: Je m'apelle John.
Une des grande finesse a acquérir dans le CSS c'est un nommage correct de vos éléments. Ainsi, d'un simple coup d'oeil, vous saurez directement a quoi se rapporte votre mise-en-style(MES).
Pourquoi le dernier exemple est le meilleur ?
Simplement car il identifie directement l'élément que l'on met en forme. Du coup, quand vous trouverez que tel élément de votre page mérite changement, vous aurez juste a l'identifier et ensuite a le changer sans pour autant modifier tous les éléments portant la classe ".normal-red-text".
2.0: L'alphabet c'est bien, avec de la logique c'est mieux...
Une autre grande règle dans les feuilles de style c'est l'organisation des propriétés. Cela peut vous paraitre stupide et perfectionniste mais pourtant avec la venue du CSS3 on se retrouve vite avec des éléments qui ont nombre de propriétés éffarantes (10,12 parfois). Du coup, quand on veux en modifier une, encore faut-il la retrouver...
Voilà donc une manière que je trouve stupide:
Le code ci-dessus, bien que parfaitement correct, n'a aucune logique de conception. Du coup les propriétés visant une même chose (background) son séparées et on doit donc relire tout son code afin de les trouver. C'est pourquoi je vous propose :
Avec le code ci-dessus on a directement les éléments dans un ordre logique et donc un accès facile à ceux ci. De plus les CSS3 CB rules sont facilement enlevable selon l'évolution par rapport aux navigateurs. Bien sur il ne s'agit pas la de la manière absolue de faire. Le tout est de trouver une manière logique et rapide a revoir.
3.0: Parce que je suis un artiste...
En commençant le CSS, vous vous lancez, même inconsciemment, dans l'art de bien présenter une page. Du coup, pourquoi ne pas bien présenter vous même votre feuille de style.
Selon moi, une feuille de style c'est comme un livre. On a des chapitres qui contient du contenu différent. Alors pourquoi ne pas le présenter tel quel ? Voici quelque exemple de mise en valeur de titre.
Vous pouvez bien sur les combiné afin d'obtenir de magnifique résultat.
A vous de jouer, soyez créatifs ;P
4.0: Les poupées russes.
Je t'ouvre toi, je te met a l'intérieur et je te referme. LA tendance dans les nouveaux langages, c'est l'indentation. Pourquoi ? Car elle permet de facilement lire du code et de l'éplucher. Du coup pourquoi ne pas faire pareil en CSS ?
Avant de vous lancez plus bas, sachez qu'il s'agit d'une manière de coder qui n'ets pas universel, certains adorent(moi) d'autre pas. Il s'agit aussi d'une logique de lecture et donc pas universelle.
D'abord, il faut compresser son CSS. Pourquoi? car dans une pages ou vous avez 150 éléments a mettre en forme et qu'imaginons ils ont une moyenne de 5 propriétés, avec les titres et commentaires vous arrivez facilement à 775 lignes de CSS... Sa fait énormément a parcourir :S
Du coup une méthode est née, la compression CSS à un étage.
La compression est simple en fait, elle tient a transformer
Au début sa semble un peu bizarre mais si vous avez bien suivi le point 1 et 2 de tutorial, vous n'aurez aucun problème à vous y retrouver et vous verrez que votre code aura pris une autre dimension.
Une fois cela fait, il suffit de les agencer avec logique :
Il n'y a pas de regle particulière. Moi je sépare seulement les pseudo-sélecteur de leur élément de base, d'autres indentent tout les étages...
5.0: C'est pas noël mais prend sa...
Je vous offre donc un petit exemple de CSS de ma fabrique pour voir ce que cela donne une fois mis en place ;P
En espérant que vous avez tenu le coup jusque ici ;P
Si vous avez des questions ou autres je suis dispo
Ps: Il existe des frameworks tels que BluePrint/compass ou SASS qui permettent une logique semblable. J'en suis conscient mais je préfère coder en classique, c'est un choix ^^
EN espérant avoir aider la communauté, Viciousity.
Par Viciousity
Bonjour à tous et à toutes,
Dans les lignes qui suivent, je vais essayer de vous donner quelque petit conseil sur la présentation de vos pages de style. Pourquoi ? Simplement car dans tout projet, il faut à un moment modifier son code ou bien même le partager. Du coup, si vous avez correctement codé, les gens qui reliront votre travail auront des facilités à comprendre votre code et qui sait a le modifier.
1.0: Je m'apelle John.
Une des grande finesse a acquérir dans le CSS c'est un nommage correct de vos éléments. Ainsi, d'un simple coup d'oeil, vous saurez directement a quoi se rapporte votre mise-en-style(MES).
.l566{color: #C30;} /* Ce qu'il ne faut pas faire. */
.normal-red-text{color: #C30;} /* Un peu mieux */
h1{color:#C30;} /* Le meilleur */Pourquoi le dernier exemple est le meilleur ?
Simplement car il identifie directement l'élément que l'on met en forme. Du coup, quand vous trouverez que tel élément de votre page mérite changement, vous aurez juste a l'identifier et ensuite a le changer sans pour autant modifier tous les éléments portant la classe ".normal-red-text".
2.0: L'alphabet c'est bien, avec de la logique c'est mieux...
Une autre grande règle dans les feuilles de style c'est l'organisation des propriétés. Cela peut vous paraitre stupide et perfectionniste mais pourtant avec la venue du CSS3 on se retrouve vite avec des éléments qui ont nombre de propriétés éffarantes (10,12 parfois). Du coup, quand on veux en modifier une, encore faut-il la retrouver...
Voilà donc une manière que je trouve stupide:
.my-element{
width: 100px;
color: #FFF;
background-repeat: repeat-x;
text-align: right;
border: 1px solid #CCC;
height: 100px;
background-position: 1px 3px;
}Le code ci-dessus, bien que parfaitement correct, n'a aucune logique de conception. Du coup les propriétés visant une même chose (background) son séparées et on doit donc relire tout son code afin de les trouver. C'est pourquoi je vous propose :
/* CA signifie "Classé alphabétiquement" */
.my-element{
/* a. Les CSS3 Cross-Broswer rules CA. */
-moz-border-radius: 5px;
-moz-box-shadow: 1px 1px 2px #CCC;
-webkit-box-shadow: 1px 1px 2px #CCC;
/* b. Les éléments de position et taille. */
position: absolute;
top:10px;right:20px;bottom:10px;left:30px;
height: 100px;
width: 100px;
/* c. Le reste CA */
background-position: top left;
background-repeat: no-repeat;
border-radius: 5px;
color: #444;
margin: 0;
padding: 5px;
}Avec le code ci-dessus on a directement les éléments dans un ordre logique et donc un accès facile à ceux ci. De plus les CSS3 CB rules sont facilement enlevable selon l'évolution par rapport aux navigateurs. Bien sur il ne s'agit pas la de la manière absolue de faire. Le tout est de trouver une manière logique et rapide a revoir.
3.0: Parce que je suis un artiste...
En commençant le CSS, vous vous lancez, même inconsciemment, dans l'art de bien présenter une page. Du coup, pourquoi ne pas bien présenter vous même votre feuille de style.
Selon moi, une feuille de style c'est comme un livre. On a des chapitres qui contient du contenu différent. Alors pourquoi ne pas le présenter tel quel ? Voici quelque exemple de mise en valeur de titre.
/* == HEADER: Traditionnel et simple mise en valeur. */
.element{color:#C30;}/*
HEADER : Fort et visible.
=========================
*/
.element {color:#C30;}/* HEADER : Léger, fluide, distingué.
------------------------------------------------------------------- */
.element{color:#C30;}Vous pouvez bien sur les combiné afin d'obtenir de magnifique résultat.
/*
TABLE DES MATIERES.
===================
- Header
# Typographie.
- Nav
- Footer
*/
/* HEADER.
------------------------------------------------------------------- */
#header{...}
/* == Typographie */
#header h1{...}
#header h2{...}
/* NAV.
------------------------------------------------------------------- */
#footer{...}A vous de jouer, soyez créatifs ;P
4.0: Les poupées russes.
Je t'ouvre toi, je te met a l'intérieur et je te referme. LA tendance dans les nouveaux langages, c'est l'indentation. Pourquoi ? Car elle permet de facilement lire du code et de l'éplucher. Du coup pourquoi ne pas faire pareil en CSS ?
Avant de vous lancez plus bas, sachez qu'il s'agit d'une manière de coder qui n'ets pas universel, certains adorent(moi) d'autre pas. Il s'agit aussi d'une logique de lecture et donc pas universelle.
D'abord, il faut compresser son CSS. Pourquoi? car dans une pages ou vous avez 150 éléments a mettre en forme et qu'imaginons ils ont une moyenne de 5 propriétés, avec les titres et commentaires vous arrivez facilement à 775 lignes de CSS... Sa fait énormément a parcourir :S
Du coup une méthode est née, la compression CSS à un étage.
La compression est simple en fait, elle tient a transformer
.element{
color: #C30;
line-height: 1.4em;
padding:0 5px;
}.element{color:#C30;line-height:1.4em;padding:0 5px;}Au début sa semble un peu bizarre mais si vous avez bien suivi le point 1 et 2 de tutorial, vous n'aurez aucun problème à vous y retrouver et vous verrez que votre code aura pris une autre dimension.
Une fois cela fait, il suffit de les agencer avec logique :
.element{color:#C30;line-height:1.4em;padding:0 5px;}
.element:last-child{border-bottom:1px;}
.element:hover{color:#000;}Il n'y a pas de regle particulière. Moi je sépare seulement les pseudo-sélecteur de leur élément de base, d'autres indentent tout les étages...
5.0: C'est pas noël mais prend sa...
Je vous offre donc un petit exemple de CSS de ma fabrique pour voir ce que cela donne une fois mis en place ;P
/* = RESET
-------------------------------------------------------------- */
*{margin:0;padding:0;}
a{text-decoration:none;color:blue;}
/* = GLOBAL
-------------------------------------------------------------- */
body{background-color:#EEE;color:#555;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:.9em;}
/* CSS3 : Import 'Sansation' font(EOT,WOFF,TTF,SVG format). */
@font-face{CONDENSEE POUR JEUWEB}
/* Master element global positionning. */
#lFixed{position:fixed;top:50px;left:25px;width:250px;}
#cDynamic{position:absolute;top:50px;left:300px;width:580px;}En espérant que vous avez tenu le coup jusque ici ;P
Si vous avez des questions ou autres je suis dispo
Ps: Il existe des frameworks tels que BluePrint/compass ou SASS qui permettent une logique semblable. J'en suis conscient mais je préfère coder en classique, c'est un choix ^^
EN espérant avoir aider la communauté, Viciousity.
![[Image: banner.png]](http://www.laluciole.me/wp-content/uploads/2013/02/banner.png)
