Episodio #107

CSS es Genial

Natalia y Angel defienden al CSS de las críticas que en algunos rincones del internet se hacen de este noble lenguaje de estilización y exponen algunas de sus virtudes poco conocidas.

Links de Recursos

Transcripción

Angel El tema del día de hoy, como el título del episodio lo indica es que el CSS es genial. Pues viene siendo como una especie de, tal vez, episodio en defensa del CSS. ¿Y por qué habríamos nosotros de necesitar hacer un episodio en donde hablemos en defensa del CSS?

Bueno, pues porque, digamos que en algunos rincones del internet, no tiene muy buena fama ¿no?. El CSS en algunos círculos tiene una reputación, tal vez, mala, y pues llega a ser objeto de burla muy seguido. En redes sociales, así, a veces podemos encontrar memes ¿no?, que de una manera gráfica nos indican lo horrible que es el CSS, lo horrible que es trabajar con él, o no sé, cosas por el estilo.

Natalia O un tipo de memes en las que se burlan del CSS, como si fuera un tipo de, herramienta, de lenguaje, poco útil, como si fuera… rota… o como si estuviera, no sé…

Angel Sí, como si que el es CSS chafa ¿no?, y es motivo de burla y es así de “ja ja ja, mira lo inútil que es el CSS”…

Natalia Sí, y en lo personal es algo que no me gusta ver, por eso también sentimos la necesidad de decir: ¡NO! ¡Esto no es cierto, el CSS es genial y te lo vamos a demostrar!

Angel Ándale ¿no?. La principal queja que he visto que tienen estas personas es o que el CSS no es suficientemente poderoso, o sea que este lenguaje de estilización de markup le hacen falta cosas ¿no?, que debería de hacer más que las cosas que ya es capaz de hacer o que no es suficientemente, tal vez, intuitivo de utilizar. Que puede ser complejo o que a lo mejor, no sé, que nos pasa de que arreglamos un problema y al arreglar un problema, se rompe por otro lado porque CSS es tan chafo o tan difícil de utilizar, que es complejo de esa manera y esa es una queja que he visto: “esto no pasaría en otros lenguajes”

Natalia [murmullando] Sí… lenguajes de programación que es otra cosa diferente…

Angel No es un lenguaje de programación.

Natalia Yo la queja que he visto es que si cometes un error en CSS, es muy difícil poder detectar ese error, porque todo se sigue… pues como si no hubiera pasado, porque no…

Angel Ignora simplemente lo que no entiende…

Natalia Ajá

Angel O está mal escrito.

Natalia Y luego es frustrante decir: “Oh!, esto no está funcionando pero no sé por qué” Y entonces tienes que regresar a ver y es medio difícil de encontrar el por qué. [A diferencia de los lenguajes de programación que cuando cometes un error, por ejemplo de sintaxys, puedes depurar el código y te aparece la línea mal escrita]

Angel Y por esto y muchas cosas más, la gente a veces le tiene mala fe al CSS, lo pueden llegar a ver como menos.

Natalia Así es y yo lo que creo es que el CSS no tiene tanto la culpa, estas características de las que la gente luego se queja, por ejemplo lo que mencionaba que luego cometes un error y lo ignora… ¡Eso es una ventaja! Una ventaja muy grande que te permite, pues, en parte desarrollar de manera progresiva [O sea, con progressive enhancement].

Entonces, a la conclusión a la que yo llego, es que más que culpa del CSS, son las personas que luego al utilizarlo, tienen un conocimiento un poco menor de cómo funciona el CSS, cómo se comporta y eso es lo que ocasiona a que tengan tantos problemas.

Angel Coincido bastante contigo, yo tengo la misma hipótesis. Muchas de estas, tal vez, no sé, confusiones o malentendidos se den por falta de conocimiento a fondo de la herramienta que estamos utilizando, en este caso el CSS.

