Home A - Z
Page Index

Blame

0e8439 Melisha Dsouza 2026-01-15 11:41:34 1 
# **Front-End Styling (CSS)**
163635 Melisha Dsouza 2026-01-15 11:40:48 2
3
| Field | Value |
4
| ------- | ------------------ |
5
| Version | 1.0.0 |
6
| Author | Rakesh Lokhande |
7
| Target | All Frontend Teams |
8
| Scope | CSS, SCSS, LESS |
9
4d51ba Melisha Dsouza 2026-01-16 09:39:17 10
### **1. Core Principles**
163635 Melisha Dsouza 2026-01-15 11:40:48 11
* **Maintainability over Brevity**: Code is read far more often than it is written. Explicit class names and structures are preferred over clever hacks.
12
* **Component-Based**: Styles should be scoped to components, avoiding global pollution.
13
* **Mobile-First**: Design for the smallest screen first, then use min-width media queries to enhance the layout for larger screens.
14
* **Predictability**: A developer should be able to look at a class name and know exactly what it does and where it belongs.
15
4d51ba Melisha Dsouza 2026-01-16 09:39:17 16
### **2. Formatting & Syntax**
163635 Melisha Dsouza 2026-01-15 11:40:48 17
Consistency in formatting makes the codebase easier to scan and debug.
18
* **Indentation**: Use 2 spaces (soft tabs).
19
* **Brackets**:
20
* Opening brace `{` on the same line as the selector, preceded by one space.
21
* Closing brace `}` on its own line.
22
* **Spacing**:
23
* Include a space after the colon `:` in properties.
24
* Separate multiple selectors with a newline.
25
* Separate rulesets with an empty line.
26
* **Quotes**: Use double quotes `""` for attribute selectors and content strings.
27
* **Zero Units**: Do not use units for zero values (e.g., `margin: 0; not margin: 0px;`).
28
* **Generic Font Families**: The requirement to always include a generic fallback (e.g., `sans-serif`)
29
**Example**
30
```
31
/* ✅ DO */
32
.card,
33
.card-alt {
34
display: block;
35
margin-bottom: 20px;
36
padding: 1rem;
37
background-color: #ffffff;
38
}
39
40
/* ❌ DON'T */
41
.card, .card-alt {
42
display:block;
43
margin-bottom: 20px;
44
padding: 1rem;
45
background-color: #fff
46
}
47
```
48
4d51ba Melisha Dsouza 2026-01-16 09:39:17 49
### **3. Naming Conventions (BEM)**
163635 Melisha Dsouza 2026-01-15 11:40:48 50
We strictly follow the BEM (Block Element Modifier) methodology to keep specificity low and semantic meaning high.
51
* **Block**: The standalone component (e.g., .btn, .modal).
52
* **Element**: A child part of the block, denoted by two underscores (e.g., .btn__icon, .modal__header).
53
* **Modifier**: A variation, denoted by two hyphens (e.g., .btn--primary, .modal--large).
54
55
**Specificity Rules**
56
* **No IDs**: Never use ID selectors (#header) for styling. IDs are reserved for JavaScript hooks and anchor links.
57
* **No Type Selectors**: Avoid unqualified type selectors (e.g., div, span, h1) in component styles to prevent style leakage.
58
* **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.
59
4d51ba Melisha Dsouza 2026-01-16 09:39:17 60
### **4. Pre-processor Specifics (SCSS & LESS)**
61
#### **4.1. Variables**
163635 Melisha Dsouza 2026-01-15 11:40:48 62
* **Naming**: Use kebab-case (e.g., $brand-primary, @font-size-base).
63
* **Usage**:
64
* Define all colors, fonts, z-indexes, and spacing measurements in a centralized variables file.
65
* Never use "magic numbers" or hardcoded hex values in component files.
66
**SCSS Example:**
67
```
68
// variables.scss
69
$spacing-md: 16px;
70
$color-error: #e74c3c;
71
72
// component.scss
73
.alert {
74
padding: $spacing-md; // ✅ Good
75
color: $color-error; // ✅ Good
76
margin: 15px; // ❌ Bad (Magic number)
77
}
78
```
4d51ba Melisha Dsouza 2026-01-16 09:39:17 79
#### **4.2 Nesting**
163635 Melisha Dsouza 2026-01-15 11:40:48 80
* **Depth Limit**: Do not nest more than 3 levels deep. Deep nesting increases file size and creates specificity wars.
81
* **Usage**: Use nesting primarily for BEM element targeting and pseudo-states (:hover, :focus).
82
**The "Inception" Rule:**
83
```
84
/* ✅ DO */
85
.nav {
86
&__item {
87
color: red;
88
}
89
}
90
91
/* ❌ DON'T */
92
.nav {
93
ul {
94
li {
95
a {
96
span { ... } /* Too deep! */
97
}
98
}
99
}
100
}
101
```
4d51ba Melisha Dsouza 2026-01-16 09:39:17 102
#### **4.3. Mixins vs. Extend**
163635 Melisha Dsouza 2026-01-15 11:40:48 103
* **Mixins**: Preferred. Use for grouping properties or handling vendor prefixes.
104
* **Extend**: Avoid. @extend breaks the source order of CSS and can group selectors unexpectedly, leading to difficult debugging and bloated files.
105
4d51ba Melisha Dsouza 2026-01-16 09:39:17 106
### **5. Architecture (The 7-1 Pattern)**
163635 Melisha Dsouza 2026-01-15 11:40:48 107
Structure your Sass/Less directories into 7 folders and 1 main file.
108
1. **abstracts/:** Variables, Mixins, Functions (outputs no CSS).
109
2. **base/:** Reset, Typography, global rules.
110
3. **components/:** Specific UI widgets (Buttons, Cards, Modals).
111
4. **layout/:** Global layout regions (Header, Footer, Grid, Sidebar).
112
5. **pages/:** Page-specific styles (keep this minimal).
113
6. **themes/:** Distinct themes (e.g., Dark Mode, Admin).
114
7. **vendors/:** Third-party CSS (Bootstrap, jQuery UI).
115
8. **main.scss:** The entry point that imports all above.
116
4d51ba Melisha Dsouza 2026-01-16 09:39:17 117
### **6. Responsive Design & Units**
163635 Melisha Dsouza 2026-01-15 11:40:48 118
* **Layout**: Use relative units (%, vw, vh, fr) for containers.
119
* **Typography**: Use rem for font-size. This respects the user's browser settings.
120
* **Spacing**: Use rem or em for padding/margin to ensure spacing scales with typography.
121
* **Media Queries**:
122
* Write min-width queries (Mobile First).
123
* Nest media queries inside the selector they modify.
124
```
125
.sidebar {
126
width: 100%;
127
128
@media (min-width: 768px) {
129
width: 250px;
130
}
131
}
132
133
134
135
Css
136
.sidebar {
137
width: 100%;
138
}
139
@media (min-width: 768px) {
140
.sidebar {
141
width: 250px;
142
}
143
}
144
```
145
4d51ba Melisha Dsouza 2026-01-16 09:39:17 146
### **7. Performance**
163635 Melisha Dsouza 2026-01-15 11:40:48 147
* **Animation**: Only animate transform and opacity. Animating properties like width, height, top, or left causes expensive browser reflows.
148
* **Selectors**: Avoid the universal selector * inside complex components.
149
* **Imports**:
150
* **CSS**: Avoid @import in plain CSS (blocks parallel loading).
151
* **SCSS/LESS**: @import (or @use) is acceptable as it compiles to a single file.
152
4d51ba Melisha Dsouza 2026-01-16 09:39:17 153
### **8. Accessibility (A11y)**
163635 Melisha Dsouza 2026-01-15 11:40:48 154
* **Hiding Content**: Do not use display: none for content meant for screen readers. Use a .visually-hidden utility class.
155
* **Focus**: Never set outline: 0 or outline: none on focusable elements without providing a visible replacement style.
156
* **Contrast**: Ensure text color contrast ratios meet WCAG AA standards (4.5:1 for normal text).
4d51ba Melisha Dsouza 2026-01-16 09:39:17 157
158
**Document** - [CSS](https://docs.google.com/document/d/1CU_KDWtQcGuYa6LDK_kU0E_EjqR0AlTed7-1o-iiT3s/edit?usp=sharing)