¿Aprende este extraño? Truco para depurar CSS

¡Los diseñadores lo ODIAN! ?

¿Aprende este extraño? Truco para depurar CSS

* No clickbait *

Antes de llegar al artículo, solo quiero compartir que estoy creando un producto y me encantaría recopilar algunos datos sobre cómo servir mejor a los desarrolladores web. Creé un breve cuestionario para consultar antes o después de leer este artículo. Por favor, compruébalo, ¡gracias! Y ahora, volvamos a nuestra programación habitual.

¡Hola! ? ¡Soy Zaydek! Cuando me propuse por primera vez aprender a crear sitios web, fue mucho más doloroso de lo previsto. Después de todo, soy un diseñador gráfico con experiencia y programador - ¿cómo podrían ser sitios web t sombrero duro?

En este artículo, detallo las decisiones que me llevaron a crear un depurador de CSS.

También enseñé un curso gratuito de HTML / CSS en Scrimba donde enseño cómo crear un blog hermoso desde * cero *. ¡Haga clic aquí para inscribirse! ?

Scrimba.com es una plataforma interactiva de front-end donde los sitios web se registran como eventos, no como videos, ¡y se pueden editar! ?

¿Qué es un depurador?

Hay una gran cita de Donald Knuth sobre depuración. Parafraseando, es algo como esto.

Alguien: "¿Cuál es el mejor lenguaje de programación?" Donald Knuth: "¿Cuál tiene el mejor depurador?"

No llegué a apreciar esta idea hasta CSS. Los lenguajes de programación tienen esta razonabilidad, donde la lógica supera la opinión. Pero CSS es diferente porque CSS "se siente" obstinado.

Entonces, ¿qué podemos hacer? Bueno, ¡podemos escuchar los buenos consejos de Donald Knuth y usar un depurador!

Donde un lenguaje de programación es una herramienta, un depurador es una herramienta que podemos usar para comprender nuestra herramienta: nuestro código. No a toda la gente de las ciencias de la computación les gustan los depuradores, y lo entiendo.

No hagas que la computadora haga lo que no entendemos. Creo que hay mérito en esto, pero de lo que estoy hablando aquí es de revelar una estructura donde de otra manera sería invisible.

Toma lo siguiente:

¿Qué podemos hacer para ver la estructura de nuestro sitio web? Aquí hay dos soluciones que conozco: podemos crear reglas CSS únicas para enfatizar un elemento, o podemos usar las herramientas de depuración de Chrome, Firefox o Safari. Pero esa sigue siendo más o menos una solución única. Lo que necesitamos es una solución general .

Nuestro depurador

No hace mucho estaba diseñando este encabezado y no era sencillo. La intención era colocar una imagen sobre un texto de varias líneas. Debería ser simple, ¿verdad?

Bueno, ¿CSS es el antagonista? aquí. Lo que de otra manera sería simple en Photoshop puede ser el viaje de un héroe en CSS, y esto me llevó a experimentar con outline:

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

Nada demasiado especial, solo líneas blancas suaves. Lo que sí tenemos, sin embargo, es una regla que se aplica a todos los elementos, siempre y cuando usamos una *y no el nombre de la id, classo element.

Sin embargo, la introducción de la * { … }fue profunda para mí. Pensé: "¿Dónde no querría esto?" Así que agregué algunas líneas más y desarrollé un depurador más formal:

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

¡Mucho mejor! Aquí hemos creado una sensación similar a un esquema para nuestro sitio web. Tuve cuidado de no usar colores sólidos, sino que elegí colores suaves o colores con un canal alfa para que los elementos anidados parezcan más profundos, con azules más azules y blancos más blancos. También agregué !importantdebido a las infames guerras de especificidad de CSS.

Lo que a veces puede parecer que CSS nos juega es cómo y cuándo se aplica la cascada. Es decir, "¿Cómo es que los estilos a veces se aplican y otras no?"

Este no es el CSS de Schrodinger, es matemática simple. CSS utiliza una calculadora simple para determinar qué reglas son más específicas y el resultado determina si se aplica CSS o no.

La madre de toda la especificidad es !important, que anula todas las reglas en línea, ID, clases y elementos. Es como la Estrella de la Muerte en comparación con El Imperio. A pesar de que, !importanten general, se desaconseja el uso de , es perfecto para un depurador, porque no enviaremos nuestro sitio web con él "encendido". En su lugar, utilizamos el depurador solo en el diseño y desarrollo de nuestro sitio web.

Cuanto más usaba el depurador, más me di cuenta de que *:not(path):noth(g)se prefería usarlo como selector. De esta manera, no obtendría líneas extrañas de los gráficos vectoriales. También noté que la desactivación box-shadowera más limpia, ya que el depurador no necesita un sentido de profundidad.

Entonces, aquí está el depurador 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;}

Creo que los humanos odiamos lo que no entendemos. Y CSS no es una excepción. Está mal caracterizado porque se malinterpreta. Propongo: piensa en CSS como un arma de doble filo. Se puede utilizar tanto para construir como para deconstruir sitios web . Sí, CSS no es Photoshop, pero eso no significa que no pueda hacer cosas que Photoshop no puede hacer. Crear nuestro propio depurador es una cosa que podemos hacer.

¿Cómo utilizar este depurador?

  1. Vaya a 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! ?