Porque, aunque a lo mejor, varios de nosotros llevemos mucho tiempo utilizándolo, eso no significa que seamos expertos en CSS o que lo conozcamos a fondo. Y esto para mí, cuando me llegó esa revelación… ¡Es importante! ¿no?, porque no por usar algo todo los días significa que lo conoces…

Natalia Muy a fondo.

Angel Muy a fondo, bien o te lo sabes de todas a todas. Yo me acuerdo bastante, hace años tenía un vocho y lo usé por muchísimos años y justo antes de, no sé, que fuera vendido, descubrí cómo poner las altas.

Y para mí fue: “Whaaaaaaaaat?, Yo pensé que no tenía altas”.

[Natalia se ríe]

Entonces, pues esto es algo así ¿no?. No importa cuántos años estés usando algo, eso no significa que ya sepas todos sus pormenores. Y esto, yo creo que es muy relevante en cuestión del CSS.

Natalia Y fíjate, ahora que mencionabas de tu vocho, que no sabías utilizarlo tan bien como creíste… Yo creo que esta revelación acerca de que no sabemos utilizar tanto nuestra herramienta como realmente… como creemos, nos llega a suceder a todos. A mí me pasó con Photoshop, yo, hace tiempo pues llegaba a creer que Ufff!, yo era una experta en Photoshop y que yo lo sabía utilizar bastante bien solamente porque lo manejaba un poquito mejor que mis compañeros de la época. Pero no fue hasta el momento en el que estuve expuesta a ver cómo otra persona utilizaba Photoshop sin nada [me refiero a ninguno de los menús, usaba la pantalla completa]. O sea, la pantalla completa sin ninguna clase de herramienta visual como los iconitos y así, los menús ni nada.

Y así lo utilizaba como si nada. Dije: “Wow, es que realmente yo no sé tanto Photoshop como yo creía, porque yo no soy capaz de hacer nada si no tengo aquí mis… los iconitos que me digan, no sé, qué herramienta puedo utilizar.”

Y es algo que nos puede llegar a suceder a todos, ¿Realmente sabemos utilizar tan bien CSS como creemos?

Angel Esto es importante porque, ¿Qué tan seguido nos cuestionamos nuestro conocimiento actual de la herramienta? O sea, realmente qué tan seguido decimos: “Mmmmm, ¿Cómo estará mi nivel de CSS?” Y al mismo tiempo ¿Cómo mido mi nivel de conocimiento, en este caso de CSS?

Porque me ha tocado ver por ahí algunos currículums que dicen: “Nivel de CSS - Experto”. Para mí un experto es alguien que se lo conoce al derecho y al revés y esto…

Natalia Alguien al nivel de Lea Verou.

Angel Ándale, bueno, de hecho ahorita que mencionas a Lea Verou. Lea Verou es una de esas personas que son héroes míos porque demuestran esto que estamos tratando de decir aquí. Cuando conoces a fondo tu herramienta la puedes usar al máximo, y el CSS hace unas cosas increíbles.

Lea Verou tiene muchos ejemplos de esto. Lea Verou… de hecho hace algunos cuantos episodios atrás, creo hice un review de un libro de ella que se llama CSS Secrets, y aquí vienen muchas cosas de esas: Pequeñas maneras interesantes de cómo realmente usar al máximo propiedades.

Porque a veces creemos nosotros que ya sabemos utilizar alguna propiedad, digamos, el border-radius ¿no?, para poder hacer orillas redondeadas, que durante muchísimos años no pudimos tener orillas redondeadas y teníamos que estar usando imágenes y cosas así. Después tuvimos por fin orillas redondeadas y la mayoría de la gente asume así como: “Ah! orillas redondeadas, pues claro, le pones cuántos píxels y ya”.

Natalia border-radius, pixeles y ya.

Angel Ajá y ya sé usar eso. Yo era de esas personas, que [pensaba que] border-radius es todo lo que tiene que ofrecer. Sin embargo me tocó ver una plática de Lea Verou donde… me parece que se llamaba: El humilde border-radius y entraba a sumo detalle donde ella te contaba cómo se puso, precisamente a analizar a fondo esta propiedad, ¿Cómo funciona, qué es lo que hace?

