Si vous souhaitez devenir un expert CSS, il ne suffit pas de maîtriser l'utilisation des sélecteurs CSS. Cela réside également dans la planification globale du travail, la maîtrise du workflow et l'amélioration de la maintenabilité et de l'efficacité de la feuille de style. Dans cet article, Jina Bolton sélectionne 10 techniques d'application CSS auprès de 12 meilleurs designers et les recommande à tout le monde.
Dernièrement, j'ai cherché des moyens de créer des feuilles de style plus attrayantes. En utilisant le CSS, nous pouvons créer les merveilleux sites Web que nous souhaitons, et écrire du CSS est un plaisir en soi.
Comment créer une feuille de style plus attractive ? Quelles fonctionnalités votre feuille de style doit-elle avoir ?
Il y a quelques mois, j'ai eu le plaisir d'assister à la conférence Web Vision 2007 à Portland, Oregon, États-Unis. Pour cet événement, j'ai recherché 12 designers qui ont apporté des contributions exceptionnelles à la conception et au développement Web. Les résultats de cette recherche, combinés à ma propre expérience professionnelle, m'ont aidé à résumer un ensemble de bonnes méthodes pour créer de belles feuilles de style.
01. Ne laissez pas les CSS avoir trop de balises
Lier ou importer des feuilles de style peut sembler une tâche déroutante. Mais je tiens à souligner pourquoi c'est si important. J'ai vu de nombreux développeurs de sites Web avoir des documents CSS soignés et bien organisés, mais lentement, parce qu'ils ne peuvent pas être mis à jour rapidement dans un court laps de temps, ou parce qu'ils sont tout simplement trop paresseux pour les gérer, les feuilles de style exquises créées précédemment. sont perdus.
Imaginez que vous travaillez sur un énorme site Web qui doit publier des centaines de contenus. Le temps étant limité, vous devez effectuer des modifications ou des mises à jour rapides en imbriquant ou en organisant les CSS. Les années passent, et cette habitude perdure, jusqu'au jour où on vous annonce que le site va être complètement repensé (mais le contenu sera toujours le même) et que vous n'avez qu'une semaine pour le créer (tests compris).
Habituellement, mettre à jour une feuille de style est une méthode très simple. Sauf si vous apportez des modifications à des zones éparses du site Web pendant une longue période. Vous ne pouvez pas avoir une compréhension globale de la structure de la feuille de style du site Web. Alors maintenant, vous avez deux options : a. Tout organiser et tout repenser en un mois (bonne chance) ;
Ne laissez pas votre travail devenir ainsi. Lier ou importer votre feuille de style n’est pas une mince affaire. Créez une feuille de style propre et bien rangée et conservez-la là, et vous serez plus heureux au travail.
Remarque : N'ajoutez pas trop de balises à votre feuille de style. Si vous essayez de créer une nouvelle feuille de style à chaque fois que vous mettez à jour ou ajoutez du nouveau contenu, vous vous posez certainement des problèmes. Trop de liens et de feuilles de style importées rendront difficile l'élimination des bugs et rendront votre feuille de style difficile à maintenir. Il est compréhensible que les grands sites Web créent des feuilles de style distinctes pour différentes parties. Faites juste attention à ne pas aller trop loin.
Il convient de mentionner que l'ajout de nombreuses feuilles de style augmentera davantage de requêtes http, ce qui peut également affecter le travail ultérieur. De plus, le navigateur Microsoft IE6 impose certaines restrictions sur la feuille de style à 32 connexions. .
02. La sémantique n'est pas qu'un mot industriel
Vous savez, je dois le mentionner, la sémantique sera votre bonne amie. En plus de choisir les éléments les plus appropriés et les plus significatifs pour exprimer votre contenu, vous devez également vous assurer de choisir les valeurs des attributs class et id. En dehors de votre travail, cela vous simplifiera la vie (et cela simplifiera également la vie de votre équipe de travail - si vous travaillez en équipe). Jetez un œil à la définition ci-dessous :
.l13k { couleur : #369 }
Si vous veniez juste de travailler et que vous voyiez cette classe dans ce fichier CSS, trouveriez-vous immédiatement cette classe ? Ce n'est probablement pas possible, car le nom de cette classe est probablement une abréviation, il n'y a donc aucun moyen précis de le dire immédiatement. Ou peut-être que vous l’avez mis là et que vous savez ce que cela signifie aujourd’hui, mais pouvez-vous garantir que vous saurez encore ce que cela signifie plusieurs années plus tard ?
Maintenant, regardons cette définition :
.left-bleu { couleur : #369 }
Vous saurez probablement immédiatement ce que fait ce sélecteur de classe, tout comme vous savez que le module bleu dans la colonne de gauche est là, ce qui signifie qu'il fonctionne. J'ai mentionné plus tôt que vous devrez peut-être repenser dans une semaine. Lors de la refonte, ce module a été placé à droite et était toujours rouge. Cette classe n'a plus la valeur d'exister. Alors maintenant, je dois choisir : soit modifier toutes les valeurs d'attribut, soit les laisser tranquilles. (Cela peut prêter à confusion.)
Il est préférable de ne pas ajouter de couleur ou de dimensions de longueur et de largeur aux attributs de votre classe. Vous devez éviter toute valeur de propriété qui est un mot littéral. Les attributs directs (tels que box) peuvent conduire à une séparation du contenu.
Enfin, examinons une convention de dénomination plus appropriée :
.description du produit { couleur : #369 }
Ici vous pouvez le voir. La description du produit définie dans ce style est très claire, quelle que soit la manière dont vous la modifiez.
03.Avantages de l'ajout de commentaires
Si vos commentaires sont bien organisés et rentrent dans le cadre du CSS, étiquetez clairement chaque section. Il est préférable de s'assurer que les commentaires sont visuellement visibles afin qu'ils puissent être rapidement localisés lorsque le contenu défile et jette un coup d'œil sur dix lignes. Ensuite, commenter votre document CSS sera d'une grande aide pour vous ou pour d'autres dans le développement futur. La plupart des commentaires élémentaires indiqueront pourquoi cette règle est utilisée ici.
Conseils et remarques
L'ajout de commentaires peut vous aider, vous ou les futurs développeurs, à éviter toute confusion inutile. Gardez cette habitude. Voir exemple :
/* Désactive les bordures des images liées */
img { bordure : 0 ;
Heure et signature
Certains concepteurs et développeurs aiment indiquer la date et l'heure de la dernière mise à jour d'un document CSS, ainsi que son nom et son état initial. Ces informations peuvent vous fournir des informations sur les personnes impliquées, ainsi qu'une indication sur la documentation la plus récente.
/* Styles de typographie Sushimonster
Mise à jour : jeu. 18.10.07 à 17h15
Auteur : Jina Bolton
-------------------------------------------------- --*/
C'est une bonne idée, surtout si vous travaillez en équipe, gardez à l'esprit que certaines équipes doivent omettre ces informations (certaines entreprises préféreraient ne pas avoir ces noms et dates dans le document.) C'est donc une bonne idée de simplement prendre un regardez. Cette information est-elle nécessaire?
Classement de l'organisation
C'est une bonne idée d'utiliser des commentaires pour décrire brièvement différentes parties de votre CSS. Par exemple, si tous les types de titres sont regroupés, vous devrez les examiner pour les distinguer.
/* EN-TÊTE
-------------------------------------------------- --*/
J'y reviendrai plus tard lorsque je discuterai de la "différenciation entre les types".
Marquage des annotations
Si votre document CSS organise des styles dispersés comme je l'ai dit ci-dessus, le marquage des commentaires peut vous aider à faciliter la recherche de cette partie du fichier. Vous pouvez utiliser des symboles de fonctionnalités, des mots-clés et trouver le résultat final.
/* = EN-TÊTE
-------------------------------------------------- --*/
Ceci est utile dans les feuilles de style longues et complexes. Vous pouvez lire à ce sujet dans Stop Design. .
se référer à