Clean • Professional
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 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 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;
}Preprocessors extend CSS with variables, nesting, mixins, and functions, making repetitive tasks easier and faster to manage.
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);
}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);
}
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)