Share
Faire réviser notre code par un professionnel est un excellent moyen d'améliorer la qualité du code, mais que se passe-t-il si vous n'avez pas accès à un programmeur rockstar? Vous faites ce qu'il y a de mieux et prenez une peluche pour cette langue.
Aujourd'hui, j'aimerais parler un peu de CSSLint, un outil d'analyse de code récemment publié pour, vous l'avez deviné, CSS. Rejoins-moi après le saut!
Frappons Wikipedia pour une définition:
Lint est un outil qui signale une utilisation suspecte d'un logiciel écrit dans n'importe quel langage informatique..
En gros, une charpie regarde notre code et vérifie les mauvaises pratiques de programmation. Variables non définies, constructions inefficaces, etc..
Vous vous demandez probablement pourquoi vous avez besoin d'un tel outil. Regardons les choses en face: nous n’avons pas tous la connaissance suprême de ce avec quoi nous travaillons ni le luxe d’obtenir notre code revu par les pairs. Dans ces cas, coller notre code dans une charpie est la meilleure option. Et contrairement aux outils de nettoyage, Lint crache des petites choses à propos de votre code et de son amélioration..
Créé par Nicholas Zakas et Nicole Sullivan, CSSLint est un outil open source qui vérifie votre syntaxe par rapport à un ensemble de règles prédéfinies pour éliminer les éventuelles inefficiences et vous assurer que votre présentation fonctionne comme prévu avec peu de surprises..
Une fois sur le site CSSLint, vous pouvez simplement coller votre code CSS source et choisir les règles que vous souhaitez appliquer. Appuyez sur le bouton de la charpie et CSSLint va commencer à éroder votre suffisance.
Si vous êtes un junkie de nœuds comme moi, il existe également une version pour cela. Il suffit de taper sudo npm install -g csslint et vous êtes prêt à partir!
Jetons un coup d'œil sur les règles que CSSLint applique.
Si vous êtes quelque chose comme moi, quelques-unes des règles doivent vous avoir eu déconcerté.
Très franchement, oui, non et tout le reste.
Après m'être caché dans plusieurs forums de discussion et salles IRC, j'ai découvert que de nombreux développeurs semblaient s'émousser contre les règles, et c'est peut-être vrai. Permettez-moi d’essayer d’expliquer pourquoi la plupart des règles ont un sens alors que d’autres ne le font pas..
Les ID ne doivent pas être utilisés dans les sélecteurs, car ces règles sont trop étroitement associées au HTML et ne peuvent être réutilisées. Il est préférable d'utiliser des classes dans les sélecteurs, puis d'appliquer une classe à un élément de la page..
Celui-ci a suscité l'intérêt de nombreux développeurs, car nous sommes assez habitués à attribuer des ID aux principaux composants structurels d'une mise en page, comme l'en-tête et le pied de page..
CSSLint soutient que le style de tels éléments, par définition, ne peut pas être directement réutilisé. Si vous souhaitez une double barre latérale sur votre page, une classe vous permet de réutiliser le style alors qu'un ID ne sera pas utilisé..
Gardez à l'esprit que ce n'est pas parce qu'une classe peut être réutilisée qu'elle doit l'être. Les classes uniques sont parfaitement acceptables et constituent un moyen pratique de réutiliser le style si besoin est..
Les éléments de titre (h1 à h6) doivent être définis comme des styles de niveau supérieur et ne pas être étendus à des zones particulières de la page..
La plupart des développeurs, y compris moi-même, se sont habitués à écrire des en-têtes sensibles au contexte. En tant que, nous définissons un style séparé pour les en-têtes en fonction de la page sur laquelle elle est affichée. Un argument en faveur de cette approche est qu’elle déplace complètement du balisage à la feuille de style. Vous pouvez simplement définir une balise et laisser le CSS en cascade en conséquence.
CSSLint soutient qu'une telle approche compromet la prévisibilité de votre conception. Si quelqu'un d'autre prenait votre dessin et essayait de placer un titre quelque part, il devrait connaître le contexte et l'emplacement de l'élément. Avec des en-têtes définis inconditionnellement, il peut utiliser un en-tête dont la présentation est sûre, quels que soient ses parents.
Les éléments de titre (h1 à h6) doivent avoir exactement une règle sur un site.
Une extension de la règle ci-dessus pour améliorer la prévisibilité de la présentation. Vrai ou faux, gardez à l'esprit que cela exclut fondamentalement l'inclusion d'une sorte de code de réinitialisation dans votre feuille de style. Chaque feuille de réinitialisation fonctionne également sur vos titres et CSSLint le marquera comme une erreur..
Les classes adjacentes ressemblent à .foo.bar. Bien que techniquement autorisé en CSS, ceux-ci ne sont pas gérés correctement par Internet Explorer 6 et les versions antérieures..
Lorsque cette règle est activée, CSSLint signale des règles telles que .nav.red, La raison officielle étant qu'Internet Explorer 6 et les versions antérieures ne fonctionnent pas bien avec le sélecteur. Je respecte les développeurs, mais je ne suis pas d'accord ici. Juste parce que ça ne marche pas avec Internet 'Dev-buster' Explorer 6 n'est pas une bonne raison de cesser de travailler avec une fonctionnalité utile.
Les bordures et les marges intérieures ajoutent de l'espace en dehors du contenu d'un élément. Définir la largeur ou la hauteur avec des bordures et du rembourrage est généralement une erreur, car vous n'obtiendrez pas le résultat visuel recherché. CSS Lint avertit lorsqu'une règle utilise la largeur ou la hauteur en plus du remplissage et / ou de la bordure.
Le modèle de boîte peut être défectueux, mais presque tous les développeurs front-end que je connais sont parfaitement au courant des lacunes et de la manière de surmonter les disparités liées à la mise en œuvre. Sommes-nous vraiment prêts à abandonner une couche de contrôle parce que certains navigateurs plus anciens ont une implémentation différente?
L'utilisation de polices Web a des conséquences sur les performances, car les fichiers de polices peuvent être très volumineux et certains navigateurs bloquent le rendu lors du téléchargement. Pour cette raison, CSS Lint vous avertit quand il y a plus de cinq polices Web dans une feuille de style..
Je ne prévois pas une situation où j'utiliserais plus de cinq polices dans une page, mais j'estime qu'il est discutable de plonger dans ce territoire. En réalité, il s'agit d'un défaut de conception plutôt que d'un défaut de développement. Si un développeur référence cinq polices distinctes dans sa feuille de style, il y a de fortes chances que ce ne soit pas par hasard.
CSS Lint vérifie simplement si vous avez utilisé float plus de 10 fois et, le cas échéant, affiche un avertissement. Utiliser autant de floats signifie généralement que vous avez besoin d’une sorte d’abstraction pour réaliser la mise en page..
Bien que je souscrive à l'argument des créateurs selon lequel avoir plus de dix occurrences de float est une mauvaise idée, je pense aussi que cela affectera le balisage une fois passée une taille donnée..
Par exemple, dans une situation où vous souhaitez faire flotter deux éléments, vous utiliseriez généralement:
? et le style, par des méthodes traditionnelles.
.conteneur-1 largeur: 70%; float: gauche; .container-2 width: 30%; float: gauche;
La méthode CSSLint serait d’abstraire le float comme ceci:
? et stylé comme suit:
.conteneur-1 largeur: 70%; .container-2 width: 30%; .float float: left;
Bien que je convienne que cette approche est viable, j’estime que le balisage sera considérablement encombré une fois que vous tenterez d’abstraire plus loin. Je préférerais voir une classe contenant la plupart de ses styles en un seul endroit plutôt que de surcharger le balisage avec plus de 10 classes. Encore une fois, j'estime qu'il s'agit d'un sujet subjectif.
Toutes les règles ci-dessus sont conformes aux pratiques standard en vigueur. Bien sûr, certaines règles ont peu d’importance dans le monde réel, comme les valeurs nulles ne nécessitant pas d’unités, ou seront capturées par un IDE décent, comme les erreurs d’analyse syntaxique, mais il s’agit néanmoins de bonnes règles à avoir dans une suite de tests CSS.
CSSLint va aider beaucoup de développeurs sur la route mais?
CSSLint est, sans aucun doute, écrit par des développeurs avec de grandes références et va certainement aider beaucoup de développeurs et de designers sur la route..
Ce qui me gêne un peu, c’est que bon nombre des règles controversées proviennent de CSS orienté objet, un framework CSS conçu pour permettre aux développeurs d’écrire des CSS maintenables. Bien que je n’ai rien contre le cadre et son paradigme, il faudrait convenir que c’est une façon de faire les choses, pas la façon de faire les choses.
Contrairement à JSLint, où toutes les règles ont un sens, avec CSSLint, j'ai l'impression qu'on me dit qu'un style d'écriture CSS est correct et que les autres sont erronés. Ce serait comme si quelqu'un me demandait d'abandonner les Beatles parce que Rolling Stones est leur groupe préféré.
Les outils ne sont que cela - des outils.
Bien entendu, nous, en tant que groupe, avons tendance à être assez collants en ce qui concerne notre code. Nous n'aimons pas entendre dire que notre code pourrait avoir des * problèmes * haletants ou être écrit d'une manière totalement différente.
La principale chose à noter ici est que CSSLint est, à terme, un outil. Cela vous indique simplement que certaines des zones peut avoir des erreurs.
CSSLint n'a pas besoin d'être le poing de fer autour duquel vous basez votre ego entier. Il n'y a aucune raison de se mettre en quatre pour éviter un avertissement si vous savez exactement ce que vous faites..
Oui.
En CSS, comme en calcul intégral, il existe de nombreuses solutions à un problème donné. Il n'y a pas forcément de "meilleure" façon de faire les choses - vous pouvez favoriser la lisibilité et moi-même l'efficacité. Ce qui est important, c’est que vous réalisiez que chacun de nous a sa façon unique de faire les choses..
Si vous n'avez pas les mêmes perspectives pour résoudre un problème, vous pouvez être en désaccord avec une autre approche et même la trouver douteuse..
Cela dit, il n’ya jamais de bonne raison de ne pas apprendre de nouvelles choses. Examiner les problèmes du point de vue d'un autre développeur est un excellent moyen de voir si vous pouvez apprendre quelque chose de nouveau..
Que pensez-vous de CSSLint? Trouvez-vous utile? Déroutant? At-il aidé avec vos problèmes du monde réel? Faites le nous savoir dans les commentaires.
Soyez excellent les uns envers les autres et merci beaucoup d'avoir lu!
Accentsconagua