Cascaded Style Sheet
Concept
- Selector and properties
- Font and text styles
- Styles permeate to children tags (not all do)
- Tag /class/id selector, starts with nothing,
., or #, select classes most
of the time. Can be concatenated.
- For rules with same specificity, the lower one wins (out cascades other
rules)
.brand.title selects two classes and is more specific.- Classes are more specific than tag.
- Don’t rely to much on cascading behavior
- Never use
!important
- Conditional pseudo-class selectors, e.g.
:hover state, :last-child
- Pseudo-element, e.g.
::after
Frameworks
- Early frameworks provide tools to layout the content. e.g.
Blueprint,
YAML, YUI CSS grids
- Twitter released Bootstrap in 2011
- Processors addressed drawbacks of CSS, such as lacking variables, math ops,
nesting, modularity.
- Preprocessors: Sass (2006), Less (2009), Stylus (2010),
- Postprocessors: PostCSS (2013), CSS in JS, such as Emotion in 2017
- Utility CSS class names: Tailwind (2017)
- Classless frameworks
Layout
- Box model,
inline, block and inline-block
padding is pushing content into the border, margin pushes other content
outside of the border
* {
box-sizing: border-box;
}
- Put this line in every project, so that the width of the box includes the
border, otherwise only the content.
flex needs to be applied in the parent
Animations