… are bad
Class and id attributes should be used to describe the meaning of different objects, not how they are presented. Presentation should be entirely described in the css.
Inline styles are bad
These are inline style in disguise.
Here’s how we can use Sass1 to rid ourselves of this plague.
- Rise of the presentationally descriptive class attributes
- Remove inline styles
- Remove inline classes
- Multiple classes
- The order is critical
- Specifiers not extending?
Rise of the presentationally descriptive class attributes
The advent of bootstrap (itself written in Less2) has led to some developers to use presentationally descriptive class attributes.
TODO give example:
TODO come up with analolgy to object oriented inherit…
Remove inline styles:
Remove inline classes:
Note: this is rather an simplified example, and surely not a real-life one…
This reads: extend
.alert to give it the properties of
Note: this compiles (in CSS) to:
In this way, if you want to change all of the “alerts” from
.blue, then you only need change one line in the sass.
Extend multiple classes
You can also
@extend multiple classes:
which compiles to:
The order is critical
Keeping those classes you which to
@extend at the below those which they are extending from should help you to preserve some sanity.
Specifiers not extending?
TODO mention something about some specifiers not extending (e.g.