JavaScript Conferences

JSNation US 2024

JSNation US 2024

English versionEN

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

Tony Alicea

Tony is a bestselling Udemy and Pluralsight author, known for his online courses such as "JavaScript: Understanding the Weird Parts"

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.

React article version of this talk

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

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.

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.

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.

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.

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.

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.

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.

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.

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

browser api css

Tony Alicea

11 min

21 Nov, 2024

Comments

Sign in or register to post your comment.

Perspective
Great talk! Everything was explained to cleanly, it is indeed time for devs to fall in love with CSS.
07:58 Dec 31, 2024

Video transcription

Sign in to access video transcription and chapter summary.

Available in other languages:

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 2024

31 min

Install Nothing: App UIs With Native Browser APIs

Scott Tolinski

Co-host of Syntax.fm

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 2022

27 min

Build a Design System with React and Tailwind CSS

Top Content

Shruti Balasa

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.

design systems css react design systems tailwind react

Pushing the Limits of Video Encoding in Browsers With WebCodecs

JSNation 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

Akash Hamirwasia

Akash Hamirwasia

Razorpay, India

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.

browser api video javascript webassembly

Rethinking CSS - Introducing Stylex

React Finland 2021

25 min

Rethinking CSS - Introducing Stylex

Top Content

Naman Goel

CSS + superpowers - bloat. How Stylex creates a zero-cost abstraction that gives CSS superpowers.

css-in-js css stylexjs react native

If You Were a React Compiler

React Summit US 2024

26 min

If You Were a React Compiler

Top Content

Tony Alicea

Tony is a bestselling Udemy and Pluralsight author, known for his online courses such as "JavaScript: Understanding the Weird Parts"

In this talk, the speaker aims to build an accurate understanding of how the new React compiler works, focusing on minimizing re-renders and improving performance. They discuss the concept of memoization and how it can be used to optimize React applications by storing the results of function calls. The React compiler automates this process by analyzing code, checking dependencies, and transpiling JSX. The speaker emphasizes the importance of being aware of memory concerns when using memoization and explains how the React compiler detects changes in function closure values. They also mention the Fibre Tree, which drives the reconciliation process and helps optimize performance in React. Additionally, the speaker touches on JSX transpilation, compiler caching, and the generation of code. They encourage developers to understand the code generated by the compiler to optimize specific sections as needed.

How to achieve layout composition in React

React Summit 2022

8 min

How to achieve layout composition in React

Travis Waith-Mair

Travis Waith-Mair

Senior front-end developer @ Plex inc.

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.

css react components react layouts react composition

Workshops on related topic

Writing Universal Modules for Deno, Node and the Browser

Node Congress 2022

57 min

Writing Universal Modules for Deno, Node and the Browser

Workshop

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.

browser api typescript node.js deno