Master modern CSS architecture patterns including BEM, OOCSS, SMACSS, Atomic CSS, and component-driven approaches for scalable and maintainable stylesheets.
Master modern CSS architecture patterns including BEM, OOCSS, SMACSS, Atomic CSS, and component-driven approaches for scalable and maintainable stylesheets.
As web applications have grown in complexity, the need for structured,
scalable CSS architecture has become critical. Modern CSS architecture
patterns provide frameworks for organizing styles that promote
maintainability, reusability, and team collaboration.
Scalability:
Patterns that grow with your application
Maintainability:
Code that's easy to modify and extend
Consistency:
Unified approaches across team members
Performance:
Efficient CSS that doesn't bloat over time
Debugging:
Clear naming and structure for easier troubleshooting
Learning Curve
Naming Convention
Component-based projects
Object Separation
Large websites
Categorization
Complex applications
Atomic CSS
Utility Classes
Rapid development
CSS Modules
Scoped Styling
JavaScript frameworks
BEM is a naming convention and methodology that creates a clear,
predictable structure for CSS classes. It promotes component
thinking and reduces naming conflicts through its systematic approach.
Learn about BEM Structure and Implementation.
1/* BEM Structure: block__element--modifier */
2
3/* Block: Independent, reusable component */
4.card {
5 display: flex;
6 flex-direction: column;
7 background: white;
8 border-radius: 8px;
9 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
10 overflow: hidden;
11}
12
13/* Elements: Parts of the block, cannot exist independently */
14.card__header {
15 padding: 1.5rem;
16 border-bottom: 1px solid #e5e7eb;
17}
18
19.card__title {
20 font-size: 1.25rem;
21 font-weight: 600;
22 margin: 0;
23 color: #111827;
24}
25
26.card__subtitle {
27 font-size: 0.875rem;
28 color: #6b7280;
29 margin: 0.25rem 0 0 0;
30}
31
32.card__body {
33 padding: 1.5rem;
34 flex: 1;
35}
36
37.card__content {
38 line-height: 1.6;
39 color: #374151;
40}
41
42.card__footer {
43 padding: 1rem 1.5rem;
44 background: #f9fafb;
45 border-top: 1px solid #e5e7eb;
46}
47
48.card__actions {
49 display: flex;
50 gap: 0.75rem;
51 justify-content: flex-end;
52}
53
54/* Modifiers: Variations of blocks or elements */
55.card--featured {
56 border: 2px solid #3b82f6;
57 box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
58}
59
60.card--compact {
61 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
62}
63
64.card--compact .card__header,
65.card--compact .card__body {
66 padding: 1rem;
67}
68
69.card__title--large {
70 font-size: 1.5rem;
71 font-weight: 700;
72}
73
74.card__title--centered {
75 text-align: center;
76}
77
78/* Multiple modifiers can be combined */
79.card--featured .card__title {
80 color: #3b82f6;
81}
82
83/* BEM with responsive modifiers */
84@media (max-width: 768px) {
85 .card--responsive {
86 margin: 0.5rem;
87 border-radius: 0;
88 }
89
90 .card--responsive .card__header,
91 .card--responsive .card__body {
92 padding: 1rem;
93 }
94}
95
96/* Complex BEM component example */
97.navigation {
98 background: #1f2937;
99 padding: 0 1rem;
100}
101
102.navigation__container {
103 max-width: 1200px;
104 margin: 0 auto;
105 display: flex;
106 align-items: center;
107 justify-content: space-between;
108 height: 4rem;
109}
110
111.navigation__logo {
112 font-size: 1.25rem;
113 font-weight: 700;
114 color: white;
115 text-decoration: none;
116}
117
118.navigation__menu {
119 display: flex;
120 list-style: none;
121 margin: 0;
122 padding: 0;
123 gap: 2rem;
124}
125
126.navigation__item {
127 position: relative;
128}
129
130.navigation__link {
131 color: #d1d5db;
132 text-decoration: none;
133 padding: 0.5rem 0;
134 transition: color 0.2s ease;
135}
136
137.navigation__link:hover {
138 color: white;
139}
140
141.navigation__link--active {
142 color: #3b82f6;
143 font-weight: 600;
144}
145
146.navigation__dropdown {
147 position: absolute;
148 top: 100%;
149 left: 0;
150 background: white;
151 border-radius: 0.5rem;
152 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
153 opacity: 0;
154 visibility: hidden;
155 transform: translateY(-0.5rem);
156 transition: all 0.2s ease;
157 min-width: 200px;
158}
159
160.navigation__item:hover .navigation__dropdown {
161 opacity: 1;
162 visibility: visible;
163 transform: translateY(0);
164}
165
166.navigation__dropdown-item {
167 padding: 0.75rem 1rem;
168 border-bottom: 1px solid #f3f4f6;
169}
170
171.navigation__dropdown-item:last-child {
172 border-bottom: none;
173}
174
175.navigation__dropdown-link {
176 color: #374151;
177 text-decoration: none;
178 display: block;
179 transition: color 0.2s ease;
180}
181
182.navigation__dropdown-link:hover {
183 color: #3b82f6;
184}Learn about BEM with TypeScript for Type Safety.
1// BEM utility functions for TypeScript applications
2type BEMBlock = string;
3type BEMElement = string;
4type BEMModifier = string | Record<string, boolean>;
5
6interface BEMConfig {
7 block: BEMBlock;
8 element?: BEMElement;
9 modifiers?: BEMModifier | BEMModifier[];
10}
11
12// BEM class name generator
13export function bem({ block, element, modifiers }: BEMConfig): string {
14 let className = block;
15
16 // Add element
17 if (element) {
18 className += \`__\${element}\`;
19 }
20
21 // Add modifiers
22 if (modifiers) {
23 const modifierArray = Array.isArray(modifiers) ? modifiers : [modifiers];
24
25 modifierArray.forEach(modifier => {
26 if (typeof modifier === 'string') {
27 className += \` \${block}--\${modifier}\`;
28 if (element) {
29 className += \` \${block}__\${element}--\${modifier}\`;
30 }
31 } else if (typeof modifier === 'object') {
32 Object.entries(modifier).forEach(([key, value]) => {
33 if (value) {
34 className += \` \${block}--\${key}\`;
35 if (element) {
36 className += \` \${block}__\${element}--\${key}\`;
37 }
38 }
39 });
40 }
41 });
42 }
43
44 return className;
45}
46
47// React component example using BEM
48import React from 'react';
49
50interface CardProps {
51 title: string;
52 subtitle?: string;
53 content: React.ReactNode;
54 actions?: React.ReactNode;
55 featured?: boolean;
56 compact?: boolean;
57 size?: 'small' | 'medium' | 'large';
58 className?: string;
59}
60
61export const Card: React.FC<CardProps> = ({
62 title,
63 subtitle,
64 content,
65 actions,
66 featured = false,
67 compact = false,
68 size = 'medium',
69 className = ''
70}) => {
71 const cardClass = bem({
72 block: 'card',
73 modifiers: [
74 { featured, compact },
75 size !== 'medium' ? size : ''
76 ].filter(Boolean)
77 });
78
79 const titleClass = bem({
80 block: 'card',
81 element: 'title',
82 modifiers: size === 'large' ? 'large' : ''
83 });
84
85 return (
86 <div className={\`\${cardClass} \${className}\`.trim()}>
87 <div className={bem({ block: 'card', element: 'header' })}>
88 <h3 className={titleClass}>{title}</h3>
89 {subtitle && (
90 <p className={bem({ block: 'card', element: 'subtitle' })}>
91 {subtitle}
92 </p>
93 )}
94 </div>
95
96 <div className={bem({ block: 'card', element: 'body' })}>
97 <div className={bem({ block: 'card', element: 'content' })}>
98 {content}
99 </div>
100 </div>
101
102 {actions && (
103 <div className={bem({ block: 'card', element: 'footer' })}>
104 <div className={bem({ block: 'card', element: 'actions' })}>
105 {actions}
106 </div>
107 </div>
108 )}
109 </div>
110 );
111};
112
113// BEM validation utility
114export function validateBEMClass(className: string): {
115 isValid: boolean;
116 block?: string;
117 element?: string;
118 modifier?: string;
119 errors: string[];
120} {
121 const errors: string[] = [];
122
123 // BEM pattern: block[__element][--modifier]
124 const bemPattern = /^([a-z][a-z0-9]*(?:-[a-z0-9]+)*)(?:__([a-z][a-z0-9]*(?:-[a-z0-9]+)*))?(?:--([a-z][a-z0-9]*(?:-[a-z0-9]+)*))?$/;
125
126 const match = className.match(bemPattern);
127
128 if (!match) {
129 errors.push('Invalid BEM format. Expected: block[__element][--modifier]');
130 return { isValid: false, errors };
131 }
132
133 const [, block, element, modifier] = match;
134
135 // Validate block name
136 if (!block) {
137 errors.push('Block name is required');
138 } else if (!/^[a-z]/.test(block)) {
139 errors.push('Block name must start with lowercase letter');
140 }
141
142 // Validate element name if present
143 if (element && !/^[a-z]/.test(element)) {
144 errors.push('Element name must start with lowercase letter');
145 }
146
147 // Validate modifier name if present
148 if (modifier && !/^[a-z]/.test(modifier)) {
149 errors.push('Modifier name must start with lowercase letter');
150 }
151
152 return {
153 isValid: errors.length === 0,
154 block,
155 element,
156 modifier,
157 errors
158 };
159}
160
161// BEM style guide generator
162export function generateBEMStyleGuide(blocks: string[]): string {
163 return blocks.map(block => \`
164/* Block: \${block} */
165.\${block} {
166 /* Block styles */
167}
168
169/* Common elements for \${block} */
170.\${block}__header { /* Header styles */ }
171.\${block}__body { /* Body styles */ }
172.\${block}__footer { /* Footer styles */ }
173
174/* Common modifiers for \${block} */
175.\${block}--active { /* Active state */ }
176.\${block}--disabled { /* Disabled state */ }
177.\${block}--loading { /* Loading state */ }
178\`).join('\\n');
179}OOCSS separates structure from skin and container from content,
creating reusable objects that can be mixed and matched to build
complex interfaces efficiently.
Learn about OOCSS Principles and Implementation.
1/* OOCSS Principle 1: Separate Structure from Skin */
2
3/* Structure Objects - Layout and positioning */
4.media {
5 display: flex;
6 align-items: flex-start;
7 gap: 1rem;
8}
9
10.media__object {
11 flex-shrink: 0;
12}
13
14.media__body {
15 flex: 1;
16 min-width: 0; /* Prevent overflow */
17}
18
19.box {
20 padding: 1rem;
21 margin-bottom: 1rem;
22}
23
24.box--large {
25 padding: 2rem;
26}
27
28.box--flush {
29 margin-bottom: 0;
30}
31
32/* Layout Objects */
33.layout {
34 display: flex;
35 min-height: 100vh;
36}
37
38.layout__sidebar {
39 flex-shrink: 0;
40 width: 250px;
41}
42
43.layout__main {
44 flex: 1;
45 min-width: 0;
46}
47
48.grid {
49 display: grid;
50 gap: 1rem;
51}
52
53.grid--2-col {
54 grid-template-columns: repeat(2, 1fr);
55}
56
57.grid--3-col {
58 grid-template-columns: repeat(3, 1fr);
59}
60
61.grid--auto-fit {
62 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
63}
64
65/* Skin Objects - Visual appearance */
66.skin-primary {
67 background: #3b82f6;
68 color: white;
69 border: 1px solid #2563eb;
70}
71
72.skin-secondary {
73 background: #6b7280;
74 color: white;
75 border: 1px solid #4b5563;
76}
77
78.skin-success {
79 background: #10b981;
80 color: white;
81 border: 1px solid #059669;
82}
83
84.skin-warning {
85 background: #f59e0b;
86 color: white;
87 border: 1px solid #d97706;
88}
89
90.skin-danger {
91 background: #ef4444;
92 color: white;
93 border: 1px solid #dc2626;
94}
95
96.skin-outline {
97 background: transparent;
98 color: inherit;
99 border: 2px solid currentColor;
100}
101
102.skin-ghost {
103 background: transparent;
104 color: inherit;
105 border: none;
106}
107
108.skin-rounded {
109 border-radius: 0.375rem;
110}
111
112.skin-pill {
113 border-radius: 9999px;
114}
115
116.skin-shadow {
117 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
118}
119
120.skin-shadow-lg {
121 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
122}
123
124/* OOCSS Principle 2: Separate Container from Content */
125
126/* Content Objects - Independent of location */
127.heading {
128 font-weight: 600;
129 line-height: 1.2;
130 margin: 0;
131}
132
133.heading--xl {
134 font-size: 2.25rem;
135}
136
137.heading--lg {
138 font-size: 1.875rem;
139}
140
141.heading--md {
142 font-size: 1.5rem;
143}
144
145.heading--sm {
146 font-size: 1.25rem;
147}
148
149.text {
150 line-height: 1.6;
151 margin: 0;
152}
153
154.text--lead {
155 font-size: 1.125rem;
156 font-weight: 400;
157}
158
159.text--small {
160 font-size: 0.875rem;
161}
162
163.text--muted {
164 color: #6b7280;
165}
166
167.button {
168 display: inline-flex;
169 align-items: center;
170 justify-content: center;
171 gap: 0.5rem;
172 padding: 0.75rem 1.5rem;
173 font-size: 0.875rem;
174 font-weight: 500;
175 line-height: 1;
176 text-decoration: none;
177 cursor: pointer;
178 transition: all 0.2s ease;
179 border: none;
180 background: none;
181}
182
183.button:hover {
184 transform: translateY(-1px);
185}
186
187.button:active {
188 transform: translateY(0);
189}
190
191.button--small {
192 padding: 0.5rem 1rem;
193 font-size: 0.75rem;
194}
195
196.button--large {
197 padding: 1rem 2rem;
198 font-size: 1rem;
199}
200
201.button--block {
202 display: flex;
203 width: 100%;
204}
205
206/* Container Objects - Context-aware wrappers */
207.container {
208 max-width: 1200px;
209 margin: 0 auto;
210 padding: 0 1rem;
211}
212
213.container--fluid {
214 max-width: none;
215}
216
217.container--narrow {
218 max-width: 800px;
219}
220
221.section {
222 padding: 4rem 0;
223}
224
225.section--hero {
226 padding: 6rem 0 4rem;
227 text-align: center;
228}
229
230.section--compact {
231 padding: 2rem 0;
232}
233
234/* Combination Examples */
235.card-example {
236 /* Structure: box + layout */
237 /* Skin: rounded + shadow + primary */
238}
239
240/* Usage: <div class="box skin-primary skin-rounded skin-shadow"> */
241
242.profile-media {
243 /* Structure: media object */
244 /* Content: heading + text */
245}
246
247/* Usage:
248<div class="media">
249 <div class="media__object">
250 <img src="avatar.jpg" alt="Profile" />
251 </div>
252 <div class="media__body">
253 <h3 class="heading heading--md">John Doe</h3>
254 <p class="text text--muted">Web Developer</p>
255 </div>
256</div>
257*/
258
259/* Responsive OOCSS */
260@media (max-width: 768px) {
261 .grid--responsive {
262 grid-template-columns: 1fr;
263 }
264
265 .layout--responsive {
266 flex-direction: column;
267 }
268
269 .layout--responsive .layout__sidebar {
270 width: 100%;
271 }
272
273 .button--responsive {
274 width: 100%;
275 justify-content: center;
276 }
277}
278
279/* State Objects */
280.is-active {
281 /* Active state styling */
282 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
283}
284
285.is-disabled {
286 opacity: 0.5;
287 pointer-events: none;
288}
289
290.is-loading {
291 position: relative;
292 pointer-events: none;
293}
294
295.is-loading::after {
296 content: '';
297 position: absolute;
298 top: 50%;
299 left: 50%;
300 width: 1rem;
301 height: 1rem;
302 margin: -0.5rem 0 0 -0.5rem;
303 border: 2px solid currentColor;
304 border-radius: 50%;
305 border-top-color: transparent;
306 animation: spin 1s linear infinite;
307}
308
309@keyframes spin {
310 to { transform: rotate(360deg); }
311}SMACSS provides a categorization system for CSS rules, organizing
styles into base, layout, module, state, and theme categories
for better maintainability and scalability.
Learn about SMACSS File Organization.
1// SMACSS File Structure
2// styles/
3// base/
4// _normalize.scss
5// _base.scss
6// _typography.scss
7// layout/
8// _grid.scss
9// _header.scss
10// _sidebar.scss
11// _footer.scss
12// modules/
13// _buttons.scss
14// _cards.scss
15// _navigation.scss
16// _forms.scss
17// state/
18// _states.scss
19// theme/
20// _variables.scss
21// _light-theme.scss
22// _dark-theme.scss
23// main.scss (imports all)
24
25// 1. BASE RULES - Element defaults
26// base/_base.scss
27html {
28 box-sizing: border-box;
29 font-size: 16px;
30}
31
32*,
33*::before,
34*::after {
35 box-sizing: inherit;
36}
37
38body {
39 margin: 0;
40 font-family: system-ui, -apple-system, sans-serif;
41 line-height: 1.6;
42 color: #333;
43 background: #fff;
44}
45
46h1, h2, h3, h4, h5, h6 {
47 margin: 0 0 1rem 0;
48 font-weight: 600;
49 line-height: 1.2;
50}
51
52p {
53 margin: 0 0 1rem 0;
54}
55
56img {
57 max-width: 100%;
58 height: auto;
59}
60
61// base/_typography.scss
62.h1 { font-size: 2.5rem; }
63.h2 { font-size: 2rem; }
64.h3 { font-size: 1.75rem; }
65.h4 { font-size: 1.5rem; }
66.h5 { font-size: 1.25rem; }
67.h6 { font-size: 1rem; }
68
69.text-lead {
70 font-size: 1.25rem;
71 font-weight: 300;
72}
73
74.text-small {
75 font-size: 0.875rem;
76}
77
78// 2. LAYOUT RULES - Major components
79// layout/_grid.scss
80.l-container {
81 max-width: 1200px;
82 margin: 0 auto;
83 padding: 0 1rem;
84}
85
86.l-grid {
87 display: grid;
88 gap: 2rem;
89}
90
91.l-grid--2-col {
92 grid-template-columns: repeat(2, 1fr);
93}
94
95.l-grid--sidebar {
96 grid-template-columns: 300px 1fr;
97 gap: 3rem;
98}
99
100// layout/_header.scss
101.l-header {
102 background: #fff;
103 border-bottom: 1px solid #e5e7eb;
104 padding: 1rem 0;
105}
106
107.l-header__inner {
108 display: flex;
109 align-items: center;
110 justify-content: space-between;
111}
112
113// layout/_sidebar.scss
114.l-sidebar {
115 background: #f9fafb;
116 padding: 2rem 1.5rem;
117 border-radius: 0.5rem;
118}
119
120.l-main {
121 min-width: 0; // Prevent flex overflow
122}
123
124// 3. MODULE RULES - Reusable components
125// modules/_buttons.scss
126.btn {
127 display: inline-flex;
128 align-items: center;
129 justify-content: center;
130 gap: 0.5rem;
131 padding: 0.75rem 1.5rem;
132 border: 1px solid transparent;
133 border-radius: 0.375rem;
134 font-size: 0.875rem;
135 font-weight: 500;
136 line-height: 1;
137 text-decoration: none;
138 cursor: pointer;
139 transition: all 0.2s ease;
140
141 &:hover {
142 transform: translateY(-1px);
143 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
144 }
145
146 &:active {
147 transform: translateY(0);
148 }
149}
150
151.btn--primary {
152 background: #3b82f6;
153 color: white;
154 border-color: #3b82f6;
155
156 &:hover {
157 background: #2563eb;
158 border-color: #2563eb;
159 }
160}
161
162.btn--secondary {
163 background: #6b7280;
164 color: white;
165 border-color: #6b7280;
166
167 &:hover {
168 background: #4b5563;
169 border-color: #4b5563;
170 }
171}
172
173.btn--outline {
174 background: transparent;
175 color: #3b82f6;
176 border-color: #3b82f6;
177
178 &:hover {
179 background: #3b82f6;
180 color: white;
181 }
182}
183
184.btn--small {
185 padding: 0.5rem 1rem;
186 font-size: 0.75rem;
187}
188
189.btn--large {
190 padding: 1rem 2rem;
191 font-size: 1rem;
192}
193
194// modules/_cards.scss
195.card {
196 background: white;
197 border: 1px solid #e5e7eb;
198 border-radius: 0.5rem;
199 overflow: hidden;
200 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
201}
202
203.card__header {
204 padding: 1.5rem;
205 border-bottom: 1px solid #e5e7eb;
206}
207
208.card__title {
209 margin: 0;
210 font-size: 1.25rem;
211 font-weight: 600;
212}
213
214.card__body {
215 padding: 1.5rem;
216}
217
218.card__footer {
219 padding: 1rem 1.5rem;
220 background: #f9fafb;
221 border-top: 1px solid #e5e7eb;
222}
223
224.card--featured {
225 border-color: #3b82f6;
226 box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
227}
228
229.card--compact {
230 .card__header,
231 .card__body {
232 padding: 1rem;
233 }
234}
235
236// modules/_navigation.scss
237.nav {
238 display: flex;
239 list-style: none;
240 margin: 0;
241 padding: 0;
242 gap: 2rem;
243}
244
245.nav__item {
246 position: relative;
247}
248
249.nav__link {
250 color: #4b5563;
251 text-decoration: none;
252 padding: 0.5rem 0;
253 transition: color 0.2s ease;
254
255 &:hover {
256 color: #3b82f6;
257 }
258}
259
260.nav--vertical {
261 flex-direction: column;
262 gap: 0;
263
264 .nav__link {
265 display: block;
266 padding: 0.75rem 1rem;
267 border-radius: 0.375rem;
268
269 &:hover {
270 background: #f3f4f6;
271 }
272 }
273}
274
275// 4. STATE RULES - State-based styling
276// state/_states.scss
277.is-hidden {
278 display: none !important;
279}
280
281.is-visible {
282 display: block !important;
283}
284
285.is-active {
286 background: #3b82f6 !important;
287 color: white !important;
288}
289
290.is-disabled {
291 opacity: 0.5 !important;
292 pointer-events: none !important;
293}
294
295.is-loading {
296 position: relative !important;
297 pointer-events: none !important;
298
299 &::after {
300 content: '';
301 position: absolute;
302 top: 50%;
303 left: 50%;
304 width: 1rem;
305 height: 1rem;
306 margin: -0.5rem 0 0 -0.5rem;
307 border: 2px solid currentColor;
308 border-radius: 50%;
309 border-top-color: transparent;
310 animation: spin 1s linear infinite;
311 }
312}
313
314.is-error {
315 border-color: #ef4444 !important;
316 background: #fef2f2 !important;
317 color: #dc2626 !important;
318}
319
320.is-success {
321 border-color: #10b981 !important;
322 background: #f0fdf4 !important;
323 color: #059669 !important;
324}
325
326// 5. THEME RULES - Theme-specific styling
327// theme/_variables.scss
328:root {
329 --color-primary: #3b82f6;
330 --color-secondary: #6b7280;
331 --color-success: #10b981;
332 --color-warning: #f59e0b;
333 --color-error: #ef4444;
334
335 --color-text: #111827;
336 --color-text-muted: #6b7280;
337 --color-background: #ffffff;
338 --color-surface: #f9fafb;
339
340 --border-radius: 0.375rem;
341 --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
342 --transition: all 0.2s ease;
343}
344
345// theme/_dark-theme.scss
346[data-theme="dark"] {
347 --color-text: #f9fafb;
348 --color-text-muted: #d1d5db;
349 --color-background: #111827;
350 --color-surface: #1f2937;
351 --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
352}
353
354// Theme application
355.theme-aware {
356 color: var(--color-text);
357 background: var(--color-background);
358 border-radius: var(--border-radius);
359 box-shadow: var(--box-shadow);
360 transition: var(--transition);
361}
362
363// main.scss - Main import file
364@import 'base/normalize';
365@import 'base/base';
366@import 'base/typography';
367
368@import 'layout/grid';
369@import 'layout/header';
370@import 'layout/sidebar';
371@import 'layout/footer';
372
373@import 'modules/buttons';
374@import 'modules/cards';
375@import 'modules/navigation';
376@import 'modules/forms';
377
378@import 'state/states';
379
380@import 'theme/variables';
381@import 'theme/light-theme';
382@import 'theme/dark-theme';Atomic CSS breaks styling down to the smallest possible units,
creating utility classes that can be composed to build complex
interfaces without writing custom CSS.
Learn about Atomic CSS System Implementation.
1/* Atomic CSS - Single-purpose utility classes */
2
3/* Spacing Utilities */
4.m-0 { margin: 0; }
5.m-1 { margin: 0.25rem; }
6.m-2 { margin: 0.5rem; }
7.m-3 { margin: 0.75rem; }
8.m-4 { margin: 1rem; }
9.m-5 { margin: 1.25rem; }
10.m-6 { margin: 1.5rem; }
11.m-8 { margin: 2rem; }
12.m-10 { margin: 2.5rem; }
13.m-12 { margin: 3rem; }
14
15/* Directional margins */
16.mt-0 { margin-top: 0; }
17.mt-1 { margin-top: 0.25rem; }
18.mt-2 { margin-top: 0.5rem; }
19.mt-4 { margin-top: 1rem; }
20.mt-8 { margin-top: 2rem; }
21
22.mr-0 { margin-right: 0; }
23.mr-1 { margin-right: 0.25rem; }
24.mr-2 { margin-right: 0.5rem; }
25.mr-4 { margin-right: 1rem; }
26.mr-8 { margin-right: 2rem; }
27
28.mb-0 { margin-bottom: 0; }
29.mb-1 { margin-bottom: 0.25rem; }
30.mb-2 { margin-bottom: 0.5rem; }
31.mb-4 { margin-bottom: 1rem; }
32.mb-8 { margin-bottom: 2rem; }
33
34.ml-0 { margin-left: 0; }
35.ml-1 { margin-left: 0.25rem; }
36.ml-2 { margin-left: 0.5rem; }
37.ml-4 { margin-left: 1rem; }
38.ml-8 { margin-left: 2rem; }
39
40/* Axis margins */
41.mx-0 { margin-left: 0; margin-right: 0; }
42.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
43.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
44.mx-4 { margin-left: 1rem; margin-right: 1rem; }
45.mx-auto { margin-left: auto; margin-right: auto; }
46
47.my-0 { margin-top: 0; margin-bottom: 0; }
48.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
49.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
50.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
51
52/* Padding utilities */
53.p-0 { padding: 0; }
54.p-1 { padding: 0.25rem; }
55.p-2 { padding: 0.5rem; }
56.p-3 { padding: 0.75rem; }
57.p-4 { padding: 1rem; }
58.p-6 { padding: 1.5rem; }
59.p-8 { padding: 2rem; }
60
61/* Display utilities */
62.block { display: block; }
63.inline-block { display: inline-block; }
64.inline { display: inline; }
65.flex { display: flex; }
66.inline-flex { display: inline-flex; }
67.grid { display: grid; }
68.hidden { display: none; }
69
70/* Flexbox utilities */
71.flex-row { flex-direction: row; }
72.flex-col { flex-direction: column; }
73.flex-wrap { flex-wrap: wrap; }
74.flex-nowrap { flex-wrap: nowrap; }
75
76.items-start { align-items: flex-start; }
77.items-center { align-items: center; }
78.items-end { align-items: flex-end; }
79.items-stretch { align-items: stretch; }
80
81.justify-start { justify-content: flex-start; }
82.justify-center { justify-content: center; }
83.justify-end { justify-content: flex-end; }
84.justify-between { justify-content: space-between; }
85.justify-around { justify-content: space-around; }
86
87.flex-1 { flex: 1 1 0%; }
88.flex-auto { flex: 1 1 auto; }
89.flex-initial { flex: 0 1 auto; }
90.flex-none { flex: none; }
91
92/* Gap utilities */
93.gap-0 { gap: 0; }
94.gap-1 { gap: 0.25rem; }
95.gap-2 { gap: 0.5rem; }
96.gap-4 { gap: 1rem; }
97.gap-6 { gap: 1.5rem; }
98.gap-8 { gap: 2rem; }
99
100/* Grid utilities */
101.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
102.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
103.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
104.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
105.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
106
107.col-span-1 { grid-column: span 1 / span 1; }
108.col-span-2 { grid-column: span 2 / span 2; }
109.col-span-3 { grid-column: span 3 / span 3; }
110.col-span-4 { grid-column: span 4 / span 4; }
111
112/* Typography utilities */
113.text-xs { font-size: 0.75rem; line-height: 1rem; }
114.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
115.text-base { font-size: 1rem; line-height: 1.5rem; }
116.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
117.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
118.text-2xl { font-size: 1.5rem; line-height: 2rem; }
119.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
120
121.font-thin { font-weight: 100; }
122.font-light { font-weight: 300; }
123.font-normal { font-weight: 400; }
124.font-medium { font-weight: 500; }
125.font-semibold { font-weight: 600; }
126.font-bold { font-weight: 700; }
127
128.text-left { text-align: left; }
129.text-center { text-align: center; }
130.text-right { text-align: right; }
131
132.leading-tight { line-height: 1.25; }
133.leading-normal { line-height: 1.5; }
134.leading-relaxed { line-height: 1.625; }
135.leading-loose { line-height: 2; }
136
137/* Color utilities */
138.text-black { color: #000000; }
139.text-white { color: #ffffff; }
140.text-gray-100 { color: #f7fafc; }
141.text-gray-500 { color: #a0aec0; }
142.text-gray-900 { color: #1a202c; }
143
144.text-blue-500 { color: #4299e1; }
145.text-blue-600 { color: #3182ce; }
146.text-red-500 { color: #f56565; }
147.text-green-500 { color: #48bb78; }
148
149.bg-white { background-color: #ffffff; }
150.bg-black { background-color: #000000; }
151.bg-gray-100 { background-color: #f7fafc; }
152.bg-gray-500 { background-color: #a0aec0; }
153
154.bg-blue-500 { background-color: #4299e1; }
155.bg-blue-600 { background-color: #3182ce; }
156.bg-red-500 { background-color: #f56565; }
157.bg-green-500 { background-color: #48bb78; }
158
159/* Border utilities */
160.border { border: 1px solid #e2e8f0; }
161.border-0 { border: 0; }
162.border-2 { border: 2px solid #e2e8f0; }
163
164.border-gray-200 { border-color: #edf2f7; }
165.border-gray-400 { border-color: #cbd5e0; }
166.border-blue-500 { border-color: #4299e1; }
167
168.border-solid { border-style: solid; }
169.border-dashed { border-style: dashed; }
170
171.rounded { border-radius: 0.25rem; }
172.rounded-md { border-radius: 0.375rem; }
173.rounded-lg { border-radius: 0.5rem; }
174.rounded-full { border-radius: 9999px; }
175
176/* Positioning utilities */
177.relative { position: relative; }
178.absolute { position: absolute; }
179.fixed { position: fixed; }
180.sticky { position: sticky; }
181
182.top-0 { top: 0; }
183.right-0 { right: 0; }
184.bottom-0 { bottom: 0; }
185.left-0 { left: 0; }
186
187.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
188
189/* Width and Height utilities */
190.w-auto { width: auto; }
191.w-full { width: 100%; }
192.w-1/2 { width: 50%; }
193.w-1/3 { width: 33.333333%; }
194.w-2/3 { width: 66.666667%; }
195.w-1/4 { width: 25%; }
196.w-3/4 { width: 75%; }
197
198.h-auto { height: auto; }
199.h-full { height: 100%; }
200.h-screen { height: 100vh; }
201
202/* Shadow utilities */
203.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
204.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); }
205.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
206.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
207.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
208
209/* Responsive utilities */
210@media (min-width: 640px) {
211 .sm\\:block { display: block; }
212 .sm\\:flex { display: flex; }
213 .sm\\:hidden { display: none; }
214 .sm\\:text-left { text-align: left; }
215 .sm\\:text-center { text-align: center; }
216}
217
218@media (min-width: 768px) {
219 .md\\:block { display: block; }
220 .md\\:flex { display: flex; }
221 .md\\:grid { display: grid; }
222 .md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
223 .md\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
224}
225
226@media (min-width: 1024px) {
227 .lg\\:block { display: block; }
228 .lg\\:flex { display: flex; }
229 .lg\\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
230}
231
232/* State utilities */
233.hover\\:bg-gray-100:hover { background-color: #f7fafc; }
234.hover\\:bg-blue-600:hover { background-color: #3182ce; }
235.hover\\:text-blue-600:hover { color: #3182ce; }
236.hover\\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
237
238.focus\\:outline-none:focus { outline: none; }
239.focus\\:ring-2:focus { box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); }
240.focus\\:border-blue-500:focus { border-color: #4299e1; }
241
242.active\\:bg-blue-700:active { background-color: #2c5aa0; }
243
244.disabled\\:opacity-50:disabled { opacity: 0.5; }
245.disabled\\:cursor-not-allowed:disabled { cursor: not-allowed; }Learn about Atomic CSS Usage Example.
1<!-- Atomic CSS Component Composition -->
2<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
3 <div class="md:flex">
4 <div class="md:flex-shrink-0">
5 <img class="h-48 w-full object-cover md:h-full md:w-48"
6 src="/img/building.jpg"
7 alt="Man looking at item at a store binder">
8 </div>
9 <div class="p-8">
10 <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
11 Company retreats
12 </div>
13 <a href="#"
14 class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
15 Incredible accommodation for your team
16 </a>
17 <p class="mt-2 text-slate-500">
18 Looking to take your team away on a retreat to enjoy awesome food and take in some sunshine?
19 We have a list of places to do just that.
20 </p>
21 </div>
22 </div>
23</div>
24
25<!-- Button variations using atomic classes -->
26<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
27 Primary Button
28</button>
29
30<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
31 Outline Button
32</button>
33
34<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
35 <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
36 <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/>
37 </svg>
38 <span>Download</span>
39</button>
40
41<!-- Responsive grid layout -->
42<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
43 <div class="bg-white rounded-lg shadow-md p-6">
44 <h3 class="text-lg font-semibold mb-2">Card 1</h3>
45 <p class="text-gray-600">Card content goes here.</p>
46 </div>
47 <div class="bg-white rounded-lg shadow-md p-6">
48 <h3 class="text-lg font-semibold mb-2">Card 2</h3>
49 <p class="text-gray-600">Card content goes here.</p>
50 </div>
51 <div class="bg-white rounded-lg shadow-md p-6">
52 <h3 class="text-lg font-semibold mb-2">Card 3</h3>
53 <p class="text-gray-600">Card content goes here.</p>
54 </div>
55</div>Choosing the right CSS architecture depends on project requirements,
team size, and long-term maintainability goals. Use this framework
to make informed decisions about which patterns to adopt.
Choose BEM When:
Working with component-based frameworks
Team needs clear naming conventions
Building reusable component libraries
Moderate to large projects
Choose OOCSS When:
Building large-scale websites
Need maximum reusability
Working with diverse content types
Performance is critical
Choose SMACSS When:
Complex applications with many developers
Need strict organization rules
Building long-term maintained projects
Multiple themes or brands
Choose Atomic CSS When:
Rapid prototyping and development
Consistent design system
Prefer utility-first approach
Bundle size optimization is important
Learn about Production Implementation Checklist.
✅ Architecture pattern selected based on project needs
✅ File organization structure established
✅ Naming conventions documented and enforced
✅ Build process configured for chosen pattern
✅ Style guide created and shared
✅ Code review process includes architecture compliance
✅ Linting rules configured for chosen pattern
✅ Documentation updated with examples
✅ Component library structure established
✅ Utility classes defined and organized
✅ Theme system implemented if needed
✅ Performance monitoring in place
✅ Regular architecture reviews scheduled
✅ Refactoring strategy defined
✅ Legacy code migration plan created
✅ Team training on chosen patterns completed
Your progress is saved in this browser, on this device only.