Les feuilles de style en cascade sont devenues le moyen standard de styliser et de mettre en page des sites Web. Les concepteurs utilisent feuilles de style pour indiquer à un navigateur comment un site Web doit être affiché en termes d'apparence, couvrant des facteurs tels que la couleur, l'espacement, les polices et bien plus encore.
Les styles CSS se déploient de deux manières:
- Inline - dans le codage de la page Web elle-même, sur une base individuelle, élément par élément
- Dans un document CSS autonome, auquel le site Web est lié
Meilleures pratiques pour CSS
Les « meilleures pratiques » sont les méthodes de conception et de création de sites Web qui se sont avérées les plus efficaces et les plus rentables pour le travail effectué. En les suivant dans CSS dans la conception de sites Web aide les sites Web à se présenter et à fonctionner aussi bien que possible. Ils ont évolué au fil des ans avec d'autres langages et technologies Web, et la feuille de style CSS autonome est devenue la méthode d'utilisation préférée.
Suivre les bonnes pratiques CSS peut améliorer votre site de plusieurs manières:
- Sépare le contenu de la conception: L'un des principaux objectifs de CSS est de supprimer les éléments de conception du HTML et de les placer dans un autre emplacement que le concepteur doit conserver. Cette pratique sert également à séparer les concepteurs des développeurs afin que chacun puisse se concentrer sur ses domaines d'expertise. Un concepteur n'a pas besoin d'être un développeur pour conserver l'apparence d'un site Web.
- Facilite l'entretien: L'un des éléments les plus négligés de la conception Web est la maintenance. Contrairement aux documents imprimés, un site Web n'est jamais "un et fait". Le contenu, la conception et la fonction peuvent et doivent évoluer au fil du temps. Avoir le CSS dans un endroit central, plutôt que saupoudré sur tout le site Web, rend les choses beaucoup plus faciles à entretenir.
- Maintient votre site accessible: L'utilisation de styles CSS aide les moteurs de recherche et les personnes handicapées à interagir avec votre site.
- Maintient votre site à jour plus longtemps: En utilisant les meilleures pratiques avec CSS, vous adhérez à des normes qui se sont avérées stables mais suffisamment flexibles pour s'adapter aux changements dans l'environnement de conception Web.
Les styles en ligne ne sont pas les meilleures pratiques
Les styles en ligne, bien qu'ils aient un objectif, ne sont généralement pas le meilleur moyen de maintenir votre site Web. Ils vont à l'encontre de chacune des meilleures pratiques:
- Les styles en ligne ne séparent pas le contenu du design: Les styles en ligne sont exactement les mêmes que les polices intégrées et autres balises de conception maladroites contre lesquelles les développeurs modernes se plaignent. Les styles n'affectent que les éléments individuels particuliers auxquels ils sont appliqués; Bien que cette approche puisse vous donner un contrôle plus granulaire, elle rend également plus difficiles d'autres aspects de la conception et du développement, tels que la cohérence.
- Les styles en ligne causent des problèmes de maintenance: lorsque vous travaillez avec des feuilles de style, il peut être difficile de déterminer où un style est défini. Lorsque vous avez affaire à un mélange de styles en ligne, intégrés et externes, vous avez de nombreux emplacements à vérifier. Si vous travaillez dans une équipe de conception Web ou si vous devez reconcevoir ou maintenir un site créé par quelqu'un d'autre, vous aurez encore plus de problèmes. Une fois que vous avez trouvé le style et que vous l'avez modifié, vous devrez le faire sur chaque élément de chaque page où il a été placé. Cela augmente astronomiquement les budgets de temps et de travail.
- Les styles en ligne ne sont pas aussi accessibles: Alors qu'un lecteur d'écran moderne ou un autre appareil d'assistance peut être capable de gérer les attributs en ligne et les balises efficacement, certains appareils plus anciens ne le peuvent pas, ce qui peut entraîner un affichage étrange du Web pages. Des caractères et du texte supplémentaires peuvent également affecter la façon dont votre page est vue par un robot de moteur de recherche, de sorte que votre page ne fonctionne pas aussi bien en termes d'optimisation pour les moteurs de recherche.
- Les styles en ligne agrandissent vos pages: Si vous souhaitez que chaque paragraphe de votre site apparaisse d'une certaine manière, vous pouvez le faire une fois avec environ six lignes de code dans une feuille de style externe. Si vous le faites avec des styles en ligne, cependant, vous devez ajouter ces styles à chaque paragraphe de votre site. Si vous avez cinq lignes de CSS, cela fait cinq lignes multipliées par chaque paragraphe de votre site. Cette bande passante et ce temps de chargement peuvent s'additionner rapidement.
L'alternative aux styles en ligne sont les feuilles de style externes
Au lieu d'utiliser des styles en ligne, utilisez des feuilles de style externes. Ils vous offrent tous les avantages des meilleures pratiques CSS et sont faciles à utiliser. Employés de cette manière, tous les styles utilisés sur votre site vivent dans un document séparé qui est ensuite lié à un document Web avec une seule ligne de code. Feuilles de style externes affecter tout document auquel ils sont attachés. Si vous avez un site Web de 20 pages dans lequel chaque page utilise la même feuille de style, ce qui est généralement le cas terminé - vous pouvez apporter une modification à chacune de ces pages simplement en modifiant ces styles une fois, en un endroit. Changer les styles en un seul endroit est plus pratique que de rechercher ce codage sur chaque page de votre site Web. Cette flexibilité facilite grandement la gestion du site à long terme.