Entry Post

Entry Module
Entry
Main Post Title

Elements of CSS V2

Post Content

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

Comment Module
Comments
Comments

There are no comments.

Comment Creation
Compose Comment