Nettoyer le code : pourquoi les éléments essentiels HTML/CSS sont toujours importants

Au cours de mes 15 années d'expérience dans le développement Web, j'ai travaillé avec diverses entreprises, du niveau de l'entreprise aux startups, et j'ai travaillé avec de très nombreux collègues ingénieurs en logiciel en cours de route. L'un des problèmes les plus courants et les plus importants que j'ai rencontrés dans mes projets a été l'incapacité d'écrire du code propre et facile à comprendre .

Même les meilleurs développeurs des meilleures entreprises ne suivent pas toujours les meilleures pratiques et n'écrivent pas de code qui peut être nettoyé et optimisé.

Les conséquences d'un code désordonné et sale

Pour citer un article de blog ancien mais toujours pertinent sur les principes du code propre :

Le code source s'apparente à de la dette financière. Supposons que vous souhaitiez acheter une maison pour y vivre. La plupart des gens n'ont pas les moyens financiers de payer comptant pour une maison, alors vous contractez une hypothèque à la place. Mais l'hypothèque elle-même n'est pas une bonne chose à avoir. C'est un passif. Vous devez payer des intérêts sur votre dette tous les mois…

Il en va de même pour le développement Web. Le code a des coûts permanents. Il faut le comprendre, il faut le maintenir, il faut l'adapter à de nouveaux objectifs au fil du temps. Plus vous avez de code, plus ces coûts permanents seront importants. Il est dans notre intérêt d'avoir le moins de code source possible tout en étant en mesure d'atteindre nos objectifs commerciaux.

Mais ne nous attardons pas sur l'abstrait. Cet article couvrira les principes essentiels du code propre, les différentes techniques utilisées pour organiser le code et comment le rendre plus maintenable, évolutif et plus facile à déboguer.

Un code de qualité commence par un style de code de base, s'étendant aux meilleures pratiques lors de l'écriture de grandes applications en HTML/CSS avec de nombreux blocs réutilisables, et nous discuterons également des conventions de dénomination pour créer une plus grande lisibilité implicite ainsi que des frameworks tiers et de leurs meilleures pratiques.

Au moment où vous aurez fini de lire ceci, vous devriez avoir une bonne compréhension des bases du code de qualité et de la façon de rendre votre code HTML et CSS plus facile à maintenir et à étendre.

L'essentiel du style de code

Commençons par les bases d'un bon code HTML et CSS : validité W3C, conventions de dénomination, structure des fichiers, etc.

Soyez conscient de la structure dès le premier jour.

Si vous envisagez de développer une grande application, vous devez vous occuper de la structure des fichiers. Cela peut, ou plutôt devrait ressembler à ceci :

Utilisez des validateurs pour vérifier votre code.

Essayez de toujours utiliser des validateurs HTML et CSS.

Mauvais code :

 <figure> <div> <img src="demo.jpg" alt=""> <figcaption> <h2>Hello world</h2> </figcaption> </div> </figure> <picture> <source src="demo.webp" type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <header> <summary>Expand details</summary> </header> <p>All content goes here</p> </details>

 p { font: 400 inherit/1.125 serif; }

Bon code :

 <figure> <img src="demo.jpg" alt=""> <!-- figcaption should be child of element figure element, not div --> <figcaption> <h2>Hello world</h2> </figcaption> </figure> <picture> <!-- source should have srcset attribute --> <source type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <!-- summary is not allowed as child of header --> <summary>Expand details</summary> <p>All content goes here</p> </details>

 p { font-weight: 400; font-size: inherit; line-height: 1.125; font-family: serif; }

Utilisez un texte alternatif sur les balises <img> pour la validité des principes de code propre.

Cet attribut joue un rôle essentiel pour le référencement, les moteurs de recherche, les robots d'exploration Web, les lecteurs d'écran, etc.

Mauvais code :

 <img src="demo.jpg">

Bon code :

 <img src="demo.jpg" alt="This is placeholder of the image">

Utilisez kebab-case (spinal-case).

Pour les noms, essayez d'utiliser kebab-case ( spinal-case ) et non camelCase ou under_score . Utilisez under_score uniquement lorsque vous utilisez BEM, bien que si vous utilisez Bootstrap, il est préférable de rester cohérent et d'aller avec - comme délimiteur.

