Architecture CSS: Organisation de fichiers CSS - SitePoint

Habituellement, votre cadre de développement Web gère les connexions dans le cadre de ses capacités de gestion des actifs, telles que Ruby on Rails. Certains systèmes de gestion de contenu font de même, que ce soit en tant que fonctionnalité de base ou compléments. Le préprocesseur décrit au chapitre 9 facilite également la connexion. Si ni le préprocesseur ni le cadre de développement ne font partie de votre flux de travail, votre système d'exploitation aura probablement un utilitaire de connexion que vous pourrez utiliser.

Pour Mac OS X ou Linux, utilisez l'utilitaire cat pour se connecter au fichier:

cat file1.css file2.css > combined-output-file.css

à l'aide de Windows? Essayez d'utiliser l'utilitaire type:

type file1.css file2.css > combined-output-file.css

Vous pouvez également écrire vos propres scripts de connexion en bash, php, python ou autre langage de script de votre choix.

Remarque: CSS Optimisation

est un aspect de l'optimisation CSS. Il est également important de minimiser votre fichier pour supprimer les caractères et les espaces inutiles. Le chapitre 3 présente l'outil de minimisation.

Alors, combien de fichiers devez-vous utiliser? C'est l'endroit délicat. La meilleure pratique en ce moment est d'identifier votre chemin critique CSS - la quantité minimale de CSS requise pour le rendu des pages - et de l'intégrer dans votre page à l'aide de l'élément style. D'autres fichiers CSS doivent être chargés à l'aide de JavaScript. La présentation d'Addy Osmani "CSS Performance Tools" offre un excellent aperçu de cette technologie et de certains des outils que vous pouvez utiliser pour le mettre en œuvre. Voir aussi LoadCSS pour le groupe Filament.

Si votre contenu sera servi à l'aide de protocoles SPDY ou HTTP / 2, la connexion peut être inutile. En utilisant HTTP / 1.1, le navigateur télécharge des actifs en séquence; la demande suivante commence à la fin de la demande précédente. Dans ce modèle, la réduction du nombre de demandes de réseau peut améliorer les performances du site Web; cependant, SPDY et HTTP / 2 peuvent télécharger plusieurs actifs. Par conséquent, la réduction du nombre de demandes n'a pas d'avantage pratique. Cependant, il y a un coût pour envoyer plus d'octets que ce qui est nécessaire pour rendre une page. Les «HTTP / 2 Notes et compromis» de William Chan l'expliquent plus en détail. La meilleure façon est de déterminer si votre serveur fournit des services HTTP / 2, et si c'est le cas, vérifiez si davantage d'utilisateurs bénéficieront de la division de vos actifs et du chargement uniquement les actifs requis pour la page ou continueront à utiliser l'ancienne méthode. Si vous êtes intéressé à en savoir plus sur les méthodes d'optimisation des performances, le site Lean du livre de SitePoint est une ressource utile.

Les questions fréquemment posées sur l'organisation des fichiers CSS

Comment organiser au mieux mes fichiers CSS?

La meilleure façon d'organiser les fichiers CSS dépend fortement de la taille et de la complexité du projet. Pour les petits projets, un seul fichier CSS peut être suffisant. Cependant, pour les projets plus grands, il est recommandé de diviser les CSS en plusieurs fichiers. Cela peut être fait sur la base des composants ou des pages qui les coiffent. Par exemple, vous pouvez créer séparément un fichier CSS pour l'en-tête, le pied de page et le contenu principal. Cela rend votre code plus facile à maintenir et à déboguer.

Comment garder mon code CSS simple et ordonné?

Garder le code CSS simple et ordonné est essentiel pour la maintenabilité. Vous pouvez le faire en suivant quelques meilleures pratiques. Tout d'abord, utilisez des commentaires pour décrire le rôle de chaque partie de CSS. Deuxièmement, combinez les styles pertinents ensemble. Troisièmement, utilisez une convention de dénomination cohérente pour votre classe et votre ID. Enfin, envisagez d'utiliser un préprocesseur CSS comme Sass ou moins pour aider à gérer vos feuilles de style.

