The Elements of Style Sheets aims to categorize CSS properties into three elements: Nature, Theme, and Layout. It could help a front-end designer’s mental model of building the CSS on top of HTML.
Nature
Nature refers to the individual characteristics of an element.
- Display (display)
- Dimensions (padding, width, height)
Theme
Theme refers to the visual design of an element.
- Colors (color, background-color)
- Typography (font-size, font-family)
- Decor (border, border-radius, box-shadow)
Layout
Layout refers to the relationship of elements with one another.
- Position (float, position)
- Spacing (margin)
Update
Animation
As an example, after building the Content Structure in HTML, the front-end designer, in a mobile-first approach, will focus on styling individual elements – by their Nature first (usually, width is set at 100%). And then style according to Theme and lastly, as the viewport goes wider, the front-end designer styles the Layout.
—
Leave a Reply