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

This talk is scheduled for Nov 21, 18:25
The recording will be published after editing. Multipass and Full ticket holders have early access.
Rate this content
Bookmark

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.

FAQ

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.

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

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.

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.

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.

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.

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.

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.

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.

Tony Alicea
Tony Alicea
21 Nov, 2024
Video transcription, chapters and summary will be available after the recording is published.

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.