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 {
.navbar
item {
.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 {
.navbar
item {
.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.