Best Practices for Writing SCSS (SASS) in Block-Element-Modifier (BEM) Style

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:
Blo…


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.

  1. 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).

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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;
}

  1. 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.

  1. 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).

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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.

  1. 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;
}

  1. 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


Print Share Comment Cite Upload Translate Updates
APA

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/

MLA
" » Best Practices for Writing SCSS (SASS) in Block-Element-Modifier (BEM) Style." Veeresh YH | Sciencx - Wednesday February 26, 2025, https://www.scien.cx/2025/02/26/best-practices-for-writing-scss-sass-in-block-element-modifier-bem-style/
HARVARD
Veeresh YH | Sciencx Wednesday February 26, 2025 » Best Practices for Writing SCSS (SASS) in Block-Element-Modifier (BEM) Style., viewed ,<https://www.scien.cx/2025/02/26/best-practices-for-writing-scss-sass-in-block-element-modifier-bem-style/>
VANCOUVER
Veeresh YH | Sciencx - » Best Practices for Writing SCSS (SASS) in Block-Element-Modifier (BEM) Style. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/02/26/best-practices-for-writing-scss-sass-in-block-element-modifier-bem-style/
CHICAGO
" » Best Practices for Writing SCSS (SASS) in Block-Element-Modifier (BEM) Style." Veeresh YH | Sciencx - Accessed . https://www.scien.cx/2025/02/26/best-practices-for-writing-scss-sass-in-block-element-modifier-bem-style/
IEEE
" » Best Practices for Writing SCSS (SASS) in Block-Element-Modifier (BEM) Style." Veeresh YH | Sciencx [Online]. Available: https://www.scien.cx/2025/02/26/best-practices-for-writing-scss-sass-in-block-element-modifier-bem-style/. [Accessed: ]
rf:citation
» Best Practices for Writing SCSS (SASS) in Block-Element-Modifier (BEM) Style | Veeresh YH | Sciencx | 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.

You must be logged in to translate posts. Please log in or register.

Related Posts