Y al hacer eso, entiende mejor ella cómo poder explotarlo en conjunto con otras propiedades y a lo largo de toda esta plática la ves hacer cosas con border-radius que sinceramente es así como: ¡No tenía ni idea que podía usar border-radius de esa manera!. A lo mejor mi capacidad de usar border-radius estaba limitada por no conocer a fondo realmente cómo funciona y qué hace.

Entonces, aquí es donde podemos nosotros, yo creo, desbloquear el verdadero poder del CSS, porque no se trata nada más de que desconozcamos que existe cierta propiedad o cierto selector, ¡no!, muchas veces se trata de a lo mejor esa propiedad o selector que estamos ocupando más seguido, hace más de lo que nosotros sabemos que hace.

Pero no lo vamos a descubrir si no nos da esa curiosidad de investigar un poco.

Natalia De entender más a fondo cómo es que se comporta.

Angel ¡Exactamente!. Hay otra persona también, similar a Lea Verou, que se llama… bueno se hace llamar en twitter Ana Tudor. Cuando alguien dice que es experto en CSS, yo usualmente no les creo a menos que sea o Lea Verou o Ana Tudor.

Natalia Yo creo que en vez decir “experto” o algo así en tu currículum, deberías de poner: ¿A nivel de cuál de estas personas te comparas?

Angel Sí, así de que: “1/3 de Lea Verou”.

[Risas]

Ajá, exacto, estas personas tienen un conocimiento, así de que, nivel Dios ¿no?.

Pero, es muy poca la gente que tiene ese conocimiento. Ahora, muy importante, ellos mismos fíjate, ellos mismos lo dicen: “Si tu supieras más a fondo lo que hacen las propiedades, no te estarías quejando del CSS”.

Natalia U-hum.

Angel Muchas de estas cosas, muchas de estas quejas, vienen de no entender, de no saber que existen…

Natalia Así es, yo en ocasiones, he decirte, que de repente participo en foros y algo así donde hay, pues gente preguntando: “Oigan, hice esto y no me sale y no entiendo por qué”. Y luego te ponen el link hacia donde tienen su página donde tienen este problema y te pones a analizar…

Imagínate yo, yo que ni me considero que tengo el conocimiento que tú tienes… ¡imagínate!. Entonces yo lo veo y digo: “Es que el nivel de especificidad que tú estás intentando sobre-escribir…” Porque generalmente son preguntas de un Framework ¿no? [De personas usando un framework]

Angel U-hum.

Natalia [la especificidad] No alcanza a sobre escribir la clase que tiene el Framework, y es ¡especificidad!, ¡simplemente especificidad! de lo más básico, ni siquiera es como hacer… usaron una propiedad…

Angel Ajá, es meramente el selector.

Natalia Exacto. Y son cosas así como esas, básicas que luego no se entienden a profundidad, que ya deberían de tenerlo pues aquí, luego luego ¿no?.

Angel Ajá, de hecho, mira, hay una persona que, lamentablemente en este momento no recuerdo el nombre, él tiene un blog muy interesante, escribe mucho, que me gusta bastante porque él se ha dedicado a… cada que ve algo en una red social, así como estilo meme como comentábamos al inicio, donde: “El CSS no hace esto y jajaja”. Agarra eso y él demuestra cómo es que el CSS sí hace eso.

O sea, básicamente agarra todas estas cosas y prueba cómo es que esa burla, esa queja es infundada, porque el CSS sí lo hace, simplemente que la otra persona no tiene el conocimiento para…

Natalia No tienes conocimiento suficiente como… tú mismo, de manera abstracta crear una solución con CSS. Y es que realmente ¿Cómo puedes tú comenzar a conocer realmente lo que es CSS?

Yo por darte un ejemplo… ¿Cómo aprendiste tú o cómo aprendí yo?

Yo aprendí nada más viendo… de repente cosas que yo leía en Internet y luego algunos videos y… no sé, sentarme con alguien que dice: “Mira, tú nada más ponte a ver lo que yo hago y después lo haces tú” [sin ninguna clase de explicación más a fondo de cómo funciona el CSS]

