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.

—

Elements of Style(sheets) V1