Modular & Scoped CSS with Sass, LESS, Stylus

Modular and scoped CSS helps you write organized, reusable, and conflict-free styles. Modular CSS creates self-contained components, while scoped CSS ensures styles apply only to specific elements. Preprocessors like Sass, LESS, and Stylus add variables, mixins, and nesting, making CSS easier to maintain. Together, they allow developers to build clean, scalable, and efficient stylesheets for modern web projects.

Modular CSS

Modular CSS breaks your styles into small, reusable files or components, making your code easier to maintain and scale.

Example:

<div class="card">
  <h2 class="card__title">Modular Card</h2>
  <p class="card__content">This is an example of modular CSS.</p>
</div>

<div class="card card--highlight">
  <h2 class="card__title">Highlighted Card</h2>
  <p class="card__content">Reusable CSS modules make styling consistent.</p>
</div>

/* Base card module */
.card {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
  margin-bottom: 20px;
}

.card__title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card__content {
  font-size: 14px;
  color: #555;
}

/* Modifier for highlighted card */
.card--highlight {
  border-color: #007BFF;
  background: #e6f0ff;
}

Scoped CSS

Scoped CSS is a way of writing CSS so that styles apply only to a specific component or section of a webpage, rather than globally affecting every element. This prevents unintended style conflicts, especially in large projects with many components

Example :

<div class="profile-card">
  <h2 class="profile-card__name">John Doe</h2>
  <p class="profile-card__role">Web Developer</p>
</div>

<div class="profile-card profile-card--admin">
  <h2 class="profile-card__name">Jane Smith</h2>
  <p class="profile-card__role">Admin</p>
</div>

.profile-card {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fefefe;
}

.profile-card__name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.profile-card__role {
  font-size: 14px;
  color: #666;
}

.profile-card--admin {
  border-color: #FF5733;
  background-color: #fff0f0;
}

CSS Preprocessors

Preprocessors extend CSS with variables, nesting, mixins, and functions, making repetitive tasks easier and faster to manage.

What is Sass and How It Works

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that adds extra features to normal CSS, such as:

Variables: Store colors, fonts, or sizes to reuse anywhere.
Mixins: Create reusable chunks of CSS to avoid repetition.
Nesting: Write CSS inside selectors to match HTML structure.

How it works:

You write styles in a .scss or .sass file using Sass features.
Sass compiles your file into normal CSS (.css) that the browser can understand.
You link the compiled CSS in your HTML, and the page is styled normally.

Example :

<h1>Welcome to Sass Buttons Demo</h1>

  <button class="button-primary">Primary Button</button>
  <button class="button-secondary">Secondary Button</button>

body {
  font-family: 'Arial, sans-serif';
  background-color: #f5f5f5;
}

.button-primary {
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  background-color: #3498db;
  border: none;
  cursor: pointer;
}
.button-primary:hover {
  background-color: #2e86c1;
}

.button-secondary {
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  background-color: #2ecc71;
  border: none;
  cursor: pointer;
}
.button-secondary:hover {
  background-color: #28b463;
}

SCSS File (style.scss):

// Variables
$primary-color: #3498db;
$font-stack: 'Arial, sans-serif';

// Mixin for buttons
@mixin button-style($bg-color) {
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  background-color: $bg-color;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: darken($bg-color, 10%);
  }
}

// Using variables and mixins
body {
  font-family: $font-stack;
  background-color: #f5f5f5;
}

.button-primary {
  @include button-style($primary-color);
}

.button-secondary {
  @include button-style(#2ecc71);
}

What is LESS and How It Works

LESS (Leaner Style Sheets) is a CSS preprocessor, similar to Sass, that adds extra features to normal CSS, such as:

Variables: Store colors, fonts, or sizes to reuse across your styles.
Mixins: Reuse a group of CSS rules without repeating them.
Nesting: Write CSS rules inside other rules to match HTML structure.

How it works:

You write styles in a .less file using LESS features.
LESS compiles your file into normal CSS (.css) that the browser can understand.
You link the compiled CSS in your HTML, and the page displays the styles.

Example:

 <h1>LESS Button Demo</h1>
  <button class="button-primary">Primary Button</button>
  <button class="button-secondary">Secondary Button</button>

body {
  font-family: 'Arial, sans-serif';
  background-color: #f5f5f5;
  text-align: center;
  padding: 50px;
}

h1 {
  color: #3498db;
  margin-bottom: 30px;
}

.button-primary {
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  background-color: #3498db;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-right: 10px;
}

.button-primary:hover {
  background-color: #2e86c1;
}

.button-secondary {
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  background-color: #2ecc71;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.button-secondary:hover {
  background-color: #28b463;
}

LESS File (style.less):

// Variables
@primary-color: #3498db;
@secondary-color: #2ecc71;
@font-stack: 'Arial, sans-serif';

// Mixin for buttons
.button-style(@bg-color) {
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  background-color: @bg-color;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;

  &:hover {
    background-color: darken(@bg-color, 10%);
  }
}

// Global styles
body {
  font-family: @font-stack;
  background-color: #f5f5f5;
  text-align: center;
  padding: 50px;
}

h1 {
  color: @primary-color;
  margin-bottom: 30px;
}

// Buttons
.button-primary {
  .button-style(@primary-color);
  margin-right: 10px;
}

.button-secondary {
  .button-style(@secondary-color);
}

What is Stylus and How It Works

Stylus is a CSS preprocessor that allows you to write CSS in a minimal and flexible way, with optional colons, semicolons, and braces. It also provides variables, mixins, and nesting like Sass and LESS.

How it works:

You write styles in a .styl file using Stylus features.
Stylus compiles your file into normal CSS (.css) that browsers can understand.
You link the compiled CSS in your HTML to apply the styles.

Example:

 <h1>Stylus Button Demo</h1>
  <button class="button-primary">Primary Button</button>
  <button class="button-secondary">Secondary Button</button>

body {
  font-family: 'Arial, sans-serif';
  background-color: #f5f5f5;
  text-align: center;
  padding: 50px;
}

h1 {
  color: #3498db;
  margin-bottom: 30px;
}

.button-primary {
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  background-color: #3498db;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-right: 10px;
}

.button-primary:hover {
  background-color: #2e86c1;
}

.button-secondary {
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  background-color: #2ecc71;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.button-secondary:hover {
  background-color: #28b463;
}

Styl File (style.styl) :

// Variables
primary-color = #3498db
secondary-color = #2ecc71
font-stack = 'Arial, sans-serif'
bg-color = #f5f5f5

// Mixin for buttons
button-style(bg)
  padding 10px 20px
  border-radius 5px
  color white
  background-color bg
  border none
  cursor pointer
  transition background-color 0.3s

  &:hover
    background-color darken(bg, 10%)

// Global styles
body
  font-family font-stack
  background-color bg-color
  text-align center
  padding 50px

h1
  color primary-color
  margin-bottom 30px

// Buttons
.button-primary
  button-style(primary-color)
  margin-right 10px

.button-secondary
  button-style(secondary-color)

CSS Handbook

Modern CSS Techniques

Modular & Scoped CSS with Sass, LESS, Stylus

Modular CSS

Scoped CSS

CSS Preprocessors

What is Sass and How It Works

What is LESS and How It Works

What is Stylus and How It Works