Y esa fue la manera en la que yo estaba aprendiendo. ¿Cómo puedes dar un paso más adelante para entenderlo mejor?

Angel Se me hace excelente esta pregunta. ¿Cómo lo llevamos al siguiente nivel? ¿Cómo mejoramos nuestro CSS-Fu?

Bueno, pues mira, yo me acuerdo mucho de cuando estaba aprendiendo Sass, en este caso. Hace mucho tiempo cuando Sass era nuevo, no había para nada tantos tutoriales como hay hoy en día o artículos así de “aprede Sass”.

La mejor manera que tenía yo en ese momento era visitar la referencia de Sass. Ver todas las cosas que hacía, leer: “Sass tiene esta propiedad que hace esta cosa, lo usas de esta manera, no sé qué, no sé qué”. Ok, y el otro, y así me chuté toda la referencia, a pesar de que no te vas a acordar de todas las cosas a sumo detalle, pero al menos sabes que ahí están y aprendes más.

Entonces, de la misma manera yo creo que, también visitar una referencia de CSS nos puede ayudar también para 2 cosas. Número uno: Conocer a lo mejor cosas nuevas que desconocemos que CSS tiene, porque créanme, hay muchas cosas que no saben que tiene. Yo esto lo descubrí también hace poco, gracias a la referencia de Mozilla.

Mozilla no es el único lugar donde pueden encontrar una referencia de CSS, pero es un lugar donde es muy completo. La referencia para desarrolladores de Mozilla, ahí les voy a dejar el link en los recursos.

Sinceramente, yo les recomiendo que, dedíquenle de vez en cuando un rato a ver todas las propiedades existentes, selectores también. Selectores es algo muy interesante. La mayoría del trabajo que hacemos en una página web, para estilizarlo, dependemos de selectores primero antes que de las propiedades.

¡Y tenemos muchísimas más opciones que solamente clases y ids!. Y ¿realmente las conocemos, las podemos explotar al máximo?

Natalia Es lo que te iba a decir, que muchas veces yo veo que en vez de estar utilizando los selectores, siempre estamos creando clases. Cuando realmente puedes hacer lo mismo con un selector de CSS y te ahorras una clase.

Angel Digo, una clase es un selector, pero hay otras maneras en las que nosotros también podemos seleccionar y estilizar cuestiones de nuestro HTML. Por darte un ejemplo bien sencillo, hace poco vi una tabla en una página, no sé si haz visto que a veces para que se lea más fácil la información en una tabla, tienen una columna de un color y otra de otro…

Natalia Una fila.

Angel Ajá. Y se van intercambiando, un color sí, un color no, un color sí, un color no. [Angel se refiere a la tabla estilo “cebra”, que precisamente alterna colores para facilitar la lectura de datos tabulares]

Natalia Ajá.

Angel Bueno, chequé cómo lo estaban haciendo, porque ya te había contado que tengo la manía esta de que casi todas las páginas que visito, estarlas inspeccionando. Y lo estaban con clases. Entonces cada columna que tenía un colorcito más oscuro, tenía una clase que era .odd, o sea, odd es como impar, en inglés.

Entonces, esta columna que tuviera la clase .odd, se iba a pintar así. Cuando eso lo puedes hacer muy fácilmente con nth-child, y ya no tienes que andarle poniendo esta clase al HTML.

Y nth-child no es nuevo, ya tiene tiempo. Sin embargo, ahí es… bueno, yo lo vi como un ejemplo de esto, a veces no sabemos todo lo que nos ofrece el CSS. Entonces estar checando las referencias de CSS es una muy buena manera de estar al tanto de qué cosas existen y también de cómo utilizarlas.

Lo que sea de cada quién, te digo, la referencia de Mozilla a mí se me hace muy completa. Y nosotros también pudiéramos tal vez aplicar un poco de curiosidad, simplemente, de cuestionarnos más seguido si las cosas que estamos utilizando con CSS es la única manera de usarlo ¿no?, si no existe una mejor manera o una manera alterna tal vez.

