Keep Styles Portable and Maintainable with Basic Classes

InstructorGarth Braithwaite

React
CSS

Share this video with your friends

Send Tweet

Although it is possible to target just about any DOM element with complex CSS selectors, it is important to reduce specificity to make CSS easy to override if needed. The best way to do this is with single classes for each stylable element. In this video, I add some basic classes to the fundamental React generated DOM elements.

Rob

~ 8 years ago

Any reason to do:

.foo {
  width: 100%;
  max-width: calc(100% - 20px);
}

instead of:

.foo {
  width: 100%;
  margin: 0 20px;
}

Dwayne

~ 8 years ago

this was a helpful series, maybe to continue it, you can show a grid framework at use with react. maybe bootstrap 4, or point to another series that covered that.