Video: It’s Time to Fall in Love With CSS (Again)

From Author:

In a world of components written in JavaScript, CSS became a second-class citizen. But forget the memes. In this talk Tony shows how modern CSS can be a JavaScript developers best friend, saving coding time, and avoiding the kinds of styling problems that use to plague JS devs and have resulted in a myriad of competing CSS abstractions, which may not be so necessary any more.

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

Rate this content
Bookmark
Video summary
Hi, I'm Tony Alisea, a developer with over 25 years of experience. CSS won in the 90s due to its separation of structure and presentation, cascade concept, and powerful selectors. JavaScript developers fell out of love with CSS when they started using frameworks to construct the DOM. Instead of looking at the DOM holistically, we began to think in terms of componentization. CSS has continued to grow and add extraordinary features, such as CSS nesting and cascade layers. CSS layers give more control over the layering of CSS styles. Container queries allow us to respond to the size of the container instead of the viewport. The has pseudo class enables selecting parent elements. CSS is now more component-friendly and improves the user experience.

FAQ

The 'has' pseudo-class allows CSS to select a parent element based on the state of its child elements, enabling more efficient styling without relying on JavaScript for certain interactions.

JavaScript developers moved away from CSS due to the shift towards component-based development, which posed challenges with CSS's cascade and selector rules when components were relocated within the DOM.

CSS became popular because it allowed the separation of structure and presentation, supported cascading style sheets, and offered powerful selectors for styling the entire DOM efficiently.

Container queries allow developers to apply CSS rules based on the size of a component's container rather than the viewport, enabling more responsive and adaptable component designs.

Tony Alisea is a developer with over 25 years of experience who has taught over 350,000 students web fundamentals through his courses on Udemy, Pluralsight, and Teachable. He also shares content on his YouTube channel and offers resources at TonyAlisea.dev.

Modern CSS features that support componentization include CSS nesting, cascade layers, container queries, and the 'has' pseudo-class, which enhance flexibility and efficiency in styling components.

You can find Tony Alisea's courses and resources at TonyAlisea.dev and help for your development team at TheSmithGroup.com.

Developers can stay updated with Tony Alisea's content by visiting TonyAlisea.dev for links to all his courses and resources, and by checking his YouTube channel for new videos.

The 'It's Time to Fall in Love with CSS' course explores the evolution of CSS, its strengths, and how modern developers can leverage new CSS features to enhance component-based development.

Tony Alicea
Tony Alicea
11 min
21 Nov, 2024

Comments

Sign in or register to post your comment.
Video transcription
Sign in to access video transcription and chapter summary.

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

Install Nothing: App UIs With Native Browser APIs
JSNation 2024JSNation 2024
31 min
Install Nothing: App UIs With Native Browser APIs
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.
Build a Design System with React and Tailwind CSS
React Summit 2022React Summit 2022
27 min
Build a Design System with React and 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.
Pushing the Limits of Video Encoding in Browsers With WebCodecs
JSNation 2023JSNation 2023
25 min
Pushing the Limits of Video Encoding in Browsers With WebCodecs
Top Content
Watch video: Pushing the Limits of Video Encoding in Browsers With WebCodecs
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.
Rethinking CSS - Introducing Stylex
React Finland 2021React Finland 2021
25 min
Rethinking CSS - Introducing Stylex
Top Content
CSS + superpowers - bloat. How Stylex creates a zero-cost abstraction that gives CSS superpowers.
How to achieve layout composition in React
React Summit 2022React Summit 2022
8 min
How to achieve layout composition in 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.
Type-safe Styling for React Component Packages: Vanilla Extract CSS
React Advanced 2023React Advanced 2023
19 min
Type-safe Styling for React Component Packages: Vanilla Extract CSS
Watch video: Type-safe Styling for React Component Packages: 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

Writing Universal Modules for Deno, Node and the Browser
Node Congress 2022Node Congress 2022
57 min
Writing Universal Modules for Deno, Node and the Browser
Workshop
Luca Casonato
Luca Casonato
This workshop will walk you through writing a module in TypeScript that can be consumed users of Deno, Node and the browsers. I will explain how to set up formatting, linting and testing in Deno, and then how to publish your module to deno.land/x and npm. We’ll start out with a quick introduction to what Deno is.