This content originally appeared on DEV Community and was authored by Veeresh YH
SCSS (SASS) combined with the Block-Element-Modifier (BEM) methodology helps create scalable and maintainable stylesheets. Below are some best practices to follow when structuring SCSS with BEM.
- Structure Your SCSS with BEM BEM Naming Convention: Block (.block) – A standalone component (e.g., .card, .navbar) Element (.block_element) – A part of the block (e.g., .cardtitle, .navbarlink) Modifier (.block--modifier or .block_element--modifier) – A variation of a block or element (e.g., .card--dark, .button--large) 📌 Example SCSS using BEM:
.card {
background: #fff;
border-radius: 8px;
padding: 16px;
&__title {
font-size: 1.5rem;
font-weight: bold;
}
&__content {
font-size: 1rem;
color: #333;
}
&--dark {
background: #333;
color: #fff;
}
}
✅ Best Practice: Use nested SCSS to maintain hierarchy but keep it shallow (max 2-3 levels deep).
- Avoid Deep Nesting Excessive nesting makes debugging harder and increases specificity issues.
❌ Bad Example:
scss
Copy
Edit
.navbar {
.navbar_menu {
.navbaritem {
.navbar_link {
color: blue;
}
}
}
}
✅ Better Approach:
scss
Copy
Edit
.navbar {
&__menu {
display: flex;
}
&__item {
margin-right: 10px;
}
&__link {
color: blue;
}
}
Keep nesting to a maximum of 2 levels for better readability.
- Use SCSS Variables & Mixins Instead of repeating values, store them in variables or mixins.
📌 Example:
scss
Copy
Edit
// Variables
$primary-color: #007bff;
$secondary-color: #6c757d;
// Mixins
@mixin button-style($bg-color) {
background: $bg-color;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
.button {
@include button-style($primary-color);
&--secondary {
@include button-style($secondary-color);
}
}
✅ Best Practice: Use variables for colors, font sizes, and spacing.
- Avoid Using ID Selectors IDs are highly specific and make styles harder to override.
❌ Bad Practice:
scss
Copy
Edit
header {
background: red;
}
✅ Better Approach:
scss
Copy
Edit
.header {
background: red;
}
This keeps styles reusable and prevents specificity issues.
- Keep Component Styles in Separate Files For better maintainability, split SCSS files into components.
📌 Example SCSS File Structure:
bash
Copy
Edit
/scss
├── base/
│ ├── _reset.scss
│ ├── _typography.scss
├── components/
│ ├── _button.scss
│ ├── _card.scss
│ ├── _navbar.scss
├── layout/
│ ├── _header.scss
│ ├── _footer.scss
├── main.scss
✅ Best Practice: Use _ prefix for partials and import them into main.scss.
- Use Placeholder Selectors for Reusability Instead of repeating styles, use %placeholders.
📌 Example:
scss
Copy
Edit
%flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.box {
@extend %flex-center;
width: 100px;
height: 100px;
background: red;
}
This prevents unnecessary duplication and keeps styles clean.
- Use CSS Grid & Flexbox Instead of Float Avoid outdated layout techniques like float and use modern layout systems.
✅ Example using Flexbox:
scss
Copy
Edit
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
✅ Example using CSS Grid:
scss
Copy
Edit
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
- Minimize the Use of !important !important should be a last resort, as it makes debugging harder.
❌ Bad Example:
scss
Copy
Edit
.button {
background: red !important;
}
✅ Better Approach: Increase specificity by improving selector structure.
Conclusion
Following these SCSS best practices using BEM methodology will help you: ✔ Write clean, maintainable, and scalable CSS
✔ Avoid specificity issues and deep nesting
✔ Use variables, mixins, and placeholders for reusability
By sticking to these rules, your stylesheets will be easier to manage and more efficient. 🚀
Would you like me to refine any section or add code examples? 😊
You said:
keep it in single page
ChatGPT said:
SCSS Best Practices Using BEM Methodology
SCSS (SASS) combined with the Block-Element-Modifier (BEM) methodology helps create scalable and maintainable stylesheets. Below are some best practices to follow when structuring SCSS with BEM.
- Structure Your SCSS with BEM Block (.block) – A standalone component (e.g., .card, .navbar) Element (.block_element) – A part of the block (e.g., .cardtitle, .navbarlink) Modifier (.block--modifier, .block_element--modifier) – A variation of a block or element (e.g., .card--dark, .button--large) 📌 Example SCSS using BEM:
scss
Copy
Edit
.card {
background: #fff;
border-radius: 8px;
padding: 16px;
&__title {
font-size: 1.5rem;
font-weight: bold;
}
&__content {
font-size: 1rem;
color: #333;
}
&--dark {
background: #333;
color: #fff;
}
}
✅ Use nested SCSS, but keep it shallow (max 2-3 levels deep).
- Avoid Deep Nesting Excessive nesting makes debugging harder and increases specificity issues.
❌ Bad Example:
scss
Copy
Edit
.navbar {
.navbar_menu {
.navbaritem {
.navbar_link {
color: blue;
}
}
}
}
✅ Better Approach:
scss
Copy
Edit
.navbar {
&menu { display: flex; }
&item { margin-right: 10px; }
&__link { color: blue; }
}
Keep nesting to a maximum of 2 levels for better readability.
- Use SCSS Variables & Mixins Instead of repeating values, store them in variables or mixins.
📌 Example:
scss
Copy
Edit
// Variables
$primary-color: #007bff;
$secondary-color: #6c757d;
// Mixins
@mixin button-style($bg-color) {
background: $bg-color;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
.button {
@include button-style($primary-color);
&--secondary {
@include button-style($secondary-color);
}
}
✅ Use variables for colors, font sizes, and spacing.
- Avoid Using ID Selectors IDs are highly specific and make styles harder to override.
❌ Bad Practice:
scss
Copy
Edit
header { background: red; }
✅ Better Approach:
scss
Copy
Edit
.header { background: red; }
This keeps styles reusable and prevents specificity issues.
- Keep Component Styles in Separate Files For better maintainability, split SCSS files into components.
📌 Example SCSS File Structure:
bash
Copy
Edit
/scss
├── base/
│ ├── _reset.scss
│ ├── _typography.scss
├── components/
│ ├── _button.scss
│ ├── _card.scss
│ ├── _navbar.scss
├── layout/
│ ├── _header.scss
│ ├── _footer.scss
├── main.scss
✅ Use _ prefix for partials and import them into main.scss.
- Use Placeholder Selectors for Reusability Instead of repeating styles, use %placeholders.
📌 Example:
scss
Copy
Edit
%flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.box {
@extend %flex-center;
width: 100px;
height: 100px;
background: red;
}
✅ This prevents unnecessary duplication and keeps styles clean.
- Use CSS Grid & Flexbox Instead of Float Avoid outdated layout techniques like float and use modern layout systems.
✅ Example using Flexbox:
scss
Copy
Edit
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
✅ Example using CSS Grid:
scss
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
- Minimize the Use of !important !important should be a last resort, as it makes debugging harder.
❌ Bad Example:
.button { background: red !important; }
✅ Better Approach: Increase specificity by improving selector structure.
Conclusion
Following these SCSS best practices using BEM methodology will help you:
✔ Write clean, maintainable, and scalable CSS
✔ Avoid specificity issues and deep nesting
✔ Use variables, mixins, and placeholders for reusability
By sticking to these rules, your stylesheets will be easier to manage and more efficient. 🚀
This content originally appeared on DEV Community and was authored by Veeresh YH
Veeresh YH | Sciencx (2025-02-26T07:47:05+00:00) Best Practices for Writing SCSS (SASS) in Block-Element-Modifier (BEM) Style. Retrieved from https://www.scien.cx/2025/02/26/best-practices-for-writing-scss-sass-in-block-element-modifier-bem-style/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.