Mauvais code :

 <section class="section_featured_Listing"> <h1 class="largeTitle">H1 title</h1> </section>

Bon code :

 <section class="section-featured-listing"> <h1 class="large-title">H1 title</h1> </section>

kebab-case est plus lisible que camelCase et under_score .

Utilisez des noms significatifs qui peuvent être compris par n'importe qui, soyez courts.

Les noms des classes doivent ressembler à .noun-adjective .

Essayez d'utiliser des noms communs de classes au lieu d'écrire des noms spécifiques au contenu. Cela rend le code plus lisible

Mauvais code :

 <div class="team-wrapper"> <button class="large-button-green"></button> <p class="greenText-john-smith-description"></p> <div class="white-bg"></div> </div>

Bon code :

 <div class="section-team"> <button class="btn-lg btn-success"></button> <p class="text-success"></p> <div class="bg-white"></div> </div>

N'écrivez pas d'attributs de type pour les feuilles de style et les scripts en HTML5.

Ils ne sont pas requis avec HTML5, mais sont requis par les normes W3C en HTML4/XHTML.

Mauvais code :

 <link type="text/css" rel="stylesheet" href="../styles.css"> <script type="text/javascript" src="..//main.js"></script>

Bon code :

 <link rel="stylesheet" href="styles.css"> <script src="app.js"></script>

Utilisez des classes spécifiques si nécessaire.

Gardez le sélecteur CSS plus précis et sélectionnez les éléments dont vous avez besoin ; essayez de ne pas mentionner leurs parents si ce n'est pas nécessaire. Cela permettra au code de s'afficher plus rapidement et de supprimer tous les obstacles de gestion à l'avenir

Mauvais code :

 section aside h1 span { margin-left: 25%; }

Bon code :

 .left-offset { margin-left: 25%; }

Bien que l'application d'une classe à l'élément ciblé puisse créer plus de code dans HTML, cela permettra au code de s'afficher plus rapidement et supprimera tous les obstacles de gestion.

Ajoutez une classe à l'élément parent si vous souhaitez donner un autre style au même bloc.

Si vous devez utiliser le même bloc mais avec un style différent, essayez de garder le code HTML aussi intact que possible. Ajoutez simplement une classe à l'élément parent et appliquez tous les nouveaux styles aux enfants de cette classe en CSS.

