CSS in JavaScript
With styled-components and React
Dustin Schau
  • Course duration: 2h 42m
    34 exercises

A quick, thorough primer on inline CSS. Easy to follow, easy to expand upon.

Andrew Dunn, Lead Developer, New York City
Bring your style to the component age, just like JavaScript! Components are the fundamental building block of a modern application, and with CSS in JS we can finally bring our style to the component age. CSS in JavaScript: With styled-components and React is a liveVideo course that unites the best parts of ES2015, React, and of course, CSS to bring real benefits to your styling solution!
Table of Contents detailed table of contents

Introduction

Introduction

Introduction – exercises

What CSS in JS is

What CSS in JS is – exercises

What CSS in JS is not

What CSS in JS is not – exercises

Set up

Set up – exercises

Authoring with CSS in JS

Your first styled component

Your first styled component – exercises

Traditional CSS

Traditional CSS – exercises

Injecting props

Injecting props – exercises

Inheritance and composition

Inheritance and composition – exercises

Animation

Animation – exercises

Usage with existing libraries

Usage with existing libraries – exercises

Injecting globals

Injecting globals – exercises

Advanced CSS in JS

Theming

Theming – exercises

Server and static rendering

Server and static rendering – exercises

Utilities

Utilities – exercises

Style objects

Style objects – exercises

When not to use CSS in JS

When not use CSS in JS – exercises

Roll your own CSS in JS

CSS modules

CSS modules – exercises

Automated tooling

Automated tooling – exercises

Alternative libraries

Alternative libraries – exercises

Libraries outside React

Libraries outside React – exercises

Wrap up

Drawbacks

Drawbacks of CSS in JS - Exercises

Next steps and wrap-up

Recommended next steps - Resources for further learning

Credits

About the subject

Web development has changed. CSS was originally designed for styling documents, with the web as a mere document reader. We’ve now re-purposed the web with components at the core. CSS just wasn’t built with component-based development in mind, but there’s a solution! Combining the best parts of CSS, components, and JavaScript together, CSS in JS unifies these two separate methodologies, letting you write your CSS directly in your JavaScript files. That means you can have your CSS interact directly on the component level.

More importantly, you get to enjoy a whole host of benefits like cleaner code, more intuitive styles, automatic vendor prefixing, and much more. With this approach, you get to continue to write the real CSS, not inline styles, but in a way that’s suited for modern applications!

About the video

CSS in JavaScript: With styled-components and React introduces you to developing modern applications that include CSS written directly in your JavaScript files, rather than as separate stylesheets. Taking on something this new can be daunting, but expert instructor Dustin Schau brings his wealth of experience on CSS in JS with lessons that will let you digest what you learn easily. After starting with a brief introduction to CSS in JS and what it actually means, you’ll quickly start using React and the library styled-components to build your first styled component. You’ll see how to inject props, grapple with inheritance, and get to grips with all sorts of pseudo styles, media queries, and cool animations.

Then, with real-world exercises you can bring to your own work, you’ll focus on extending your creations with advanced features like server-side rendering, theming support, and even a brief segue into CSS modules and automated tooling. Top everything off with a look at when not to use CSS in JS, and you’ll be ready to use the skills and techniques you’ve picked up right away!

Prerequisites

Designed for web developers with a basic familiarity with CSS and a modern JavaScript framework like React.

What you will learn

  • Understanding the benefits of CSS in JavaScript
  • Style encapsulation
  • Using props injection to its fullest advantage
  • Bringing the component-era to CSS with fully encapsulated, styled components
  • Best practices for working with CSS in JavaScript

About the instructor

Dustin Schau is a front-end developer who has worked on internal component libraries, hybrid mobile applications, React applications of all sizes, and has been sharing his knowledge on a multitude of frontend topics such as Webpack, Angular, React, and CSS in JS. His development of css-in-js-playground.com was featured as one of CSS Tricks frontend tools of the year.

liveVideo $49.99
Prices displayed in rupees will be charged in USD when you check out.

placing your order...

Don't refresh or navigate away from the page.

CSS in Javascript is a must have/watch for everyone who needs to design React components (with styled components).

Martin Schubert, uebermaps.com

This is the perfect place to learn how to use CSS and JavaScript together. Plenty of practice exercises, great, simple to understand lessons, all designed toward precise learning / practice needs of the web developer. Highly recommended.

Jim Arthur, IT Director, crcs.org