Lorsque nous sommes confrontés à des fichiers CSS et Javascript de plus en plus volumineux dans les projets de sites Web, que ce soit pour le développement secondaire ou l'analyse du navigateur, leurs codes doivent être optimisés, mais l'optimisation ne signifie pas simplement compresser ou réduire la taille du fichier. Une organisation claire et une efficacité opérationnelle élevée sont les résultats que nous souhaitons. Alors, quelles méthodes existe-t-il pour améliorer notre code CSS ? Jetons un coup d’œil à quelques suggestions ci-dessous.
1. L'utilisation
d'abréviations peut raccourcir votre temps de travail et réduire la taille de vos fichiers. Pourquoi pas ?
Définissez des valeurs différentes pour des différences similaires :
afficher la copie ordinaire dans le presse-papiers ?
p{
marge supérieure : 10 px ;
marge droite : 20 px ;
marge inférieure : 30 px ;
marge gauche : 40 px ;
}
p{
marge supérieure : 10 px ;
marge droite : 20 px ;
marge inférieure : 30 px ;
marge gauche : 40 px ;
}
Utilisez des abréviations :
afficher la copie ordinaire dans le presse-papiers ?
p { marge : 10px 20px 30px 40px }
p { marge : 10px 20px 30px 40px ;
Jetons un coup d'œil aux abréviations des polices couramment utilisées
Consultez le CSS Shorthand Guide (anglais) et Efficient CSS with shorthand Properties (anglais) pour en savoir plus sur les propriétés abrégées.
2. Évitez d'utiliser des hacks
Le blog de Jon Hick hicksdesign.co.uk/journal Utiliser les commentaires conditionnels du navigateur
Le piratage est une mauvaise chose, il définira le même code pour différents navigateurs, ce qui rendra le CSS fastidieux. Nous savons désormais qu'il faut utiliser des commentaires conditionnels au lieu de hacks, ils sont acceptés dans IE6 et IE7, et même l'équipe IE recommande leur utilisation. Utilisez des commentaires conditionnels pour servir le code CSS spécifique aux fonctionnalités du navigateur. Par conséquent, un code CSS de base plus petit est utilisé pour servir les navigateurs conformes aux normes. Il ne sera téléchargé que lorsque les conditions requises sont remplies (comme les fichiers CSS supplémentaires d'IE). !
Jetons un coup d'œil à un exemple de code utilisant des commentaires conditionnels dans IE6 :
afficher la copie ordinaire dans le presse-papiers ?
Ce code amène IE6 à télécharger ie6.css supplémentaire pour analyser son code CSS dédié. De même, si vous ciblez IE7, remplacez simplement 6 et 7 ci-dessus.
3. Utilisez les espaces blancs
Que ce soit pour votre propre lecture ou pour un développement secondaire, vous devez maintenir une bonne lisibilité du CSS. L'espace blanc joue un rôle clé.
Nous ne vous encourageons pas à supprimer tous les formats d'espaces, tels que les tabulations, les sauts de ligne, les espaces, etc., afin d'obtenir un fichier CSS plus petit. Il est recommandé que le code imbriqué soit mis en retrait avec une tabulation et que tous les attributs soient sur une ligne distincte.
En comparant les images ci-dessus et ci-dessous, quel format peut vous aider à gagner plus de temps sur les modifications ? L'espace blanc vous permettra de gérer plus facilement votre code.
4. Supprimez les frameworks redondants et les réinitialisations
Réinitialiser les règles utilisées par le framework CSS 960 Grid System de Nathan Smith
Si vous choisissez d'utiliser un framework CSS, y compris celui que vous avez écrit vous-même, si vous vérifiez le code, vous constaterez certainement que certaines des règles contenues dans le framework ne s'appliquent pas à votre environnement actuel. le fichier peut être supprimé.
Ce à quoi on peut penser, c'est la réinitialisation. La réinitialisation utilisée par YUI Grid CSS et la réinitialisation d'Eric Meyer sont actuellement très populaires. Les réinitialisations peuvent supprimer les styles par défaut des différents navigateurs afin que la page se comporte de manière cohérente dans tous les navigateurs. Mais ils contiennent généralement tous les attributs nécessaires à un grand site Web. Certains attributs tels que pre, code, sub, dfn, var, etc. ne sont pas du tout utilisés pour les sites Web ordinaires. Supprimez ceux que vous ne pouvez pas utiliser. Eric Meyer vous encouragerait à faire de même !
Le framework et la réinitialisation aideront très bien votre travail, mais si vous ne supprimez pas les utilisations dont vous n'avez pas besoin, cela réduira l'efficacité et la lisibilité de vos pages.
5. CSS étendu
Stopdesign.com CSS par Doug Bowman Utiliser des sélecteurs spéciaux pour les couches
Une autre façon d'optimiser votre code consiste à déclarer des propriétés spécifiques pour chaque couche.
6. Documentez votre travail
Dans la collaboration en équipe, il est extrêmement important de communiquer les normes d'écriture, les normes de codage, les méthodes d'annotation et le style. Les règles reposent sur une approche cohérente des normes. Cela empêchera d’autres de dupliquer le travail que vous avez déjà effectué et empêchera l’expansion du code.
7. Utilisez la compression
Afin de réduire le temps de téléchargement et de chargement du navigateur, la compression est une bonne solution, mais uniquement lors de la publication. YUI Compressor et CSSTidy sont des experts dans ce domaine. Ils peuvent supprimer le code redondant et vérifier les erreurs lorsque les propriétés se chevauchent.
De nombreux éditeurs populaires, tels que BBEdit, TextMate et TopStyle, peuvent vous aider à formater votre code CSS comme vous le souhaitez. Vous pouvez également utiliser PHP pour traiter votre CSS via la technologie de compression du serveur. Vous pouvez trouver plus d’outils CSS d’optimisation et de compression CSS.
À un moment donné, ces procédures minimisaient l’apparition d’erreurs, mais elles n’étaient pas parfaites. De même, il est préférable de ne pas les utiliser sur des fichiers contenant des hacks CSS. C'est une autre raison de stocker les hacks dans des fichiers séparés.
Finition
------------------------------------------------- -------------------------------------------------
Un code propre et optimisé ne concerne pas seulement la taille de votre fichier, il s'agit également maintenabilité et convivialité. Les principes ci-dessus ne s'appliquent pas uniquement au CSS, ils peuvent également être appliqués au HTML, au Javascript et à d'autres langages de programmation. Les fichiers CSS ne sont pas uniquement destinés à la présentation à l'utilisateur final de votre site Web. Les principes ci-dessus peuvent améliorer l’expérience utilisateur ainsi que l’expérience des développeurs. Appliquez ces principes à vos futurs projets et vous êtes assuré d’obtenir des résultats significatifs.