Video description
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 video course that unites the best parts of ES2015, React, and of course, CSS to bring real benefits to your styling solution!
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!
Table of contents
-
INTRODUCTION
- Introduction 00:02:08
- What CSS in JS is 00:05:49
- What CSS in JS is not 00:05:45
- Set up 00:07:12
-
AUTHORING WITH CSS IN JS
- Your first styled component 00:04:48
- Traditional CSS 00:05:18
- Injecting props 00:09:45
- Inheritance and composition 00:08:38
- Animation 00:09:00
- Usage with existing libraries 00:07:37
- Injecting globals 00:07:37
-
ADVANCED CSS IN JS
- Theming 00:06:21
- Server and static rendering 00:12:39
- Utilities 00:10:38
- Style objects 00:10:48
- When not to use CSS in JS 00:08:33
-
ROLL YOUR OWN CSS IN JS
- CSS modules 00:05:04
- Automated tooling 00:06:09
- Alternative libraries 00:08:54
- Libraries outside React 00:06:16
-
WRAP UP
- Drawbacks 00:09:42
- Next steps and wrap-up 00:03:28
Product information
- Title: CSS in JavaScript
- Author(s):
- Release date: February 2019
- Publisher(s): Manning Publications
- ISBN: None
You might also like
video
CSS in Depth in Motion
Inside: CSS in Depth in Motion is a new course that lives up to its name, …
book
Fundamentals of Software Architecture
Salary surveys worldwide regularly place software architect in the top 10 best jobs, yet no real …
book
Head First Design Patterns, 2nd Edition
You know you don’t want to reinvent the wheel, so you look to design patterns—the lessons …
video
Modern JavaScript for the Impatient
8+ Hours of Video Instruction It can be difficult for developers familiar with Java and other …