Building CSS in Levels

After building the Content Structure (HTML) of your website, the next step in the process is building its Visuals (CSS).

To be able to ease the process of writing the style sheets, we must segment it into levels:

1. Level 1: Default (browser level)
2. Level 2: Normalize (boilerplate level)
3. Level 3: Modify (visibility and sizes level)
4. Level 4: Template (functionality level)
5. Level 5: Theme (custom level)

Ideally, each level must be buildt on top of the previous one yet still independent. For example, leaving the style sheet at browser level must present usable information. The same principle applies as one builds the style sheet level per level.

Level 3: Modify

Related Activities

• hide accessible names
• hide components
• set default state of components thru class names
• active element padding
• spacings (margins between components and paddings around components)
• dimensions are set at 100% for Mobile-First

Level 4: Template

Related Activities

• set the functionality of utilities such as Search and Navigation

Level 4: Theme

Related Activities

• colors
• background colors/images
• icons
• visual elements (badges, logos, lines/borders, shadows, corner radius)
• borders