Apprendre ça bizarre? Astuce pour déboguer CSS

Les designers le détestent! ?

Apprendre ça bizarre? Astuce pour déboguer CSS

* Pas de clickbait *

Avant d'arriver à l'article, je veux juste partager que je suis en train de créer un produit et j'aimerais collecter des données sur la façon de mieux servir les développeurs Web. J'ai créé un court questionnaire à vérifier avant ou après la lecture de cet article. S'il vous plaît vérifier - merci! Et maintenant, revenons à notre programmation régulière.

Salut! ? Je suis Zaydek! Lorsque j'ai commencé à apprendre à créer des sites Web, c'était beaucoup plus douloureux que prévu. Après tout, je suis un designer graphique expérimenté et programmeur - comment les sites Web pourrait être t chapeau dur?

Dans cet article, je détaille les décisions qui m'ont conduit à créer un débogueur CSS.

J'ai également enseigné un cours HTML / CSS gratuit sur Scrimba où j'enseigne comment créer un beau blog à partir de * zéro *. Cliquez ici pour vous inscrire! ?

Scrimba.com est une plate-forme frontale interactive où les sites Web sont enregistrés comme des événements - pas des vidéos - et peuvent être modifiés! ?

Qu'est-ce qu'un débogueur?

Il y a une excellente citation de Donald Knuth sur le débogage. Pour paraphraser, cela ressemble à quelque chose comme ça.

Quelqu'un: "Quel est le meilleur langage de programmation?" Donald Knuth: "Lequel possède le meilleur débogueur?"

Je n'ai pas apprécié cette idée avant le CSS. Les langages de programmation ont ce caractère raisonnable à leur sujet, où la logique dépasse l'opinion. Mais CSS est différent parce que CSS «se sent» opiniâtre.

Alors, que pouvons-nous faire? Et bien, on peut écouter les bons conseils de Donald Knuth et utiliser un débogueur!

Lorsqu'un langage de programmation est un outil, un débogueur est un outil que nous pouvons utiliser pour comprendre notre outil - notre code. Tous les amateurs de comp-sci n'aiment pas les débogueurs, et je comprends cela.

Ne faites pas faire à l'ordinateur ce que nous ne comprenons pas. Je pense qu'il y a du mérite à cela, mais ce dont je parle ici, c'est de révéler une structure là où elle était autrement invisible.

Prenez ce qui suit:

Que pouvons-nous faire pour voir la structure de notre site Web? Voici deux solutions dont je suis consciente: nous pouvons créer des règles CSS uniques pour mettre en valeur un élément, ou nous pouvons utiliser les outils de débogage de Chrome, Firefox ou Safari. Mais c'est encore plus ou moins une solution unique. Ce dont nous avons besoin, c'est d'une solution générale .

Notre débogueur

Il n'y a pas longtemps, je concevais cet en-tête, et ce n'était pas simple. L'intention était de faire passer une image sur un texte multiligne. Ça devrait être simple, non?

Eh bien CSS est l'antagoniste? ici. Ce qui serait autrement simple dans Photoshop peut être le voyage d'un héros dans CSS, et cela m'a conduit à expérimenter avec outline:

* { outline: solid 0.25rem hsla(210, 100%, 100%, 0.5); }

Rien de très spécial, juste des lignes blanches douces. Ce que nous avons, cependant, est une règle qui applique à tous les éléments aussi longtemps que nous utilisons un *et non le nom du id, classou element.

Pourtant, l'introduction de la a * { … }été profonde pour moi. J'ai pensé: «Où ne voudrais-je pas cela?» J'ai donc ajouté quelques lignes supplémentaires et développé un débogueur plus formel:

* { color: hsla(210, 100%, 100%, 0.9) !important; background: hsla(210, 100%, 50%, 0.5) !important; outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;}

Très amélioré! Ici, nous avons créé une ambiance schématique pour notre site Web. J'ai pris soin de ne pas utiliser de couleurs unies, mais j'ai plutôt choisi des couleurs douces ou des couleurs avec un canal alpha pour que les éléments imbriqués apparaissent plus profonds, avec des bleus plus bleus et des blancs plus blancs. J'ai également ajouté à !importantcause des infâmes guerres de spécificité CSS.

Ce qui peut parfois donner l'impression que CSS nous plonge, c'est comment et quand la cascade s'applique. Autrement dit, "Comment se fait-il que les styles soient parfois appliqués et parfois non?"

Ce n'est pas le CSS de Schrodinger, ce sont des mathématiques simples. CSS utilise une simple calculatrice pour déterminer quelles règles sont plus spécifiques, et le résultat détermine si CSS est appliqué ou non.

La mère de toute spécificité est !important, qui remplace toutes les règles en ligne, les ID, les classes et les éléments. C'est comme l'étoile de la mort par rapport à l'Empire. Bien que l'utilisation de !importantsoit déconseillée en général, elle est parfaite pour un débogueur - car nous ne livrerons pas notre site Web avec celui-ci «activé». Au lieu de cela, nous utilisons le débogueur uniquement dans la conception et le développement de notre site Web.

Plus j'utilisais le débogueur, plus je réalisais que l'utilisation *:not(path):noth(g)comme sélecteur était préférable. De cette façon, je n'obtiendrais pas de lignes superflues à partir de graphiques vectoriels. J'ai également remarqué que la désactivation box-shadowétait plus propre, car le débogueur n'a pas besoin d'une sensation de profondeur.

Alors, voici le débogueur final:

*:not(path):not(g) { color: hsla(210, 100%, 100%, 0.9) !important; background: hsla(210, 100%, 50%, 0.5) !important; outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
 box-shadow: none !important;}

Je pense que nous, les humains, détestons ce que nous ne comprenons pas. Et CSS ne fait pas exception. C'est mal interprété parce qu'il est mal compris. Je propose: pensez au CSS comme à une épée à double tranchant. Il peut être utilisé à la fois pour construire et déconstruire des sites Web . Oui, CSS n'est pas Photoshop, mais cela ne signifie pas qu'il ne peut pas faire des choses que Photoshop ne peut pas faire. Créer notre propre débogueur est une chose que nous pouvons faire.

Comment utiliser ce débogueur?

  1. Accédez à zaydek.github.io/debug.css
  2. Bookmark “Debug CSS” (source code here)
  3. Click the bookmark to toggle it *on* and *off* ?

Don’t forget the free HTML/CSS course on Scrimba where I teach how to build a beautiful blog from *scratch*. Click here to enroll! ?