Mauvais code :

 <article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”another-article”> <h1 class=”other-styling-title”>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article>

 article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } } .another-article { padding-bottom: 30px; border-bottom: 4px solid #ccc; } h1.other-styling-title { font-size: 20px; }

Bon code :

 <article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”other-styling”> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article>

 article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } &.other-styling { padding-bottom: 30px; border-bottom: 4px solid #ccc; /* you will have less classes */ h1 { font-size: 20px; } } }

Déposez des unités à partir de valeurs nulles.

L'ajout de l'unité est inutile et n'apporte aucune valeur supplémentaire. Il n'y a aucune différence entre 0px, 0em, 0% ou toute autre valeur nulle. Les unités ne sont pas importantes car la valeur est toujours zéro.

Mauvais code :

 div { margin: 20px 0px; letter-spacing: 0%; padding: 0px 5px; }

Bon code :

 div { margin: 20px 0; letter-spacing: 0; padding: 0 5px; }

N'écrivez pas border-bottom en CSS si vous pouvez ajouter une balise hr .

Utilisez la balise hr au lieu d'écrire un nouveau sélecteur et d'ajouter des styles de bordure en CSS. Cela rend le code plus basé sur le balisage, et c'est ce que nous recherchons.

Mauvais code :

 <p class="border-bottom">I want this section to have a border.</p> <p>Lorem ipsum</p>

 .border-bottom { border-bottom: 1px solid #000; }

Bon code :

 <p>I want this section to have a border.</p> <hr> <p>Lorem ipsum</p> // If necessary change hr variable in bootstrap

Utilisez le sélecteur A > B.

Il est très utile d'utiliser le sélecteur A > B , qui applique les règles uniquement aux enfants directs, dans ce cas vous n'aurez pas à réinitialiser les styles de tous les autres enfants qui n'ont pas besoin de ce style. Par exemple, c'est très utile pour coder des menus imbriqués. Vous n'aurez pas besoin de redéfinir les styles de sous-menu.

Mauvais code :

 <ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul>

 ul li { list-style-type: none; } li ul li { /* redefine to default value */ list-style-type: disc; }

Bon code :

 <ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul>

 ul > li { list-style-type: none; }

Comment écrire du HTML propre

Passant au HTML, la priorité sera d'assurer un front-end robuste et facile à maintenir.

Essayez d'avoir un front-end aussi basé que possible sur le balisage.

Faites en sorte que votre code frontal soit basé sur le balisage au lieu d'écrire trop de CSS.

Cela aidera les moteurs de recherche et rendra votre code plus lisible, améliorant potentiellement les classements de recherche et l'expérience utilisateur.

Mauvais code :

 <div class="main-content"> <p class="content-title">Main text title</p> <img src="http://via.placeholder.com/150x150" alt="example"> <p class="image-description">Here is image description</p> </div>

Bon code :

 <main> <h1>Main text title</h1> <figure> <img src="http://via.placeholder.com/150x150" alt="example"> <figcaption> Here is image description </figcaption> </figure> </main>

Évitez d'utiliser des wrappers inutiles en HTML.

Essayez de ne pas utiliser d'éléments wrapper inutiles en HTML. Avoir des tonnes d'éléments <div> et <span> appartient au passé. Garder les choses granulaires et linéaires vous permet d'obtenir un code minimal (voir le point suivant).

Mauvais code :

 <section class=”container”> <div class=”row”> <div class=”col-xs-12”> <div class=”inner-wrapper”> <span>Unnecessary br tags</span> </div> </div> </div> </section>

Bon code :

 <section class=”container”> <p>Unnecessary br tags</p> </section>

Utilisez des classes atomiques pour le style.

N'utilisez pas de couleurs ou de tailles de police personnalisées (si la couleur ou la taille de police n'est pas dans le framework, ajoutez simplement vos classes atomiques). Les classes atomiques sont des unités de style simples et à usage unique. Tout comme les styles en ligne, les styles Atomic n'appliquent qu'une seule déclaration de style.

Mauvais code :

 <h1>Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1> Another h1 text</h1> <p>Paragraph inside div without class</p> </section>

 h1 { color: red; } section > h1 { color: blue; }

Bon code :

 <h1 class="text-red">Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1 class="text-blue"> Another h1 text</h1> <p>Paragraph inside div without class</p> </section>

 .text-red { color: red; } .text-blue { color: blue; }

Essayez de conserver des classes granulaires et atomiques et utilisez-les si nécessaire. En conséquence, votre front-end sera davantage basé sur le balisage.

Utilisez des éléments sémantiques.

L'utilisation de la sémantique offre une meilleure structure et facilite la lecture du code et du contenu.

Mauvais code :

 <span class="heading"><strong>Welcome</strong></span> <span>This is unnecessary br tag.</span>

Bon code :

 <h1>Welcome</h1> <p>This is unnecessary br tag.</p>

Utilisez des balises HTML5.

Les nouvelles balises vous donnent plus de liberté d'expression et permettent de standardiser les éléments communs, ce qui améliore le traitement automatisé des documents. Voici une liste solide de tous les éléments. J'ai découvert que beaucoup de développeurs utilisent toujours beaucoup de <div> et <span> , mais veuillez d'abord vérifier ici quelles balises correspondent logiquement à votre contexte :

Mauvais code :

 <div class="article-blue"> <div class="article-title-red">HTML 4 title</div> <div class="content"> Semantics <span class="boldtext">are</span> important. </div> </div>

Bon code :

 <article> <h1>HTML5 title</h1> <p> Semantics <strong>are</strong> important. </p> </article>

Conclusion : apprenez et utilisez de nouveaux éléments dans HTML5. Cela vaut bien l'effort !

CSS : Nettoyer le code et les préprocesseurs

En matière de CSS, il est difficile de ne pas commencer par quelques conseils peu originaux mais impertinents :

Utilisez un préprocesseur CSS.

Sass est le langage d'extension CSS de qualité professionnelle le plus mature, le plus stable et le plus puissant au monde.

Il existe deux syntaxes disponibles pour Sass. Le premier, connu sous le nom de SCSS (Sassy CSS) et utilisé tout au long de cette référence, est une extension de la syntaxe de CSS. La deuxième et plus ancienne syntaxe, connue sous le nom de syntaxe indentée (ou parfois simplement "Sass"), fournit une manière plus concise d'écrire CSS.

Regroupez vos sélecteurs : utilisez @extend dans SASS.

En regroupant vos sélecteurs ou en utilisant @extend dans SASS, vous devriez aider à garder votre code SEC (ne vous répétez pas).

Mauvais code :

 p { font-size: 22px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font-size: 41px; color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

Bon code :

 .font-smoothing { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { font-size: 22px; @extend .font-smoothing; } h1 { font-size: 22px; @extend .font-smoothing; }

Utilisez des unités rem au lieu de pixels dans CSS.

Utilisez les REM pour les tailles et les espacements, par exemple les tailles de police qu'il crée en fonction de la font-size de l'élément racine <html> . Ils vous permettent également de redimensionner rapidement un projet entier en modifiant la taille de la police racine (par exemple à une certaine requête multimédia/taille d'écran).

Vous écrirez moins de code pour les vues réactives :

Mauvais code :

 p { font-size: 22px; padding: 10px; } @media (max-width: 767px) { p { font-size: 16px; padding: 5px; } }

Bon code :

 html { font-size: 14px; } @media (max-width: 767px) { html { font-size: 12px; } } p { font-size: 1.6rem; padding: 1rem; }

Essayez d'éviter d'avoir une hauteur ou une largeur fixe en CSS.

Essayez d'éviter d'avoir une hauteur ou une largeur fixe en CSS. Les hauteurs peuvent être générées en ayant un contenu interne + des rembourrages et les largeurs peuvent être définies par un système de grille (utilisez une grille imbriquée si nécessaire).

Mauvais code :

 <footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer>

 #footer { height: 130px; }

Bon code :

 <footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer>

 #footer { padding-top: 23px; padding-bottom: 47px; }

Assurez-vous d'utiliser l'élément parent une seule fois dans SCSS.

Lorsque vous utilisez un préprocesseur CSS et que vous prévoyez d'écrire un style pour n'importe quelle section, assurez-vous d'utiliser l'élément parent dans CSS une seule fois et d'inclure tous les éléments enfants et les requêtes multimédias entre ses crochets. Cela vous permettra de trouver et de modifier facilement l'élément parent principal en un seul endroit lorsque vous apporterez des modifications à l'avenir.

Mauvais code :

 .section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } } @media (max-width: 767px) { .section-parent-class { footer { padding: .5rem; } } }

Bon code :

 .section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } footer { @media (max-width: 767px) { padding: .5rem; } } }

