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! 🎯
Top comments (0)