Check out a free preview of the full Design Systems with React & Storybook course

The "Problems with CSS" Lesson is part of the full, Design Systems with React & Storybook course featured in this preview video. Here's what you'd learn in this lesson:

Emma reviews the difficulties developers face when using CSS and the main issues they can lead to when working on an application, and mentions that an overall lack of knowledge about CSS can be one of the biggest barriers a team faces.

Preview
Close

Transcript from the "Problems with CSS" Lesson

[00:00:00]
>> So an ID selector is much more specific than just selecting all h1 tags. And so whatever has the ID select or whatever styles are in that are gonna be applied. But this is problematic for several reasons. The first is our styles are slowly becoming decentralized, because we have three different ways that we can write CSS.

[00:00:21]
This can be really hard to remove code, if you rip out some features of your product, or if you update them. It can be hard to update your CSS if you don´t know where to find it. And a lack of knowledge about specificity leads to a lot of importants going on.

[00:00:38]
So if we look at this code example, we can see this is selecting every single list item, and it's setting its color to blue. And then here, we've got a different way that we could also be setting the color to blue. So we have here, we're selecting an unordered list with a class of shopping-cart, and selecting all immediate children list items.

[00:01:00]
So it's not gonna do nested list items, just the top level immediate children, set their color to blue. Or you could just select all list items with a color of shopping-cart-item and set their color blue with an important, so that's gonna override everything. Or you could select your shopping-cart and then do all children descendants.

[00:01:16]
The point being, there's a lot of ways that you can write CSS.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now