Bonnes pratiques CSS

0 Flares Filament.io 0 Flares ×

Voici une sélection d’articles sur les bonnes (et mauvaises) pratiques dans le développement web front-end et particulièrement sur le CSS. Personnellement je les trouves très important dans la mesure où il est très aisé d’écrire du code CSS/HTML/JavaScript qui fonctionne mais qui sera impossible à maintenir et plus encore à faire évoluer.

On commence par un article passant en revue différentes techniques et conseils pour écrire du code CSS propre et maintenable : learning principles for improving your CSS [en]. L’article est simple à lire, bien détaillée et avec des exemples à chaque fois.

Le second article porte sur l’architecture CSS, c’est à dire comment organiser son code, bien choisir les sélecteurs et nommer de manière claire vos classes : CSS architecture [en]. L’article est assez long mais absolument nécessaire si vous vous apprêtez a écrire une bonne partie de votre CSS ou si vous choisissez de refactorer vos styles.

Partant avec l’objectif opposé, cet article détaille les mauvaise pratiques CSS et vous aide à identifier les points à améliorer dans votre code : code smells in CSS [en]. Si vous commencez a avoir un code CSS conséquent, lisez cet article et demandez vous si quelques heures/jours de refactoring ne vous feraient pas le plus grand bien…

Et enfin, quelques considérations sur les relations entre vos codes HTML, CSS et JavaScript. Ces trois langages sont fait pour fonctionner ensemble mais si l’on ne veut pas marcher sur des œufs à chaque fois qu’on les fait évoluer, il vaut mieux avoir des règles claires et précises sur comment les interfacer. C’est de que building relationship between CSS and JavaScript vous propose d’aborder.

 

Si vous avez des remarques ou questions sur ces articles ou leur sujet ou que vous connaissez d’autres articles similaires incontournables, les commentaires sont à vous !

Et sinon, votre code front-end, il est comment ?

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×
Cet article a été publié dans Bonnes pratiques avec les mots-clefs : , , . Bookmark the permalien. Laisser un commentaire ou faire un trackback : URL de trackback.

Laisser un commentaire

Votre e-mail ne sera jamais publié ni communiqué. Les champs obligatoires sont indiqués par *

*
*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×