Lernen Sie dieses eine seltsame? Trick zum Debuggen von CSS

Designer HASSEN ihn! ?

Lernen Sie dieses eine seltsame? Trick zum Debuggen von CSS

* Nicht Clickbait *

Bevor ich zum Artikel komme, möchte ich nur mitteilen, dass ich ein Produkt baue, und ich würde gerne einige Daten darüber sammeln, wie Webentwickler besser bedient werden können. Ich habe einen kurzen Fragebogen erstellt, den ich vor oder nach dem Lesen dieses Artikels auschecken kann. Bitte probieren Sie es aus - danke! Und jetzt zurück zu unserer regulären Programmierung.

Hallo! ? Ich bin Zaydek! Als ich anfing zu lernen, wie man Websites erstellt, war es weitaus schmerzhafter als erwartet. Schließlich bin ich ein erfahrener Grafik - Designer und Programmierer - wie Websites t sein könnte Hut hart?

In diesem Artikel beschreibe ich die Entscheidungen, die mich zur Erstellung eines CSS-Debuggers geführt haben.

Ich habe auch einen kostenlosen HTML / CSS-Kurs über Scrimba unterrichtet, in dem ich unterrichte, wie man ein schönes Blog von Grund auf neu erstellt. Klicken Sie hier, um sich anzumelden! ?

Scrimba.com ist eine interaktive Front-End-Plattform, auf der Websites als Ereignisse - nicht als Videos - aufgezeichnet und bearbeitet werden können! ?

Was ist ein Debugger?

Es gibt ein großartiges Zitat von Donald Knuth zum Debuggen. Um es zu paraphrasieren, es geht ungefähr so.

Jemand: "Was ist die beste Programmiersprache?" Donald Knuth: "Welche hat den besten Debugger?"

Ich habe diese Idee erst mit CSS zu schätzen gelernt. Programmiersprachen haben diese Vernünftigkeit, wenn die Logik die Meinung übersteigt. Aber CSS ist anders, weil CSS sich "meinungsbildend" fühlt.

Also was können wir tun? Nun, wir können auf den guten Rat von Donald Knuth hören und einen Debugger verwenden!

Wenn eine Programmiersprache ein Werkzeug ist, ist ein Debugger ein Werkzeug, mit dem wir unser Werkzeug - unseren Code - verstehen können. Nicht alle Comp-Sci-Leute mögen Debugger, und ich verstehe das.

Lassen Sie den Computer nicht das tun, was wir nicht verstehen. Ich denke, das ist ein Verdienst, aber ich spreche hier von einer Struktur, in der sie sonst unsichtbar war.

Nehmen Sie Folgendes:

Was können wir tun, um die Struktur unserer Website zu sehen? Mir sind zwei Lösungen bekannt: Wir können einmalige CSS-Regeln erstellen, um ein Element hervorzuheben, oder wir können die Debugger-Tools von Chrome, Firefox oder Safari verwenden. Aber das ist immer noch mehr oder weniger eine einmalige Lösung. Was wir brauchen, ist eine allgemeine Lösung.

Unser Debugger

Vor nicht allzu langer Zeit habe ich diesen Header entworfen, und es war nicht einfach. Die Absicht war, ein Bild über mehrzeiligen Text zu bewegen. Sollte einfach sein, oder?

Nun, CSS ist der Antagonist? Hier. Was in Photoshop sonst einfach wäre, kann eine Heldenreise in CSS sein, und dies führte mich dazu, mit o zu experimentierenutline:

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

Nichts Besonderes - nur weichweiße Linien. Was wir haben, ist jedoch eine Regel , die so lange auf alle Elemente gilt als wir verwenden *und nicht den Namen der id, classoder element.

Die Einführung von * { … }war für mich jedoch tiefgreifend. Ich dachte: "Wo würde ich das nicht wollen?" Also habe ich noch ein paar Zeilen hinzugefügt und einen formelleren Debugger entwickelt:

* { 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;}

Sehr verbessert! Hier haben wir ein schematisches Gefühl für unsere Website geschaffen. Ich habe darauf geachtet, keine Volltonfarben zu verwenden, sondern stattdessen weiche Farben oder Farben mit einem Alphakanal zu wählen, damit verschachtelte Elemente farblich tiefer erscheinen, mit blauerem Blau und weißerem Weiß. Ich habe auch !importantwegen der berüchtigten CSS Specificity Wars hinzugefügt .

Was sich manchmal so anfühlt, als würde CSS mit uns schrauben, ist, wie und wann die Kaskade angewendet wird. Das heißt: "Wie kommt es, dass Stile manchmal angewendet werden und manchmal nicht?"

Dies ist nicht Schrödingers CSS, sondern einfache Mathematik. CSS verwendet einen einfachen Taschenrechner, um zu bestimmen, welche Regeln spezifischer sind, und das Ergebnis bestimmt, ob CSS angewendet wird oder nicht.

Die Mutter aller Spezifitäten ist !important, die alle Inline-, ID-, Klassen- und Elementregeln überschreibt. Es ist wie der Todesstern im Vergleich zu The Empire. Trotz der Tatsache, dass von der Verwendung !importantim Allgemeinen abgeraten wird, ist es perfekt für einen Debugger - da wir unsere Website nicht mit "aktiviert" versenden. Stattdessen verwenden wir den Debugger nur für das Design und die Entwicklung unserer Website.

Je öfter ich den Debugger benutzte, desto mehr wurde mir klar, dass die Verwendung *:not(path):noth(g)als Selektor bevorzugt wurde. Auf diese Weise würde ich keine überflüssigen Linien von Vektorgrafiken erhalten. Mir ist auch aufgefallen, dass das Deaktivieren box-shadowsauberer war, da der Debugger kein Gefühl für Tiefe benötigt.

Hier ist der letzte Debugger:

*: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;}

Ich denke, wir Menschen hassen, was wir nicht verstehen. Und CSS ist keine Ausnahme. Es ist falsch charakterisiert, weil es missverstanden wird. Ich schlage vor: Stellen Sie sich CSS als zweischneidiges Schwert vor. Es kann sowohl zum Erstellen als auch zum Dekonstruieren von Websites verwendet werden . Ja, CSS ist nicht Photoshop, aber das bedeutet nicht, dass es keine Dinge tun kann, die Photoshop nicht kann. Unseren eigenen Debugger Erstellen ist eine Sache , wir können tun.

Wie benutze ich diesen Debugger?

  1. Gehen Sie zu 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! ?