Quels sont les préprocesseurs CSS et comment aident-ils à organiser les fichiers CSS?

Les préprocesseurs CSS comme SASS et moins sont des langages de script qui étendent la fonctionnalité CSS. Ils vous permettent d'utiliser des variables, des règles imbriquées, des mixins et des fonctions, ce qui peut simplifier considérablement votre CSS et le rendre plus facile à entretenir. Le préprocesseur compile votre code en CSS standard que le navigateur peut comprendre.

Comment utiliser le module CSS pour organiser mon CSS?

CSS est un moyen de rendre votre CSS plus modulaire et réutilisable. Avec le module CSS, chaque composant de votre application a son propre fichier CSS. Cela facilite la gestion de votre style, car la modification du CSS d'un composant n'affecte pas les autres. Pour utiliser les modules CSS, vous avez besoin d'un outil de construction comme WebPack ou Parcel.

Quel est le rôle des commentaires dans l'organisation des fichiers CSS?

jouent un rôle crucial dans l'organisation des fichiers CSS. Ils peuvent vous aider, vous et d'autres développeurs, à comprendre le rôle de chaque partie de CSS. Ceci est particulièrement important dans les grands projets, car vous pouvez avoir plusieurs fichiers CSS. Les commentaires peuvent également être utilisés pour désactiver temporairement certaines parties de CSS pendant le débogage.

Comment utiliser le cadre CSS pour organiser mon CSS?

Les cadres CSS comme Bootstrap et Foundation fournissent des pré-CSS que vous pouvez utiliser pour styliser votre site Web. Ils fournissent également une structure unifiée pour votre CSS pour le rendre plus facile à entretenir. Cependant, n'oubliez pas que l'utilisation de frameworks CSS peut ajouter des ballonnements inutiles au site Web si vous n'utilisez pas la plupart des fonctionnalités.

Quelle est l'importance d'une convention de dénomination cohérente dans le CSS?

La convention de dénomination cohérente dans CSS rend votre code plus facile à lire et à comprendre. Ils facilitent également la recherche de styles spécifiques lorsque vous devez mettre à jour ou déboguer votre code. Vous pouvez suivre plusieurs conventions de dénomination telles que BEM (bloc, élément, modificateur), OOCSS (CSS orienté objet) et SMACSS (architecture CSS évolutive et modulaire).

Comment utiliser les variables CSS pour organiser mon CSS?

Les variables CSS (également appelées propriétés personnalisées) vous permettent de stocker des valeurs spécifiques pour la réutilisation tout au long du CSS. Cela peut simplifier considérablement votre CSS et le rendre plus facile à entretenir. Par exemple, vous pouvez stocker la couleur principale de votre site Web en tant que variable et l'utiliser lorsque vous avez besoin de cette couleur.

Quel est le rôle de réinitialisation CSS dans l'organisation des fichiers CSS?

CSS RESET est un ensemble de styles appliqués au début de CSS et est utilisé pour réinitialiser les styles par défaut de l'application du navigateur. Cela garantit que votre site Web semble cohérent sur différents navigateurs. CSS RESET facilite également la gestion de votre CSS car vous n'avez pas à réécrire les styles de navigateur pour chaque élément.

Comment utiliser l'outil CSS Lint pour garder CSS organisé?

Les outils de peluche CSS comme Stylelint et CSSlint peuvent vous aider à maintenir le CSS organisé en attrapant des erreurs et en appliquant des styles de codage cohérents. Ils peuvent être intégrés dans votre flux de travail de développement pour vérifier automatiquement votre CSS au fur et à mesure que vous l'écrivez. Cela peut vous aider à écrire un CSS plus propre et plus facile à entretenir.