Natalia Sí, yo creo que si nos estamos dedicando al Front-end, un buen hábito sería, no sé, dedicarnos un día a la semana o una hora al día a decir: “El día de hoy me voy a estudiar esta propiedad”. Y me voy así, no sé, visito el MDN que es la referencia de Mozilla, y diario leo una. Y yo sé que a lo mejor no lo voy a aplicar ese día y se me va a olvidar al día siguiente, no lo voy a tener aquí, pero a lo mejor en un momento en el que lo ocupe me puedo acordar de ella, que ya está ahí.

O me puedo dar a la tarea de encontrar esta propiedad y decir: “¿Qué han hecho estas personas con esta propiedad?”. Y voy estudiándola poco a poco.

Angel U-hum. Yo sé que suena bien sencillo, o sea,”visita la referencia y léela todos los días, Wow”. Es como ¿En serio, ese es el secreto? Pero sí, muchas veces es simplemente investigar y ver si lo que estamos usando realmente lo estamos usando a su máxima expresión.

Natalia Ajá, porque eso es lo que sucede, que no le estamos sacando el provecho que pudiéramos al CSS.

Angel Ajá, mira fíjate, recientemente yo he empezado a descubrir cosas nuevas que he usado, que digo: “¡Wow!, ¡No tenía idea que esto estaba aquí!” Y no tenía idea también sobre todo de que ya lo podía usar. Aquí es donde páginas como Can I Use?, que es esta página donde tú puedes ver el soporte de navegadores para diferentes propiedades.

Muchas de ellas ya tienen muy buen soporte, mira, cosas recientes que he empezado a usar que me han gustado bastante, es, una propiedad de CSS que básicamente es un feature query que se llama @support. Es para detectar si un navegador soporta una propiedad y entonces, si la soporta, hacer algo.

O sea, es como un Media Querie donde estás diciendo: “mínimo tanta anchura y entonces haz esto”. Es lo mismo excepto que acá estás evaluando si… ajá.

Natalia Si la soporta o no la soporta.

Angel Y de la misma manera como los Media Queries, puedes también concatenar cosas, de que: “si soporta esta y esta otra, entonces haz esto”. O si no soporta, también puedes negar con not. O sea de: “Si no soporta esta propiedad entonces haz esta otra cosa”

Y es así como un mundo de que ¡WOW! No tenía idea de que podía, pues utilizar este tipo de cosas. A mí se me ha hecho muy interesante, otra cosa que también, cada vez uso más es, este que se llama not.

Natalia U-hum.

Angel Que es una, pues es una negación not. ¿Y para qué sirve? Pues como su nombre indica, niega algo. Entonces podemos negar que: “Seleccióname todas estas cosas que no tengan, a lo mejor, esta clase”. A lo mejor tienen una serie de paragraphs pero uno de ellos tiene una clase en particular y ustedes quieren aplicarle CSS a todos los paragraphs, excepto el que tiene esa clase en particular. Bueno, ahí es donde a todos los <p> que no tengan esta clase, aplícale esto.

Un ejemplo también, tal vez un poco más útil es que lo puedes combinar junto con otras cosas como first-child o last-child. Hace no mucho, estaba en necesidad de estilizar una lista de, así como un menucito con bordes y todo bien bonito, pero el último elemento no debía de llevar estilos, pues.

O sea todos los demás sí excepto el último. Hay varias maneras de hacer esto ¿no?. Una de ellas es, primero a todos los <li> pónles este borde y después generas otro selector y le pones al &lt;li> last-child remuévele esta propiedad, o sea, negando lo que ya le habías aplicado a todos.

O en este caso podías decirle: A todos los &lt;li> que no sean el último elemento, aplícale esto.

O sea ya no tuve que escribir otro selector más… ajá.

Natalia Para deshacer lo que ya habías hecho. ¡Mmmm!