Pensez aux éléments qui seront affectés avant d'écrire une règle CSS.

Réfléchissez toujours aux éléments qui seront affectés avant d'écrire une règle CSS. Si vos modifications ne seront pas courantes, écrivez vos règles de manière à n'affecter qu'un certain élément et rien d'autre.

Mauvais code :

 /* Commonly used class */ .title { color: #008000; }

Bon code :

 /* Specify it not to affect other titles */ .section-blog .title { color: #008000; }

Essayez de rechercher les règles et variables CSS existantes avant d'en écrire de nouvelles.

Recherchez toujours les règles existantes qui correspondent au style souhaité, à la fois dans le CSS personnalisé et dans le cadre. Seulement s'il n'y a rien d'adéquat, passez à l'écriture d'un nouveau.

Ceci est particulièrement important lorsque vous travaillez avec de grandes applications.

Mauvais code :

 .jumbotron { margin-bottom: 20px; }

Bon code :

 // change $jumbotron-padding from _variables.scss .jumbotron { margin-bottom: $jumbotron-padding; }

Utilisez des règles spécifiques.

Si l'arrière-plan a une propriété, nous spécifions cette propriété, mais s'il a des propriétés d'arrière-plan différentes, nous pouvons lui donner une déclaration.

Mauvais code :

 .selector { background: #fff; }

Bon code :

 .selector { /* This way background image will not be overwritten if there is any */ background-color: #fff; }

Utilisez des propriétés et des valeurs abrégées.

Faites de votre mieux pour utiliser davantage de propriétés et de valeurs abrégées. En utilisant une propriété abrégée, vous pouvez écrire des feuilles de style concises et, le plus souvent, beaucoup plus lisibles, ce qui vous fait gagner un temps et une énergie précieux.

Mauvais code :

 img { margin-top: 5px; margin-right: 10px; margin-bottom: 25px; margin-left: 10px; } button { padding: 0 0 0 20px; }

Bon code :

 img { /* Shorthand style */ margin: 5px 10px 25px; } button { /* Don't play with shorthand too much */ padding-left: 20px; }

Utilisez em au lieu de px pour la hauteur de ligne.

L'utilisation des unités em et px nous donne de la flexibilité dans nos conceptions et la possibilité de redimensionner les éléments de haut en bas au lieu d'être bloqués avec des tailles fixes. Nous pouvons utiliser cette flexibilité pour rendre nos conceptions plus faciles à ajuster pendant le développement et plus réactives, ainsi que pour permettre aux utilisateurs de navigateurs de contrôler l'échelle globale des sites pour une lisibilité maximale.

Mauvais code :

 p { font-size: 12px; line-height: 24px; }

Bon code :

 p { font-size: 12px; line-height: 2em; /* or just line-height: 2; */ }

Utilisez les classes Bootstrap autant que possible.

Bien que cette règle puisse s'appliquer aux frameworks d'interface utilisateur en général, j'utilise Bootstrap comme exemple, car il s'agit de la bibliothèque de composants frontaux la plus populaire au monde.

Bootstrap vous permet d'utiliser de nombreuses classes prêtes à l'emploi, ce qui facilite votre travail. Essayez d'utiliser autant que possible les classes Bootstrap pour créer davantage de balisage HTML.

Mauvais code :

 <section class="without-bootstrap"> <div class="first-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="second-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>

 .first-column, .second-column { width: 25%; float: left; padding-left: 15px; padding-right: 15px; } ...

Bon code :

 <section class="row"> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>

Personnalisez correctement votre framework.

Bootstrap s'appuie sur le fichier variables.scss, qui vous permet de configurer et de personnaliser facilement votre frontal sans écrire une seule ligne de code. Sinon, si vous allez écrire manuellement toutes les personnalisations par vous-même, il vaut mieux ne pas utiliser de framework du tout.

Certains développeurs évitent de changer variables.scss, pensant qu'ils pourront toujours mettre à niveau Bootstrap vers une nouvelle version sans trop de tracas, mais cela peut être une tâche fastidieuse. Même les mises à jour mineures obligent les développeurs à lire le journal des modifications, à parcourir tous les balisages et CSS, et à migrer manuellement vers la nouvelle version.

Mauvais code :

 navbar { padding: 20px 10px; } .carousel-indicators { li { width: 6px; height: 6px; margin-right: 3px; margin-left: 3px; } }

Bon code :

 $navbar-padding-y: ($spacer / 2) !default; $navbar-padding-x: $spacer !default; $carousel-indicator-width: 30px !default; $carousel-indicator-height: 3px !default; $carousel-indicator-spacer: 3px !default;

N'écrasez pas .container width.

Essayez de ne pas écraser la largeur de .container . Essayez plutôt d'utiliser un système de grille ou modifiez simplement la largeur du conteneur dans _variables.scss . Si vous avez besoin de diminuer sa largeur, utilisez simplement max-width au lieu de width. Dans ce cas, .container de Bootstrap restera intact dans les vues réactives.

Mauvais code :

 .container { @media (min-width: $screen-lg-min) { width: 1300px; } }

Bon code :

 // change $container-lg from _variables.scss .container { @media (min-width: $screen-lg-min) { width: $container-lg; } }

Utilisez les classes Bootstrap 4 et écrivez moins de CSS.

Commencez à utiliser Bootstrap 4, même s'il est en version bêta. Il comprend de nombreuses nouvelles classes qui vous aideront à créer des mises en page plus rapidement, en particulier Flexbox et les entretoises.

Mauvais code :

 <div class="flex-ex"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> <div class="flex-ex flex-reverse"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div>

 .flex-ex { display: flex; > div { padding: 2px; } &.flex-reverse { flex-direction: row-reverse; } li { list-style: none; padding: .5rem; } }

Bon code :

 <ul class="list-unstyled list-inline d-flex flex-row"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul> <ul class="list-unstyled list-inline d-flex flex-row-reverse"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul>

Maintenant, nous pouvons attribuer des classes à un élément pour supprimer toutes les bordures ou certaines bordures.

Mauvais code :

 <div class="border-example2 py-5"> <span class="border0"></span> <span class="border-top0"></span> <span class="border-right0"></span> <span class="border-bottom0"></span> <span class="border-left0"></span> </div>

 border-example2 { > span { width: 100px; height: 100px; display: inline-block; margin: .50rem; background-color: #e1e1e1; border: 1px solid; &.border0 { border: none; } &.border-top0 { border-top: none; } &.border-right0 { border-right: none; } &.border-bottom0 { border-bottom: none; } &.border-left0 { border-left: none; } } }

Bon code :

 <div class="border-example py-5"> <span class="d-inline-block m-2 border-0"></span> <span class="d-inline-block m-2 border-top-0"></span> <span class="d-inline-block m-2 border-right-0"></span> <span class="d-inline-block m-2 border-bottom-0"></span> <span class="d-inline-block m-2 border-left-0"></span> </div>

 .border-example { > span { width: 100px; height: 100px; background-color: #e1e1e1; border: 1px solid; } }

Utilisez .col-sm-X si .col-md-X et .col-lg-X ont la même valeur pour X.

N'écrivez pas .col-md-X et .col-lg-X si .col-sm-X a la même valeur pour X. Par exemple, il n'est pas nécessaire d'écrire .col-lg-10 car lorsque nous écrivons .col-md-10 , nous y incluons automatiquement .col-lg-10 .

Mauvais code :

 <ul class="press-list list-inline row"> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>

Bon code :

 <ul class="press-list list-inline row"> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>

N'utilisez pas .col-xs-12 .

N'utilisez pas .col-xs-12 car si aucun .col-xs-X n'est attribué, ce sera .col-xs-12 par défaut.

Mauvais code :

 <section> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> </div> <div class="row text-center"> <div class="col-md-6 col-xs-12"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>

Bon code :

 <section class="text-center"> <div class="container"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> <div class="row"> <div class="col-md-6"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>

N'utilisez pas reset.css ; utilisez normalize.css à la place.

Si vous utilisez Bootstrap, normalize.css y est déjà inclus, inutile de l'inclure deux fois.

Suivez les directives, même si elles ne constituent pas une pratique exemplaire.

Par souci de cohérence, il est préférable de toujours suivre les règles et directives avec lesquelles vous avez commencé (qu'il s'agisse de nommage, de style de code ou de structure de fichier)

Emballer

J'espère que vous avez pu retenir quelque chose d'utile et que vous réfléchirez davantage à l'écriture de code HTML et CSS minimal avec les meilleures pratiques.

Pour les grandes entreprises, il est assez difficile de maintenir de grosses applications lorsqu'il y a du code désordonné. Et bien sûr, les grandes entreprises ont l'argent pour payer pour une bonne qualité. Si vous suivez les principes de codage propre, vous augmenterez vos chances de décrocher un bon emploi. Cela vaut également la peine d'évoquer l'aspect indépendant : les professionnels jonglant avec plusieurs projets et les clients doivent fournir un code propre qui peut être transmis à d'autres développeurs en un rien de temps.

J'espère développer des sujets plus avancés dans les prochains articles, car j'ai l'intention de parler de l'automatisation du processus de codage, de l'utilisation des tâches Gulp/Grunt, des Linters, des plugins Editor, des outils qui génèrent du code, des outils d'IA qui écrivent du code à votre place, et d'autres Rubriques connexes.

J'espère que cette lecture a été intéressante et informative. Bonne chance dans vos efforts de codage.

Lectures complémentaires sur le blog Toptal Engineering :

• Comment aborder les animations SVG en CSS