Class Based Editing

Without Classes

Change the card to have a green background
Make all headings light blue

This text is individually styled

This is some text

This text is individually styled

This is some text

This text is individually styled

This is some text

Using Classes

Classes are defined by a dot (.)

Make all cards backgrounds Blue
Make all headings white

This text is styled by class

This is some text

This text is styled by class

This is some text

This text is styled by class

This is some text

Inheritance

What if I don’t see a class?
- Then the styling you’re seeing is probably inherited from a parent card
Elements inherit the styling from their container
The text has NO STYLING, all text styling is from the cards

Make card text color green

This text is inheriting styles from the card

This text is styled by class

This heading Is Styled by Class

This text is styled by class

This text is inheriting styles from the card

This text is styled by class

Gotchas for classes

Right now all headers are inheriting styles from their parent element.
Class styles impact ALL elements with that style
If you change the ID, that change has to be manually overridden
Let’s say I want to make the first heading work better…

I am a heading

Classes vs Ids

Classes are denoted by a . (dot) — ex: .card
Ids are denoted by a # –ex #brxe-eugqfe
ID styles always override class based styles

Update the card class text color
Update the heading class text color
ID based styles are still blue

This text is styled by class

This text inherits styling from the card

This text is styled by class

This text inherits styling from the card

This text is styled individually by ID

That's why it overrides both the class and the card inherited styling

This text is styled by class

This text inherits styling from the card

This text is styled by class

This text inherits styling from the card

This text is styled individually by ID

That's why it overrides both the class and the card inherited styling

Using Multiple Classes

Cover class naming conventions – block__element–modifier
The last class always take precedence
In this case, all text styling is inherited from the card

Default card

.card sets background color, font color, padding, and border radius

Light Card

.card--light sets background and text color

Padding and radius are inherited from card

Default card

.card sets background color, font color, padding, and border radius

Default card

.card sets background color, font color, padding, and border radius

Light card

.card--light sets background and text color

Padding and radius are inherited from card

Default card

.card sets background color, font color, padding, and border radius

Here's a random element to test stuff on

Asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf