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

SCSS (SASS) combined with Block-Element-Modifier (BEM) methodology helps create maintainable, scalable, and reusable CSS for modern web applications. Following best practices ensures a consistent and structured approach to styling.

🚀 What is BEM?
BEM (Block-Element-Modifier) is a methodology for writing clean and organized CSS.

Block (.block) – A standalone component (e.g., .card)
Element (.block_element) – A part of the block (e.g., .card_title)
Modifier (.block--modifier) – A variation of the block or element (e.g., .card--dark)
💡 Example:

`.card {
background: white;
padding: 16px;
border-radius: 8px;

&__title {
font-size: 18px;
font-weight: bold;
}

&__button {
padding: 8px 12px;
border: none;
cursor: pointer;
}

&--dark {
background: #333;
color: white;
}
}`

✅ Why?

Ensures clarity and modularity
Avoids CSS conflicts
Increases reusability
1️⃣ Keep Nesting Minimal
SCSS allows nesting, but deep nesting increases specificity and makes styles harder to override.

🚨 Avoid this:

.card {
&__title {
.icon {
color: red;
}
}
}

✅ Better approach:

.card__title .icon {
color: red;
}
✔ Keep nesting limited to 2 levels for maintainability.

2️⃣ Use SCSS Variables for Consistency
Define common styles using variables to maintain consistency and make updates easier.

`$primary-color: #007bff;
$secondary-color: #6c757d;
$border-radius: 8px;

.button {
background-color: $primary-color;
border-radius: $border-radius;
color: white;
}`
✅ Why?

Easier maintenance and updates
Consistency across styles
3️⃣ Use Mixins for Reusability
SCSS mixins allow reusable style patterns.

`
@mixin button($bg-color) {
background-color: $bg-color;
padding: 10px 15px;
border: none;
cursor: pointer;
}

.button {
@include button(#007bff);
}

.button--secondary {
@include button(#6c757d);
}`
✅ Why?

Avoids repetition
Improves scalability
4️⃣ Organize SCSS Using the 7-1 Pattern
For large projects, follow the 7-1 architecture pattern for better organization.

/scss
├── abstracts/ (variables, mixins, functions)
├── base/ (reset, typography, global styles)
├── components/ (buttons, cards, modals)
├── layout/ (grid, header, footer)
├── pages/ (home, about, contact)
├── themes/ (light, dark theme)
├── vendors/ (third-party styles)
├── main.scss (imports everything)

💡 Example import structure:

@import "abstracts/variables";
@import "base/reset";
@import "layout/grid";
@import "components/button";
✅ Why?

Enhances code maintainability
Avoids CSS conflicts
5️⃣ Avoid Using ID Selectors
ID selectors (#id) have high specificity and make styles harder to override.

🚨 Bad Practice:

#header {
background: red;
}
✅ Use a BEM class instead:


.header {
background: red;
}
✔ Stick to class-based selectors for flexibility.

6️⃣ Use @extend with Caution
@extend can reduce repetition, but overusing it may cause bloated styles.

🚨 Avoid this:

`.error {
color: red;
}

.alert {
@extend .error; // Might create unintended dependencies
}
✅ Better approach:

.alert {
color: red;
}`
7️⃣ Use Utility Classes for Common Styles
Instead of adding extra modifiers, use utility classes for repeated styles.

✅ Example:

`.u-text-center {
text-align: center;
}

.u-mt-20 {
margin-top: 20px;
}`
📌 Usage:

Welcome

✔ Keeps BEM focused on components while utilities handle layout styles.

8️⃣ Write Mobile-First SCSS
Use mobile-first media queries for responsiveness.

`
.button {
padding: 10px 15px;

@media (min-width: 768px) {
padding: 12px 20px;
}
}`
✅ Why?

Optimized for mobile devices first
Ensures better performance
9️⃣ Keep SCSS Modular with Separate Files
Instead of writing all styles in one file, split them into separate SCSS files.

✔ Example:


/components/_button.scss
/components/_card.scss
Then import them into main.scss:

@import "components/button";
@import "components/card";
✅ Why?

Increases reusability
Keeps styles organized
🔟 Use CSS Grid & Flexbox Instead of Floats
SCSS works well with modern layout techniques like Flexbox and CSS Grid.

🚨 Avoid using floats:
`

.container {
float: left;
width: 50%;
}`
✅ Use Flexbox instead:

.container {
display: flex;
justify-content: space-between;
}
🚀 Final Thoughts
Writing SCSS in BEM style improves code maintainability, readability, and scalability.

✅ Key Takeaways:
✔ Follow BEM naming conventions
✔ Limit nesting depth
✔ Use variables & mixins
✔ Organize SCSS using the 7-1 pattern
✔ Avoid ID selectors & deep specificity
✔ Write mobile-first styles

By following these best practices, you can write clean, efficient, and scalable SCSS! 🎯