ManzDev
LightNews LightNews
banner
manz.dev
ManzDev
@manz.dev
370 followers 91 following 180 posts
@Twitch Partner | Web developer & Engineer | http://manz.dev
Content creator at http://lenguajeJS.com | I❤️HTML/CSS/JS
FullStack teacher at @eoi | «Odio quedarme a med
Posts Replies Media Videos
manz.dev
Por aquí tienes el post donde lo explico:
lenguajecss.com/css/grid/css...

Recuerda que ahora mismo, necesitas tener la flag "Experimental Web Feature" activa en Chrome para poder probarla.
CSS Decoration Gaps - CSS en español
Mediante las decoraciones de gaps podemos agregar líneas de decoración a nuestras maquetaciones flex, grid u otras. ¡Veamos como funcionan!
lenguajecss.com
September 18, 2025 at 2:30 PM
manz.dev
¡Las cosas están cambiando en CSS! Si te interesa aprender novedades, echa un vistazo al apartado de lógica CSS:

lenguajecss.com/css/#l%C3%B3...
Lenguaje CSS - CSS en español
CSS es un lenguaje de estilos utilizado en el ámbito del diseño web para dotar un sitio web de detalles estéticos, interacción y aspecto visual.
lenguajecss.com
September 4, 2025 at 11:54 AM
manz.dev
🎭 Polimorfismo

En prog: Un elemento puede usar comportamientos diferentes en distintos contextos

En CSS: Elemento flexible y adaptable para tener un comportamiento visual diferente según su contexto

¡Los media/container queries y los condicionales if() o :has() permiten aplicar lógica en CSS!
Polimorfismo - Antiguamente: Uso de la cascada o selectores complejos, cosa que podía aumentar especificidad y hacer poco intuitivo la aplicación de estilos. - Actualmente: Uso de condicionales if() o pseudoclase como :has(), así como media/container queries (incluso anidados con nesting) para cambiar comportamientos dependiendo de la situaciones.
September 4, 2025 at 11:54 AM
manz.dev
🧬 Herencia

En programación: Reutilizar y extender comportamientos desde jerarquías superiores

En CSS: Podemos dar estilo a elementos superiores y los inferiores obtienen esos comportamientos visuales.

La regla @layer (fusionar estilos) y CSS Shadow Parts (dar estilo a zonas encapsuladas).
Herencia - Antiguamente: Usando herencia tradicional, o keywords como inherit, initial o unset. Usar metodologías CSS para organizar y simular mecanismos superiores de herencia. - Actualmente: La regla @layer para evitar solapamientos de especificidades y Shadow Parts para dar estilo a secciones encapsuladas.
September 4, 2025 at 11:54 AM
manz.dev
🧠 Abstracción

En programación: Oculta detalles complejos y simplifica llevándolo a otro nivel.

En CSS: Dar estilo a un elemento puede ser muy verboso. Abstraer y simplificar permite verlo más sencillo.

¡Nesting CSS + variables + funciones CSS (y pronto mixins)! OpenProps también es excelente.
Abstracción - Tradicionalmente: Uso de procesadores para hacer más "programáticamente" cosas que CSS no podía hacer antes. Uso de TailwindCSS (u otros frameworks) para simplificar su uso y aumentar velocidad de desarrollo. - Actualmente: El nesting, las variables de CSS, las funciones de CSS (pronto los mixins) y OpenProps nos dan herramientas muy interesantes de abstracción.
September 4, 2025 at 11:54 AM
manz.dev
📦 Encapsulación

En programación: Guardar información aislada para controlar y proteger acceso externo

En CSS: Los devs suelen tener problemas al cambiar estilos por accidente debido a la naturaleza global de CSS.

¡HTML/CSS ya tiene encapsulación nativa!
Shadow DOM + @scope
Encapsulación: - Antiguamente: Simulada con BEM, o conseguida con terceros con CSS Modules. - Actualmente: Se puede conseguir con Shadow DOM (JS), Shadow DOM declarativo (HTML) y con la regla @scope para limitar ámbitos.
September 4, 2025 at 11:54 AM
manz.dev
En el siguiente link tienes los requisitos y el enlace de inscripción. Date prisa. Está planificado para empezar a finales de septiembre:

👉 www.eoi.es/es/cursos/93...

