Comment optimiser votre CSS
Garder vos fichiers CSS de petite taille et organisés est très important, surtout si vous prévoyez de modifier votre site à l’avenir (ou si d’autres utiliseront le code, par exemple les clients).
Utilement, il existe un certain nombre de techniques différentes qui peuvent être utilisées pour faciliter l'organisation et la taille de vos fichiers CSS afin de les rendre plus simples.
Un CSS plus rationalisé vous permettra d'économiser du temps et du stress à long terme, il est donc important de bien faire les choses.
Tout d'abord, conserver une seule feuille de style, normalement nommée style.css, est un bon point de départ dans l'organisation de votre CSS. Avoir une seule feuille de style pour la majorité (voire la totalité) de votre site Web permet de tout regrouper au même endroit, ce qui simplifie le processus d'édition.
Code en style
Pour que vos fichiers CSS soient plus rationalisés, il est important de commencer par utiliser un bon éditeur de code, tel que TextWrangler sur Mac, ou Bloc-notes ++ sur Windows Cela a un certain nombre d'avantages clés. En plus d'être facile à utiliser, un programme tel que TextWrangler code également les différentes parties du code qui facilitent la progression du codage. Ceci est très utile pour vous assurer que chaque style que vous avez défini est correctement orthographié car le style ne changera pas de couleur à moins d'être reconnu par TextWrangler comme un style CSS. Les tabulations sont une autre bonne fonctionnalité de TextWrangler, qui vous permet d’ouvrir plusieurs fichiers à la fois, ce qui facilite le recoupement.
Pour rationaliser davantage vos fichiers CSS, il est judicieux d’établir une structure d’ensemble utilisée dans toutes vos feuilles de style CSS. La technique la plus utilisée est peut-être de définir l’ID ou la classe (en utilisant respectivement # ou.), Puis une parenthèse ouverte {suivie d’une nouvelle ligne en retrait pour commencer le style.
#header {width:500px;height:250px;}En suivant cette technique couramment utilisée, votre feuille de style sera plus organisée et plus facile à coder. Les techniques suivantes seront toutes aidées en vous assurant que votre mise en page est cohérente dans tous vos fichiers CSS.
Organiser par lieu
Avec n'importe quel site, le nombre d'identifiants CSS et de classes utilisés peut facilement atteindre un grand nombre. Il est donc essentiel que votre feuille de style CSS soit bien organisée. L'une des techniques extrêmement utiles consiste à commander vos identifiants et vos classes par leur emplacement sur le site Web. Par exemple; placer le style CSS pour l'en-tête vers le haut de la feuille de style et le style pour le pied de page vers le bas. En conservant cette cohérence sur tous les sites Web que vous codez chaque fois que vous ouvrez une feuille de style que vous avez créée, vous saurez exactement où chercher pour trouver le style que vous souhaitez modifier.
De plus, pour faciliter l’organisation des styles, il est judicieux de nommer vos éléments avec des noms évidents tels que en-tête, pied de page, barre latérale, contenu principal, etc. Si des éléments changent d’objectif, assurez-vous que leurs noms reflètent les changements; Avoir un élément nommé En-tête au bas de la page peut devenir très déroutant et cela rend la commande par emplacement plus difficile.
Commentaires CSS
Cela conduit à utiliser des commentaires CSS dans vos feuilles de style. Bien que pas toujours utilisé, les commentaires CSS sont très utiles pour distinguer différentes parties de la feuille de style. Si vous avez structuré vos feuilles de style avec des styles liés à l'en-tête vers le haut et inversement, vous pouvez utiliser les commentaires CSS pour marquer le début et la fin de différentes sections, telles que l'en-tête et le pied de page ou les principaux éléments de contenu.
L'utilisation des commentaires CSS est simple. N'importe où dans la feuille de style, lancez le commentaire avec /* et puis assurez-vous de terminer le commentaire avec */ . De manière cruciale, tout élément du commentaire, que ce soit du code ou du texte, ne sera pas analysé par le navigateur, ce qui rend les commentaires CSS très utiles pour laisser des notes et des descriptions relatives aux différentes parties de la feuille de style.
Deux autres utilisations des commentaires CSS pourraient peut-être consister à laisser des commentaires à vos clients. Par conséquent, s'ils souhaitaient apporter d'autres modifications à leur site à l'avenir, ils disposeraient d'un guide d'aide. De même, il peut exister des styles différents pour le même ID ou la même classe que vous souhaitez conserver pour une utilisation potentielle ou pour le test. Au lieu d'étiqueter les identifiants et les classes avec un 2 à la fin, par exemple header2 , en empêchant que le style soit analysé, il suffit d’envelopper ce qui serait header2 dans /* et */ .
En plus de garder votre feuille de style plus organisée, car l’utilisation de la technique 2 peut facilement devenir compliquée, cette technique facilite également la création de différentes versions de style dans la feuille de style, avec une facilité de redéploiement (copier-coller plutôt que changer les numéros et supprimer l'ancien style).
Cependant, bien que les commentaires CSS soient très utiles, il est également important de garder à l’esprit la taille et la longueur de la feuille de style et d’équilibrer en conséquence. Les commentaires ne doivent pas prendre plus de place que le CSS réel; ils devraient être courts et pertinents. Il est également important de garder cela à l’esprit par rapport aux différentes versions. Avez-vous vraiment besoin de toutes les versions que vous avez enregistrées dans votre feuille de style? Pourriez-vous enregistrer une feuille de style en double ailleurs? Avoir plusieurs versions de styles dans votre feuille de style peut devenir déroutant, il est donc essentiel de prendre en compte des alternatives, telles que la sauvegarde de fichiers en double.
Éviter la duplication
Une fois que la feuille de style est structurée de manière accessible, il peut être facile de détecter les doublons inutiles dans le style. En raison de la nature des CSS, les identifiants et les classes héritent automatiquement du style de leur parent, ce qui évite de devoir doubler le style. La technique la plus simple consiste peut-être à définir un certain nombre de styles de clé au début de la feuille de style. La définition de styles universels pour les liens et le texte est utile et évite de devoir constamment définir un style pour chaque ID et classe. Il s’agit notamment d’un moyen efficace de maintenir un style cohérent sur un site Web et d’avoir un impact positif sur la réduction de la taille de la feuille de style.
À l'aide d'un outil tel que l'Inspecteur de Google Chrome, il est possible de voir quels styles sont hérités et d'où, ce qui contribue à éliminer les doublons indésirables dans votre feuille de style.
Utilisez ce dont vous avez besoin
Suite à cela, pour rationaliser davantage votre CSS, considérez les classes CSS que vous implémentez. Avez-vous besoin de tous les utiliser? Il est facile de s'emballer et de définir des classes dont vous n'avez pas besoin directement mais que vous pensez pouvoir faire à l'avenir. Afin de garder votre feuille de style CSS rationalisée, les classes CSS de petite taille et organisées ne font partie intégrante du fonctionnement de votre site Web. Codez seulement ce qui est nécessaire. Pour ce faire, évitez de dupliquer les styles, comme indiqué, et n'oubliez pas de supprimer les styles inutilisés et ceux qui ne sont plus pertinents.
Conclusion
En suivant ces techniques simples, il est possible de créer des fichiers CSS mieux organisés et plus petits, faciles à naviguer et à modifier, à la fois maintenant et à l’avenir, pour vous et vos clients.
Vous avez de bons conseils pour organiser et rationaliser votre CSS? Faites le nous savoir dans les commentaires!