Views

Styles specific to individual pages or screens.

Purpose

The views/ directory contains styles that apply to a single page or screen. If a style is only used in one place, it belongs here — not in components/.

STACSS strongly recommends keeping view-specific styles in a dedicated folder, separate from reusable components. Mixing the two leads to bloated component files and hard-to-track specificity issues.

Scoping with body class

Each view file should open with a scoped selector tied to that page. The recommended pattern is a class on <body>:

 views/_dashboard.sass 
 body.dashboard
  .header
    font-size: 1.5rem

  .stats
    display: grid
    gap: 1rem

body.dashboard-index
  .stats
    grid-template-columns: repeat(3, 1fr) 

body.dashboard scopes styles to all dashboard pages, regardless of the action. body.dashboard-index adds a more specific layer that only applies to the index action. The two levels can be combined freely — there is no risk of collision with a component or another view that happens to use the same class name.

Adding the body class

Most frameworks make it straightforward to add a page-specific class to <body>. In Ruby on Rails, controller and action names are available directly in the layout:

 application.html.erb 
 ERB <body class="<%= controller_name %>
             <%= controller_name %>-<%= action_name %>"> 
 HTML <body class="dashboard dashboard-index"> 

In Next.js or Astro, pass a bodyClass prop to your layout component and apply it to the <body> tag manually.