The easiest way to understand this is to see it in action. For the most part, we were pretty smart and safe about how we named our CSS files, but we did run into one giant gotcha: our Divider component defines a global style for all hr tags, regardless of where they appear. Let's head back into src/Todo.js, and change our render function to place an hr tag in between the description and the button:

  render() {
    return (
      <div className={this.cssClasses()}>
        {this.state.description}
        <br />
        <hr />
        <button className="MarkDone" onClick={this.markAsDone}>
          Mark as Done
        </button>
        <button className="RemoveTodo" onClick={this.removeTodo}>
          Remove Me
        </button>
      </div>
    );
  }

Note that we have not added any style at all to this yet! Save the file and reload it, and despite us having never defined a style for hr tags in the Todo component, we'll see that it has inherited the style of the Divider components! Refer to the following screenshot:

But that's not what we wanted! While that's a pretty nice divider, maybe we want ours to have a different color! For the sake of comparison, we'll say that we want the dividers inside of the Todo component to be solid red lines but we want the other ones to stay the same. We'll add the following CSS to src/Todo.css to change our hr tag to red instead by changing the border color:

hr {
  border: 2px solid red;
}

Save and reload, and nothing happens? That's odd. The code is correct and it's definitely importing the CSS into our application correctly. Just as a sanity check, we'll change the hr tag to a div tag to make sure it adds a red border to our Todo div tags:

div {
  border: 2px solid red;
}

Save and reload, and you should now see this:

Yikes, that's not what we wanted! It's added borders to every div on the page instead of just the div tag in our Todo component! Well, at least we've figured out there's nothing weird with the code, it's just something with how the CSS is getting loaded. It's easy to fix; we'll just toss an !important flag on the end of our src/Todo.css file's hr definition and call it a day!

Back in src/Todo.css, we'll commit our CSS crime by tossing an !important flag at the end of the hr block:

hr {
  border: 2px solid red !important;
}

There we go! Save and reload, and we will see the following output:

Now, we've ruined everything. Yikes! Hopefully our design team won't just completely disown us for this, right? They're really good at CSS, so they'll fix things! Well, they'll fix things after they're done yelling at us for botching the site's design inside of the code in a way that is incredibly difficult for a non-developer to track down.

The good news is that there is a different way to handle this situation in a way that works very well and prevents exactly this sort of scenario in the future! It is something that has been an absolute godsend to those of us that have been working on shared frontend development projects, which might have multiple different CSS files to have to search through to find the single CSS file that's causing a major design headache!