CSS Evolution: Modern Web Styling

Rate this content
Bookmark

En un mundo de componentes escritos en JavaScript, CSS se convirtió en un ciudadano de segunda clase. Pero olvida los memes. En esta charla, Tony muestra cómo el CSS moderno puede ser el mejor amigo de los desarrolladores de JavaScript, ahorrando tiempo de codificación y evitando los tipos de problemas de estilo que solían atormentar a los desarrolladores de JS y que han resultado en una miríada de abstracciones de CSS competidoras, que quizás ya no sean tan necesarias.

This talk has been presented at JSNation US 2024, check out the latest edition of this JavaScript Conference.

Tony Alicea
Tony Alicea
11 min
21 Nov, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Hola, soy Tony Alisea, un desarrollador con más de 25 años de experiencia. CSS ganó en los 90 debido a su separación de estructura y presentación, concepto de cascada y selectores poderosos. Los desarrolladores de JavaScript se desenamoraron de CSS cuando comenzaron a usar frameworks para construir el DOM. En lugar de mirar el DOM de manera holística, comenzamos a pensar en términos de componentización. CSS ha seguido creciendo y añadiendo características extraordinarias, como anidamiento de CSS y capas de cascada. Las capas de CSS dan más control sobre la estratificación de estilos CSS. Las consultas de contenedor nos permiten responder al tamaño del contenedor en lugar del viewport. La pseudo clase has permite seleccionar elementos padre. CSS ahora es más amigable con los componentes y mejora la experiencia del usuario.
Video transcription and chapters available for users with access.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Instalar Nada: Interfaces de Aplicación con APIs Nativas del Navegador
JSNation 2024JSNation 2024
31 min
Instalar Nada: Interfaces de Aplicación con APIs Nativas del Navegador
This Talk introduces real demos using HTML, CSS, and JavaScript to showcase new or underutilized browser APIs, with ship scores provided for each API. The dialogue element allows for the creation of modals with minimal JavaScript and is supported by 96% of browsers. The web animations API is a simple and well-supported solution for creating animations, while the view transitions API offers easy animation workarounds without CSS. The scroll snap API allows for swipers without JavaScript, providing a smooth scrolling experience.
Construir un Sistema de Diseño con React y Tailwind CSS
React Summit 2022React Summit 2022
27 min
Construir un Sistema de Diseño con React y Tailwind CSS
Top Content
This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.
Ampliando los límites de la codificación de video en navegadores con WebCodecs
JSNation 2023JSNation 2023
25 min
Ampliando los límites de la codificación de video en navegadores con WebCodecs
Top Content
This Talk explores the challenges and solutions in video encoding with web codecs. It discusses drawing and recording video on the web, capturing and encoding video frames, and introduces the WebCodecs API. The Talk also covers configuring the video encoder, understanding codecs and containers, and the video encoding process with muxing using ffmpeg. The speaker shares their experience in building a video editing tool on the browser and showcases Slantit, a tool for making product videos.
Cómo lograr la composición de diseño en React
React Summit 2022React Summit 2022
8 min
Cómo lograr la composición de diseño en React
This talk discusses achieving layout composition in React using Bedrock Layout Primitives. By componentizing CSS layout, complex layouts can be achieved and reused across different components. The talk also covers the challenges of achieving complex layouts, such as card lineups, and provides solutions for maintaining alignment and responsiveness. The BedrockLayout primitive library simplifies web layouts and offers flexibility in composing layouts.
Estilo Seguro para Paquetes de Componentes React: Vanilla Extract CSS
React Advanced 2023React Advanced 2023
19 min
Estilo Seguro para Paquetes de Componentes React: Vanilla Extract CSS
Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.

Workshops on related topic

Escribiendo Módulos Universales para Deno, Node y el Navegador
Node Congress 2022Node Congress 2022
57 min
Escribiendo Módulos Universales para Deno, Node y el Navegador
Workshop
Luca Casonato
Luca Casonato
En este masterclass te guiaré en la escritura de un módulo en TypeScript que pueda ser utilizado por usuarios de Deno, Node y los navegadores. Explicaré cómo configurar el formato, linting y pruebas en Deno, y luego cómo publicar tu módulo en deno.land/x y npm. Comenzaremos con una breve introducción sobre qué es Deno.