¡Comparte o etiqueta a alguien si crees que le puede interesar!
Curso de Programación y Diseño Web Frontend (Semipresencial – Gran Canaria) | EOI
PresentaciónObjetivo generalEl curso «Programación y Diseño Web Frontend» tiene como objetivo dotarte de los conocimientos, herramientas y habilidades necesarios para convertirte en un profesional alt...
www.eoi.es
September 3, 2025 at 11:28 AM
manz.dev
Por aquí tienes varios posts sobre todo lo que necesitas saber con Grid:
lenguajecss.com/css/grid/que...
Guía de Introducción a Grid - CSS en español
Grid CSS permite dejar atrás la problemática forma de crear diseños en CSS, aportando un modelo de cuadrículas o rejillas muy personalizable y flexible.
lenguajecss.com
August 25, 2025 at 4:38 PM
manz.dev
Tienes más información sobre la regla `@function`, condicionales `if()`, tipos de datos y funciones `random()` que se vienen a CSS en mi web:
lenguajecss.com/css/logica-c...
La regla @function en CSS - CSS en español
Descubre cómo definir y utilizar funciones reutilizables en CSS nativo para poder gestionar fácilmente los estilos de nuestra página o aplicación web.
lenguajecss.com
August 25, 2025 at 4:36 PM
manz.dev
✅ La función se usa sin el `var()`
✅ Sin parámetros, usa los valores por defecto
✅ Indicando un parámetro, procesa la función
🤩 Si tipas los parámetros e indicas un valor incorrecto, ¡usará los valores por defecto!

👇 Sigue
.logo { --size: 200px; width: var(--size); height: var(--size); background: --gradient(green); border-radius: 1rem; color: white; font-family: Outfit; font-size: 5rem; font-weight: 800; display: grid; place-items: end; padding: 1rem; }
August 25, 2025 at 4:36 PM
manz.dev
❓ ¿Qué otros «Destruyendo mitos» sobre Desarrollo web te gustaría ver y que analizara? ¡Coméntame y quizás aparezca en el siguiente!

👇 Aquí tienes más información sobre `.querySelector()` y profundizamos en sus detalles:
lenguajejs.com/dom/buscar/q...
querySelector: Buscar en el DOM - Javascript en español
Para trabajar desde Javascript con los elementos del DOM, necesitamos saber como buscarlos y acceder a ellos.
lenguajejs.com
August 22, 2025 at 11:24 AM
manz.dev
Por aquí tienes el video:
➡ youtu.be/3L3XJHkKSds

¿Qué opinas?
Una INTELIGENCIA ARTIFICIAL... ¿puede PENSAR y RAZONAR?
YouTube video by ManzDev
youtu.be
August 22, 2025 at 10:34 AM
manz.dev
👇 Por aquí tienes los enlaces al Baseline:

➡ lenguajecss.com/baseline/
➡ lenguajehtml.com/baseline/
➡ lenguajejs.com/baseline/
August 21, 2025 at 4:36 PM
manz.dev
Si tienes curiosidad y quieres aprender más sobre el Shadow DOM, echa un vistazo a este post de mis cursos gratuitos de DOM, Javascript y WebComponents:

lenguajejs.com/dom/shadow/a...
August 21, 2025 at 10:09 AM
manz.dev
Además, el Shadow DOM permite decirle al CSS «No puedes pasar!!» y obliga al CSS a volver a la sombra, impidiendo que se apliquen estilos fuera de su scope.
- Balrog CSS... Vuelve a la sombra!! - NO... PUEDES... PASAR!! (Gandalf, the developer)
August 21, 2025 at 10:09 AM
manz.dev
❌ Gran cantidad de HTML, vuelve el código confuso y es fácil cometer errores

✅ Crear una clase, y meter el HTML en un Shadow DOM simplifica el HTML y reorganiza, igual que con las clases OOP en programación

✅ Además, la API adoptedStyleSheets reduce los molestos FOUC (flash of unstyled content)
EVITAR: <div class="family"> <div class="person"> <h1>Grandfather</h1> <fieldset> <legend>Children</legend> <div class="person"> <h1>Uncle</h1> <fieldset> <legend>Children</legend> </fieldset> </div> <div class="person"> <h1>Parent</h1> <fieldset> <legend>Children</legend> <div class="person"> <h1>Child</h1> <fieldset> <legend>Children</legend> </fieldset> </div> </fieldset> </div> </fieldset> </div> </div> MEJOR: <family-member name="GrandFather"> <family-member name="Uncle"></family-member> <family-member name="Parent"> <family-member name="Child"></family-member> </family-member> </family-member>
August 21, 2025 at 10:09 AM
manz.dev
Si te interesa, en mi web tengo un curso completo y gratuito para aprender a utilizar el DOM, paso a paso:

➡ lenguajejs.com/dom/
August 20, 2025 at 10:40 AM