Guidelines
Guidelines copied to clipboard
dhoko
CSS Guidelines [Pour une CSS simple et réutilisable]
Alors je reprends ce que j'ai déjà mis sur Twitter :
. Teste de la font sur IE6 : Je dis non ! Tester en effet sur tous les navigateurs et pour IE, jusqu'à IE8. Sauf cas particulier si vraiment vous devez être opé sur IE6/7.
. Mode Avancé : (Faute d'orthographe déjà) ensuite on se rapproche de la syntaxe BEM ( http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ ). Pour l'avoir testé, c'est plus efficace même si c'est un peu déroutant au départ.
. Le CSS Atomique : Alors là pas du tout d'accord ! Comme tout, il faut l’utiliser intelligemment et avec parcimonie. Je m'explique => par exemple une classe pour une couleur dominante, permet par exemple si on veut faire une habillage spécifique de changer cette couleur en deux secondes. Moi je mets donc mes couleurs dans des class sachant que pour bcp de projets je ne peux pas utiliser SASS ou LESS. => De même pour les fonts => Pour les tailles, différence de point de vue. Si le site est bien construit avec un moteur de templating genre TWIG, ça va plus vite de changer les tailles dans les templates sinon dans le CSS, c'est plus souple. Donc là je dirai suivant le projet et ses contraintes de choisir l'un ou l'autre. Toujours penser à celui qui reprendra le projet par la suite ou tout simplement penser à soi pour faire évoluer le plus rapidement le projet.
C'est tout pour le moment ;-)
Le bannissement de !important est arbitraire et injustifié. Ce flag n'est pas nécessairement à exclure ; il faut surtout l'utiliser à bon escient.
Pour le reste, c'est pas mal. Certains points mériteraient d'être creusés davantage, mais ça dégrossit bien le sujet en tout cas. :)
=> par exemple une classe pour une couleur dominante, permet par exemple si on veut faire une habillage spécifique de changer cette couleur en deux secondes. Moi je mets donc mes couleurs dans des class sachant que pour bcp de projets je ne peux pas utiliser SASS ou LESS.
A moins que ce soit très spécifique, il vaut quand même mieux gérer un thème plutôt que de basher les éléments à coups de classes de couleurs.
Très intéressant de lire les guidelines de différentes personnes, ça permet de faire les siennes. Par contre, pourquoi ne pas mettre de ; à la fin de la dernière propriété ? Pour faire comme en JS ? Merci d'éclairer ma lanterne ;)
@zebden : le coup du test pour IE est juste là pour illustrer le fait que l'on ne valide pas une intégration en se basant sur un navigateur :).
Pour ce qui est du CSS atomique, je comprends l'approche. J'ai un collègue qui procède ainsi, je n'aime pas je ne trouve pas ça propre. Ok pour un rush c'est pratique, car on a du réutilisable partout. Normal c'est extrême.
Après comme partout ça dépend. Cela dit, je n'aime pas me retrouver avec une myriade de classes, je me limite en général à quelques classes atomiques :
- left | rigth | center
- clear
- alignleft | alignright | aligncenter
- hidden
@HugoGiraudel je ne mets jamais de '!important' dans mes intégrations et je ne rencontre pas de soucis. Alors, oui il ne faut jamais s'en servir. Mais, on ne doit aussi jamais dire jamais n'est-ce pas ?
@newick Pourquoi ? Car au fil des années j'ai pris cette habitude. C'est un choix esthétique, ça me permet aussi de "fermer" la classe.
Orthographe : nomage / nommage
Pense à ajouter que tes indentations valent aussi pour les MQ avec un exemple.
Pour le !important, effectivement, s'en passer le plus possible est bien, l'interdire totalement... ne soyons pas extrémiste. Ceci dit, pour faire passer un message, il faut parfois être un poil extrémiste, hein nos amis les tableaux ? :)
Perso, j'ai franchi le pas sur les classes atomiques et je ne reviendrai en arrière pour rien au monde : c'est à utiliser intelligemment, et NON ce n'est PAS du style en ligne. Tu indiques toi-même que tu te sers de qq unes.
C'est réutilisable (DRY) et ça évite de faire enfler une CSS inutilement pour quelques bricoles.
@nico3333fr merci c'est patché. +1 pour tes tableaux :)
Ce n'est pas du style inline oui mais, ça y ressemble beaucoup trop je trouve. C'est trop extrême, j'utilise quelques helpers oui, mais parce que ceux-ci vont être apparaître très souvent dans le code.
@dhoko Franchement, bien utilisé (comme toujours) le CSS atomique me semble plus simple et plus adapté et pas pour du Rush au contraire. Maintenant, la prog n'est jamais une science exacte au niveau des pratiques. Mais pour aller plus loin, voici les helpers que moi j'utilise :
.d-table { display:table; }
.d-table-cell { display:table-cell; vertical-align:top; }
.d-inline { display:inline-block; vertical-align:top; }
.ie7 .d-inline { display:inline; zoom: 1; }
.d-block { display:block; }
.fleft { float:left; }
.fright { float:right; }
.reset { clear:both; }
.b { font-weight:bold; }
.i { font-style:italic; }
.nb { font-weight:normal; }
.up { text-transform:uppercase; }
.border-box *, .border-box { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; }
.hidden { display:none; }
.m-auto { margin:0 auto; }
.cap{ text-transform: capitalize; }
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {display: block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}
.tc { text-align: center; }
.tl { text-align: left; }
.tr { text-align: right; }
.br5 { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.br3 { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.br100 { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; }
.c1 { color: #fff; }
.c2 { color: #717171; }
.c3 { color: #154452; }
.c4 { color: #bababa; }
.c5 { color: #383838; }
.c6 { color: #4a4a4a; }
.c7 { color: #747474; }
.c8 { color: #535353; }
.c9 { color: #242424; }
.cc, .bleu { color: #0b9bd5; }
.cd { color: #bc9d60; }
.cd-hover:hover { color: #bc9d60; }
.bgc1 { background-color: #fff; }
.bgc5 { background-color: #373737; }
.bgc8 { background-color: #000; }
.bgcc { background-color: #0b9bd5; }
.bgcd { background-color: #bc9d60; }
Selon le contexte, je choisis ou non des les utiliser ou pas. @HugoGiraudel parlait de thème , je suis d'accord la dessus, mais on peut avoir un thème général pour un type de bloc (je parle même pas au niveau site entier) et y ajouter ces classes raccourcies/helpers selon le contexte. Je vais utiliser rarement la class "b" par exemple préférant le mettre justement dans un thème de bloc.
P.S : CELUI QUI ME DIT QU'IL N'Y A PLUS BESOIN DE PRÉFIXES POUR LES BORDER-RADIUS, JE LE CRUCIFIE ! je le sais, je suis juste old school ! :-D
@newick l'absence de ";" à la dernière ligne du css est une technique d'optimisation du poids du fichier qui est proposé par certains minifieurs (par ex: http://www.minifycss.com/css-compressor/). Cela n’empêche pas le css de bien s'appliquer mais c'est une habitude à prendre, car il arrive vite que l'on oublie de le remettre si on ajoute une ligne en fin de classe.
@zebden Ma foi après c'est un choix. Moi je vois ça dans une inté .bgc8 je ne comprends pas, je ne sais pas quel est le contexte etc. J'ai besoin d'avoir un dom qui me parle.