+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : CSS: Pour des feuilles de styles plus lisible. (/showthread.php?tid=200)
Pages :
1
2
CSS: Pour des feuilles de styles plus lisible. - Viciousity - 06-01-2011
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).
.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.
RE: CSS: Pour des feuilles de styles plus lisible. - Sephi-Chan - 06-01-2011
C'est intéressant, mais comme tu l'as indiqué, je préfère utiliser SCSS.
Cela me permet d'écrire :
$header_background: #000;
#header {
background: $header_background;
overflow: hidden;
padding: 10px 0 0;
height: 34px;
h1 {
float: left;
a {
text-decoration: none;
font-size: 20px;
color: #fff;
}
}
}
Qui est compilé en :
#header { background: black; overflow: hidden; padding: 10px 0 0; height: 34px; }
#header h1 { float: left; }
#header h1 a { text-decoration: none; font-size: 20px; color: #fff; }
Sephi-Chan
RE: CSS: Pour des feuilles de styles plus lisible. - Viciousity - 06-01-2011
Je suis entièrement d'accord Sephi, je préfère coder classique mais depuis peu, dans tous mes "gros projets", j'utilise le SASS (qui est, au passage, je trouve, mieux que SCSS au point de vue de la lisibilité YAML like <3). Je l'utilise car il permet l'utilisation de variable qui est un gain de temps formidable (quoique, quand on code bien, changer de couleur un élément est super simple.
D'ailleurs, si tu le désires, j'ai mis au point en SASS un système de grid sur 12 colonnes qui permet, après configuration (taille des colonnes, espace entre, etc.) de générer un layout dynamiquement. Ce sera une joie de le partager (si je le retrouve).
Les deux permettent des possibilités énormes (Mixins, variables, fonctions natives sur couleur, partial) mais, malheureusement, dans le domaine du webdesign, c'est encore très mal vu (dernière fois que j'ai voulu expliquer a un client les avantages d'un tel langage, on m'a littéralement envoyé chier, et ce n'était pas une petite entreprise amateur :S)
Fin tout cela va encore évoluer avec les années qui passent ^^
Pour en revenir au sujet, ce tuto est à disposition de tout le monde. C'est pourquoi j'ai pris comme base le CSS.
Ne nous voilons pas la face, plus de 80 % des dev utilisent encore le CSS contre 20 % qui utilise des FW...
Dans ses 80 %, seulement 20 % code plus ou moins proprement ...
De plus, ce qui est applicable au CSS l'est aussi pour SASS.
Cordialement Viciousity.
RE: CSS: Pour des feuilles de styles plus lisible. - Holy - 06-01-2011
Bonne initiative, ça vaut toujours la peine de le rappeler ^^
Perso, j'ai un bidule PHP qui trie automatiquement l'ordre de mes propriétés CSS quand je suis en développement (ordre alphabétique) et qui indente le tout. Une fois que je suis en production, ça compile le tout avec gZip (article d'Alsacréation à ce propos).
Concernant, les frameworks CSS en php, il existe Csscaffold (que j'utilise et qui est très (trop ?) puissant) et xCss (que je teste en ce moment) dans le même genre.
RE: CSS: Pour des feuilles de styles plus lisible. - Globe - 07-01-2011
Personnellement je ne sais pas si c'est une bonne pratique mais j'ai tendance à multiplier les feuilles de style, une global contenant mes divisions et classes standards que je nomme global, qui contient les infos pour une page de base, une pour les formulaires et encadrements divers. Si le design se présente sous plusieurs formes je fout également mes menus dans un css à part, si je dois parfois afficher un menu vertical, deux, ou deux menus verticaux avec un menu horizontal par exemple. Ça m'évite de mélanger tout mon bordel. Sinon pour la compression sur une ligne je l'applique avec parcimonie, si ça doit faire 3 lignes je préfère mettre chaque propriété sur une nouvelle ligne.
RE: CSS: Pour des feuilles de styles plus lisible. - Sephi-Chan - 07-01-2011
La multiplication des feuilles de style peut être une bonne pratique si, une fois en développement, les feuilles de stylées sont toutes compilés en une seule. Sans ça, ça augmente inutilement le nombre d'éléments à charger, ce qui est très pénalisant (puisqu'un navigateur ne charge que 2 éléments en parallèle).
Plus d'infirmations sur : http://developer.yahoo.com/performance/rules.html#num_http.
Sephi-Chan
RE: CSS: Pour des feuilles de styles plus lisible. - Globe - 07-01-2011
Merci pour toutes ces infos je me lance dans la lecture.
RE: CSS: Pour des feuilles de styles plus lisible. - niahoo - 11-01-2011
ben comme license il y à ça de sympa : http://sam.zoy.org/wtfpl/
RE: CSS: Pour des feuilles de styles plus lisible. - Cawrotte - 12-01-2011
(06-01-2011, 01:28 PM)Sephi-Chan a écrit : C'est intéressant, mais comme tu l'as indiqué, je préfère utiliser SCSS.
Cela me permet d'écrire :
$header_background: #000;
#header {
background: $header_background;
overflow: hidden;
padding: 10px 0 0;
height: 34px;
h1 {
float: left;
a {
text-decoration: none;
font-size: 20px;
color: #fff;
}
}
}
Qui est compilé en :
#header { background: black; overflow: hidden; padding: 10px 0 0; height: 34px; }
#header h1 { float: left; }
#header h1 a { text-decoration: none; font-size: 20px; color: #fff; }
Sephi-Chan
Oh mais c'est très intéressant ! Merci pour l'astuce !
:good:
RE: CSS: Pour des feuilles de styles plus lisible. - Colmea - 15-01-2011
Merci pour ces informations.
Ce n'est pas la première fois que j'entends qu'il faut regrouper son CSS en une seul feuille pour limiter les chargements (ce qui est tout à fait logique au fond).
Je vais donc tenter d'optimiser tout ça sur mon projet (ce qui est loin d'être le cas pour l'instant).
Ca me fait penser qu'un petit article listant de manière non exhaustive les bonnes pratiques à acquérir pour optimiser nos pages web (pour réduire le temps de chargement) ne serait pas négligeable !
Ce genre d'info est toujours utile