CSS peut être un langage de balisage extrêmement puissant pour les concepteurs.
Cependant, le CSS produit est aussi bon que les principes suivis par le concepteur qui crée le code.
Bien que vous puissiez penser que n'importe qui peut créer des CSS, il y a une grande différence entre écrire des CSS et produire des CSS de qualité supérieure.
Pour vous assurer que vous êtes sur la bonne voie, voici huit principes CSS que tout concepteur de sites Web doit suivre.
Si vous voulez investir du temps dans le codage CSS, il est logique de prendre le temps de valider le code que vous créez. Cependant, il ne cesse jamais de m'étonner combien de designers passent cette étape essentielle. La validation de votre code vous permet de résoudre tous les problèmes et d’assurer le bon fonctionnement de vos visiteurs.
En plus de valider votre fichier CSS, vous devez également valider vos fichiers HTML ou XHTML. Avant de valider ces fichiers, assurez-vous d'avoir pris le temps de déclarer le code HTML ou XHTML DOCTYPE approprié. Déclarer votre DOCTYPE peut sembler être un détail banal, mais je ne peux pas compter combien de discussions j'ai eues avec des concepteurs frustrés qui continuaient à avoir des problèmes avec un design, seulement pour découvrir que c'était parce qu'ils avaient déclaré un DOCTYPE obsolète (ou n'avait pas déclaré un DOCTYPE du tout).
Que vous travailliez sur un projet seul ou avec une équipe de concepteurs, il est important de documenter le travail que vous créez. Vous pouvez probablement voir pourquoi cela serait important dans le contexte d'une équipe de conception, mais vous vous demandez peut-être pourquoi cela serait important si vous travaillez sur un projet solo. Eh bien, il y a toujours une chance que votre projet solo finisse par devenir un projet de groupe, et si cela se produit, il est beaucoup plus facile d'avoir de la documentation sous la main que d'essayer de revenir en arrière et de le créer. Cependant, même si votre projet reste un one man show, vous serez peut-être surpris de voir à quel point la documentation est utile lorsque vous décidez de revoir un projet après ne l'avoir pas examiné pendant un an.
Lorsqu'il s'agit de créer de la documentation pour le code CSS, l'impulsion naturelle de la plupart des concepteurs est de l'ajouter directement à leur code en le plaçant entre / * et * /. Comme beaucoup de principes de cette liste, il n'y a rien techniquement incorrect à adopter cette approche. Cependant, l'ajout de commentaires directement dans votre code CSS augmentera la taille du fichier, ce qui peut augmenter les temps de chargement et ralentir les performances globales d'un site Web. Si vous êtes sérieux au sujet de l'écriture de code CSS de premier ordre, vous devriez documenter votre code, mais dans un fichier distinct.
Bien que je pense honnêtement qu'il est plus efficace de documenter dans un fichier séparé, je sais qu'il y a beaucoup de fichiers qui ne sont tout simplement pas d'accord avec cette pratique. Si vous refusez de documenter dans un fichier séparé, la meilleure chose à faire est d'utiliser un compresseur CSS (en fait, même si vous choisissez d'utiliser un fichier séparé pour la documentation, vous pouvez toujours utiliser un compresseur CSS). Vous pouvez l'utiliser Compresseur CSS à partir de CSS Drive Gallery, ou simplement rechercher Google pour trouver un autre compresseur CSS.
Bien que les hacks soient devenus une pratique acceptable pour beaucoup de membres de la communauté CSS, cela ne signifie pas que le «piratage CSS» est un principe que vous devriez suivre. Le problème avec cette approche de la conception est que cela signifie que vous recherchez intentionnellement une solution compliquée aux problèmes. Alors que vous pensez peut-être qu'un ou deux piratages ne font du mal à personne de temps en temps, vous mettre dans la tête de «piratage» des problèmes que vous rencontrez peut avoir un impact négatif sur votre mentalité de conception globale.
Éviter le piratage est un conseil que les experts dispensent depuis un certain temps. Vous pouvez revenir jusqu'en 2003 et voir que Peter-Paul Koch (qui est un développeur et auteur accompli) avertit les concepteurs des implications des hacks CSS depuis un certain temps: «Le monstre de la complexité est réapparu, au centre du développement Web moderne. De nos jours, il ne se manifeste pas comme une table imbriquée à l'infini, mais comme un hack CSS sans cesse compliqué. "
Parce que les div offrent un haut niveau de flexibilité, il peut être facile de les utiliser de manière excessive. En fait, ce problème est devenu si commun parmi les concepteurs que la communauté CSS a créé son propre terme pour étiqueter ce problème: divitus. Pour éviter d'être victime de cette condition, avant d'utiliser automatiquement une balise div, vous devriez toujours vous demander s'il existe une balise HTML réelle qui fera le travail pour vous. Par exemple, au lieu de créer plusieurs div d'entêtes, pourquoi n'utilisez-vous pas les balises d'en-tête HTML déjà disponibles, telles que H1 et H2?
Une fois que vous commencez à prendre en compte le problème des divs, vous verrez rapidement les avantages de l'utilisation de la balise HTML appropriée au lieu de créer automatiquement un nouveau div. Non seulement cela réduira la quantité de code que vous devez créer (ce qui vous fera gagner du temps, tout en réduisant le temps de chargement de votre site Web), mais cela donnera également à votre code une structure plus logique.
Si vous demandez à un concepteur nouveau ou inexpérimenté comment ils décident de nommer leurs classes, ils pourraient dire que cela n’a pas vraiment d’importance. Bien que cela soit techniquement vrai, il s’agit d’une vue à très courte vue de la dénomination des classes CSS. Bien qu'il existe des concepteurs qui ne se préoccupent pas des noms de classe CSS, il y a aussi des concepteurs qui pensent à leurs noms de classe, mais ils adoptent une mauvaise approche.
Comme je ne veux pas simplement vous battre avec des exemples théoriques, laissez-moi vous expliquer cela en termes concrets. Disons que vous créez une classe pour contrôler l'une des cases de votre page. La boîte sera située au bas de la page, elle contiendra les commentaires des lecteurs et vous utiliserez CSS pour lui donner un arrière-plan clair et contrôler le remplissage. Au lieu de nommer cette .tan-box (ce que feraient de nombreux concepteurs bien intentionnés), nommez-la .comment-box. La raison pour laquelle .comment-box est un meilleur nom de classe que .tan-box est que si vous décidez de changer la couleur d'arrière-plan en bleu sur la route (ou décidez de déplacer la zone du bas de la page vers une autre zone) , vous ne serez pas confus, vous ou tout autre concepteur qui regarde le CSS pour ce site.
Bien que la sténographie puisse être source de confusion pour les concepteurs qui commencent tout juste à écrire leur propre code CSS, une fois que vous vous êtes habitué au style de sténographie, cela devient l'une des pratiques les plus efficaces en tant que concepteur .
L'utilisation de la sténographie présente de nombreux avantages. D'une part, cela réduit la taille de vos fichiers, ce qui réduira le temps de chargement de votre site Web. En outre, cela facilite non seulement l’organisation de votre code, mais simplifie également la modification ultérieure de votre code. Au fur et à mesure que vous vous adaptez à la sténographie, vous devriez également écrire votre code sur une seule ligne (au lieu de répartir les déclarations sur plusieurs lignes).
En tant que concepteur, vous êtes beaucoup plus enclin techniquement que quiconque dans la population en général. Parce que vous faites partie d'une minorité qui vit et respire la technologie, il existe de nombreuses habitudes auxquelles la plupart des gens n'ont jamais pensé. Par exemple, vous avez probablement fait tout votre possible pour éliminer autant de la «trace papier» que possible dans votre vie. Cependant, il est important de se rappeler que la majorité de la population imprime toujours des informations régulièrement. Bien que vous marquiez probablement un élément avec del.icio.us lorsque vous souhaitez l'enregistrer pour vous y référer ultérieurement, l'internaute moyen imprimera cette même page.
Étant donné que les utilisateurs impriment toujours des informations sur Internet, il est important d'utiliser CSS pour rendre votre imprimante conviviale . Les visiteurs apprécieront tout le travail que vous avez fait pour créer une belle mise en page pour le site Web qu'ils visitent, mais lorsqu'ils décident d'imprimer une page à partir de ce site Web, ils vous apprécieront davantage lorsqu'ils réalisent que leur impression ne contient que le contenu. texte qu'ils veulent (et aucun des graphismes incroyables qui ont fière allure sur leur ordinateur, mais gaspiller une tonne d'encre de leur imprimante). Étant donné que le CSS permet de s'assurer que le contenu est correctement formaté lors de son impression, un véritable concepteur n'a aucune raison de négliger cette étape du processus de conception.
Vous pensez peut-être que ce dernier principe semble cliché, mais c'est sans doute le plus important de la liste. Si vous êtes dédié à être le meilleur concepteur possible, vous devez vous assurer que vous travaillez en permanence à élargir vos connaissances de CSS . Heureusement, cela est facile à faire si vous désirez et souhaitez vous engager dans la poursuite de votre formation CSS. Bien que la formation continue puisse être une tâche difficile pour des individus dans de nombreux secteurs qui ne sont pas de nature technique, Internet étant littéralement la base du CSS, la quantité de ressources gratuites dont vous pouvez tirer des leçons est littéralement infinie. Si vous pensez que j'exagère, tapez simplement "CSS" dans Google et vous verrez qu'il y a 483 000 000 de résultats à parcourir.
En plus d'apprendre des ressources en ligne (et des ressources d'impression si vous préférez), vous pouvez apprendre beaucoup des autres concepteurs de CSS. Que vous analysiez leur travail, que vous écoutiez les conseils qu'ils donnent en ligne ou que vous leur parliez en personne, vous pouvez gagner beaucoup en interagissant et en collaborant potentiellement avec d'autres concepteurs qui s'engagent à suivre les principes de top CSS conception et production de pièces étonnantes.