💥Strangers Things (Cosas extrañas en CSS)💥
Todos encontramos cosas extrañas en código CSS continuamente. Pero veamos algunas de ellas, y la forma recomendada de abordarlas hoy en día...
¡Te lo explico en un par de tweets!
#StrangerThings4 #css #javascript
🧵🔽
1️⃣ No agrupes selectores en la misma línea, separa.
2️⃣ Aunque tengas canal alfa, usa RGB() y no RGBA(). Incluso ya puedes usar hexadecimal con canal alfa.
3️⃣ Si tienes propiedades con valores múltiples, separa en múltiples líneas.
4️⃣ Usa variables CSS. Se colocan al inicio, separados por una línea en blanco del resto de props. ¡Y tienen ámbitos locales!
5️⃣ Se pueden guardar todo tipo de datos: medidas, gradientes, colores, funciones css, keywords, etc...
6️⃣ Con `var()` puedes usarlas y añadir un fallback.
7️⃣ Cuidado al usar @Imports (son peticiones adicionales desde el cliente). Considera:
- Usar <link>
- Añadir resource hints para precargar
- Usar `@font-face` para tipografías
8️⃣ ¡Ojo, que ya tenemos capas en CSS!
9️⃣ Existen múltiples criterios de ordenación de propiedades: alfabéticos, por longitud, etc...
Mi preferida: Separar por tipo/categoría. Es fácil de mantener e intuitivo para predecir si existe algo.
1️⃣0️⃣ Aprende a dominar la especificidad CSS. Cuando usas `!important` frecuentemente es porque no conoces la especificidad.
Tómate un tiempo en aprender como funciona. Si no es suficiente para ti, investiga BEM, CSS Modules o Shadow DOM (WebComponents) y metodologías CSS.
1️⃣1️⃣ El nesting (anidar CSS) es una característica genial para mantener código CSS y tenerlo mucho más organizado.
Se basa en colocar selectores dentro de otros. Aún no está disponible en CSS vanilla (lo estará) pero se puede usar con:
- Sass
- PostCSS
- ParcelCSS
1️⃣2️⃣ Quizás el más importante de todos: Usa Stylelint (linter CSS). Al igual que utilizas ESLint para Javascript, Stylelint te revisa el código CSS y te aconseja como solucionar problemas, formas de corregir errores y mejorar tu estilo de código CSS.
Si te ha gustado, ¡Sígueme en Twitch!
twitch.tv/ManzDev
También puedes seguirme en Instagram (puedes ver todos los hilos y storys):
instagram.com/manz.dev
O ver directos anteriores de Twitch en Youtube:
youtube.com/c/ManzDev
¡Gracias a @Maxi83c_ por los stickers!
Mastering CSS
Si te interesa aprender más sobre las variables css (css custom properties), tienes:
1️⃣ Un hilo sobre ellas:
2️⃣ Un post sobre ellas:
lenguajecss.com/css/introducci…
Por aquí hablo de la regla @import de CSS:
lenguajecss.com/css/reglas-css…
Si quieres información del nuevo sistema de capas de CSS, echa un ojo a:
1️⃣ Artículo sobre la regla @layer de CSS lenguajecss.com/css/reglas-css…
2️⃣ Video sobre la regla @layer en CSS
Si no tienes ni idea de este tema y quieres saber más sobre las bases de la especificidad CSS:
Yo estoy usando Parcel CSS en LenguajeCSS.com y la verdad funciona super bien y me resulta muy cómodo.
Hablamos y probamos Parcel CSS en Twitch, aquí tienen el video:
Si prefieres PostCSS, aquí:
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.