Angel ¡Y hay muchas cosas que se pueden utilizar, que ya están ahí! Que podemos aprovecharlas, o también, hace poquito estaba leyendo un artículo sobre una persona que estaba exponiendo por qué no usábamos más Media Queries verticales.

Porque los Media Queries casi siempre ponemos, de que: Mínimo tantos píxels o máximo tantos píxels, pero siempre es de ancho. O sea, mínimo tantos píxels de ancho, ¿Cuándo hemos puesto nosotros: Mínimo tantos píxels de alto?

Y a lo mejor, ¿para qué pudiéramos utilizar esto? Pues…

Natalia Teléfono o el iPad en vertical… O bueno, iPad o tablet en vertical.

Angel Ajá, paro cuando tenemos algo, como dijiste, una pantalla que es más alta que ancha, en ese caso a lo mejor, tal vez, quisiéramos hacer ajustes tipográficos, de que, métele más interlineado entre más alta esté la pantalla. No sé, pero no porque a lo mejor nada más estemos usando las cosas de una manera, significa que no las podamos empezar a usar de otra manera.

Me parece que Apple también usa Vertical Media Queries para ajustar banners y así. Entonces, son cosas interesantes que no todos los días ves que son usadas.

O otra por ahí, estaba viendo un sitio que, no tengo idea de por qué se esforzaron tanto, pusieron un chorro de <div> para poner varios background que estaban mezclados, uno sobre otro, imágenes de fondo…

Y dije: “¿Qué onda con esto? ¿Por qué no usan simplemente múltiples background?”. Es algo que ya existe, no tienes que ponerlo en diferentes <div>, ajá.

Entonces, son muchas cosas así, a veces son cositas pequeñas, pero a veces son descubrimientos grandes que no sabíamos que existían ¿no?. O cosas que van a venir, por ejemplo, ya desde hace bastante tiempo, los navegadores han ido implementando cosas de CSS nivel 4. Por ejemplo las variables en los navegadores, les llaman custom properties, no son nada más variables.

Todo esto es algo que para mí, convierte al CSS en una herramienta bien, bien poderosa y que todavía luego ves a la gente quejándose, de que es chafa.

Dices: ¿En serio?.

Natalia Sí, yo creo que la mayoría de estas quejas, se debe más a la falta de conocimiento que se tiene de esta herramienta, lo cual es una verdadera lástima porque no se le está sacando el verdadero provecho.

Angel Así es, todo el jugo que le pudiéramos sacar al CSS.

Natalia U-hum.

Angel Y este es el momento del episodio donde los exhortamos a conocer más su CSS. A investigar un poco más sobre las cosas que están usando, pueden consultar como decía hace rato, la referencia y descubrir cuáles son todas esas otras cosas que tal vez no conocen. Créanme que se van a topar con bastantes cosas nuevas, no nada más estoy hablando de propiedades nuevas, sino, se van a dar cuenta que cosas que ya están usando ahorita, hacen más de lo que ustedes están haciendo con ellas.

Natalia U-hum! Importantísimo no quedarse asumiendo que tenemos todo el conocimiento, siempre hay algo nuevo que aprender. Y pues empezar a seguir a estas personas que están experimentando [con CSS, como Lea Verou o Ana tudor] para ver lo nuevo que hay, leer sus libros y pues estar activos.

Angel Ajá. Yo, ahí voy a dejar otra vez en los episodios… [corrige] en los recursos el link al libro de Lea Verou, es un libro muy padre y realmente, no sé, como les decía, para mí, Lea Verou es mi héroe personal, si yo pudiera, le pondría un altar.

Bueno, pues ahora sí, ya llegamos al final del episodio, esperamos como siempre que les haya sido de utilidad, que a lo mejor les ayude a re-evaluar qué tanto conocen de CSS y que los motive a seguir conociendo mejor esta herramienta porque es la manera en la que van a poder ustedes ser maestros de ella.

Natalia ¡Bien dicho!

Angel Sin más por el momento, nos despedimos ¡Hasta la próxima!