* **Maintainability over Brevity**: Code is read far more often than it is written. Explicit class names and structures are preferred over clever hacks.
* **Component-Based**: Styles should be scoped to components, avoiding global pollution.
* **Mobile-First**: Design for the smallest screen first, then use min-width media queries to enhance the layout for larger screens.
* **Predictability**: A developer should be able to look at a class name and know exactly what it does and where it belongs.
-
### **Formatting & Syntax**
+
### **2. Formatting & Syntax**
Consistency in formatting makes the codebase easier to scan and debug.
* **Indentation**: Use 2 spaces (soft tabs).
* **Brackets**:
@@ 46,7 46,7 @@
}
```
-
### **Naming Conventions (BEM)**
+
### **3. Naming Conventions (BEM)**
We strictly follow the BEM (Block Element Modifier) methodology to keep specificity low and semantic meaning high.
* **Block**: The standalone component (e.g., .btn, .modal).
* **Element**: A child part of the block, denoted by two underscores (e.g., .btn__icon, .modal__header).
@@ 57,8 57,8 @@
* **No Type Selectors**: Avoid unqualified type selectors (e.g., div, span, h1) in component styles to prevent style leakage.
* **JavaScript Hooks**: Do not use BEM classes for JS bindings. Use a dedicated js- prefixed class (e.g., .js-toggle-modal) which should have no styles attached.
-
### **Pre-processor Specifics (SCSS & LESS)**
-
#### **1. Variables**
+
### **4. Pre-processor Specifics (SCSS & LESS)**
+
#### **4.1. Variables**
* **Naming**: Use kebab-case (e.g., $brand-primary, @font-size-base).
* **Usage**:
* Define all colors, fonts, z-indexes, and spacing measurements in a centralized variables file.
@@ 76,7 76,7 @@
margin: 15px; // ❌ Bad (Magic number)
}
```
-
#### **2 Nesting**
+
#### **4.2 Nesting**
* **Depth Limit**: Do not nest more than 3 levels deep. Deep nesting increases file size and creates specificity wars.
* **Usage**: Use nesting primarily for BEM element targeting and pseudo-states (:hover, :focus).
**The "Inception" Rule:**
@@ 99,11 99,11 @@
}
}
```
-
#### **3. Mixins vs. Extend**
+
#### **4.3. Mixins vs. Extend**
* **Mixins**: Preferred. Use for grouping properties or handling vendor prefixes.
* **Extend**: Avoid. @extend breaks the source order of CSS and can group selectors unexpectedly, leading to difficult debugging and bloated files.
-
### **Architecture (The 7-1 Pattern)**
+
### **5. Architecture (The 7-1 Pattern)**
Structure your Sass/Less directories into 7 folders and 1 main file.
1. **abstracts/:** Variables, Mixins, Functions (outputs no CSS).