Entry Post

Entry Module
Entry
Main Post Title

Elements of CSS V2

Post Header Aside
Comments Actions Snippet
Comments Population
Comment Creation

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
Comments Actions Snippet
Comments Population
Comment Creation

There are no comments.

Comment Creation
Compose Comment