Master scalable CSS architecture with BEM methodology, component patterns, and organizational strategies for maintainable large-scale projects.
CSS architecture is the foundation of maintainable, scalable web development. As projects grow in complexity, unorganized CSS becomes a nightmare to maintain, debug, and extend. Proper CSS architecture provides structure, naming conventions, and organizational patterns that keep your stylesheets clean and manageable.
Good CSS architecture follows principles of modularity, reusability, and predictability. It separates concerns, establishes clear naming patterns, and creates systems that multiple developers can work with confidently. This becomes critical when building large applications, design systems, or working in teams.
This lesson teaches proven methodologies like BEM (Block Element Modifier), component-based patterns, and organizational strategies used by professional development teams. You'll learn to structure CSS projects that scale gracefully and remain maintainable over time.
BEM is a popular naming methodology that creates clear, maintainable relationships between CSS classes and HTML structure.
BEM Structure and Syntax:
1/* Block - Standalone entity that is meaningful on its own */
2.header { }
3.menu { }
4.search-form { }
5.button { }
6.card { }
7
8/* Element - Part of a block with no standalone meaning */
9.header__logo { } /* Element: logo inside header block */
10.header__navigation { } /* Element: navigation inside header block */
11.menu__item { } /* Element: item inside menu block */
12.menu__link { } /* Element: link inside menu block */
13.search-form__input { } /* Element: input inside search-form block */
14.search-form__submit { } /* Element: submit inside search-form block */
15.card__title { } /* Element: title inside card block */
16.card__content { } /* Element: content inside card block */
17
18/* Modifier - Flag on blocks or elements to change appearance/behavior */
19.button--primary { } /* Modifier: primary style for button */
20.button--large { } /* Modifier: large size for button */
21.button--disabled { } /* Modifier: disabled state for button */
22.menu--vertical { } /* Modifier: vertical layout for menu */
23.menu__item--active { } /* Modifier: active state for menu item */
24.card--featured { } /* Modifier: featured style for card */
25.search-form--compact { } /* Modifier: compact version of search form */Complete BEM Component Example:
1/* Product Card Block */
2.product-card {
3 display: flex;
4 flex-direction: column;
5 background: #ffffff;
6 border: 1px solid #e2e8f0;
7 border-radius: 8px;
8 padding: 1.5rem;
9 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
10 transition: transform 0.2s ease;
11}
12
13/* Product Card Elements */
14.product-card__image {
15 width: 100%;
16 height: 200px;
17 object-fit: cover;
18 border-radius: 4px;
19 margin-bottom: 1rem;
20}
21
22.product-card__title {
23 font-size: 1.25rem;
24 font-weight: 600;
25 color: #1a202c;
26 margin-bottom: 0.5rem;
27 line-height: 1.3;
28}
29
30.product-card__description {
31 color: #718096;
32 font-size: 0.875rem;
33 line-height: 1.5;
34 margin-bottom: 1rem;
35 flex-grow: 1;
36}
37
38.product-card__price {
39 font-size: 1.125rem;
40 font-weight: 700;
41 color: #2d3748;
42 margin-bottom: 1rem;
43}
44
45.product-card__actions {
46 display: flex;
47 gap: 0.75rem;
48 margin-top: auto;
49}
50
51.product-card__button {
52 flex: 1;
53 padding: 0.75rem 1rem;
54 border: 1px solid #e2e8f0;
55 border-radius: 4px;
56 background: #ffffff;
57 color: #4a5568;
58 font-weight: 500;
59 cursor: pointer;
60 transition: all 0.2s ease;
61}
62
63.product-card__button:hover {
64 background: #f7fafc;
65 border-color: #cbd5e0;
66}
67
68/* Product Card Modifiers */
69.product-card--featured {
70 border-color: #3182ce;
71 box-shadow: 0 4px 12px rgba(49, 130, 206, 0.15);
72 position: relative;
73}
74
75.product-card--featured::before {
76 content: 'Featured';
77 position: absolute;
78 top: -1px;
79 right: -1px;
80 background: #3182ce;
81 color: white;
82 padding: 0.25rem 0.75rem;
83 font-size: 0.75rem;
84 font-weight: 600;
85 border-radius: 0 8px 0 8px;
86}
87
88.product-card--compact {
89 flex-direction: row;
90 padding: 1rem;
91}
92
93.product-card--compact .product-card__image {
94 width: 120px;
95 height: 120px;
96 margin-right: 1rem;
97 margin-bottom: 0;
98 flex-shrink: 0;
99}
100
101.product-card--compact .product-card__content {
102 display: flex;
103 flex-direction: column;
104 flex: 1;
105}
106
107.product-card--sale .product-card__price {
108 color: #e53e3e;
109}
110
111.product-card--out-of-stock {
112 opacity: 0.6;
113 pointer-events: none;
114}
115
116.product-card--out-of-stock .product-card__button {
117 background: #edf2f7;
118 color: #a0aec0;
119 cursor: not-allowed;
120}
121
122/* Button Element Modifiers */
123.product-card__button--primary {
124 background: #3182ce;
125 border-color: #3182ce;
126 color: white;
127}
128
129.product-card__button--primary:hover {
130 background: #2c5282;
131 border-color: #2c5282;
132}
133
134.product-card__button--secondary {
135 background: transparent;
136 border-color: #3182ce;
137 color: #3182ce;
138}
139
140.product-card__button--secondary:hover {
141 background: #ebf8ff;
142}BEM with State Classes:
1/* Navigation Menu with BEM and States */
2.nav-menu {
3 display: flex;
4 list-style: none;
5 margin: 0;
6 padding: 0;
7 background: #2d3748;
8}
9
10.nav-menu__item {
11 position: relative;
12}
13
14.nav-menu__link {
15 display: block;
16 padding: 1rem 1.5rem;
17 color: #e2e8f0;
18 text-decoration: none;
19 transition: all 0.2s ease;
20 position: relative;
21}
22
23.nav-menu__link:hover {
24 background: #4a5568;
25 color: #ffffff;
26}
27
28/* State classes can be mixed with BEM */
29.nav-menu__link.is-active {
30 background: #3182ce;
31 color: #ffffff;
32}
33
34.nav-menu__link.is-disabled {
35 opacity: 0.5;
36 pointer-events: none;
37 cursor: not-allowed;
38}
39
40/* Complex modifier combinations */
41.nav-menu--vertical .nav-menu__item {
42 display: block;
43 width: 100%;
44}
45
46.nav-menu--dark {
47 background: #1a202c;
48}
49
50.nav-menu--dark .nav-menu__link {
51 color: #a0aec0;
52}
53
54.nav-menu--dark .nav-menu__link:hover {
55 background: #2d3748;
56 color: #e2e8f0;
57}
58
59/* Mobile-specific BEM modifiers */
60.nav-menu--mobile {
61 flex-direction: column;
62 position: absolute;
63 top: 100%;
64 left: 0;
65 right: 0;
66 background: #2d3748;
67 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
68 transform: translateY(-100%);
69 opacity: 0;
70 visibility: hidden;
71 transition: all 0.3s ease;
72}
73
74.nav-menu--mobile.is-open {
75 transform: translateY(0);
76 opacity: 1;
77 visibility: visible;
78}
79
80.nav-menu--mobile .nav-menu__link {
81 border-bottom: 1px solid #4a5568;
82}
83
84.nav-menu--mobile .nav-menu__link:last-child {
85 border-bottom: none;
86}BEM Best Practices:
1/* Good BEM practices */
2
3/* 1. Use single hyphens for block names */
4.user-profile { } /* Good */
5.userProfile { } /* Avoid camelCase */
6.user_profile { } /* Avoid underscores for blocks */
7
8/* 2. Elements should always belong to a block */
9.user-profile__avatar { } /* Good - clear hierarchy */
10.avatar { } /* Avoid - unclear context */
11
12/* 3. Avoid deep element nesting */
13.user-profile__header { } /* Good */
14.user-profile__header-avatar { } /* Good alternative */
15.user-profile__header__avatar { } /* Avoid - too nested */
16
17/* 4. Use meaningful modifier names */
18.button--primary { } /* Good - describes appearance */
19.button--submit { } /* Good - describes function */
20.button--blue { } /* Avoid - too specific */
21.button--btn-1 { } /* Avoid - non-descriptive */
22
23/* 5. Modifiers should modify, not replace */
24.card {
25 padding: 1rem;
26 background: white;
27 border: 1px solid #e2e8f0;
28}
29
30.card--highlighted {
31 border-color: #3182ce; /* Modifies existing styles */
32 box-shadow: 0 0 0 2px #ebf8ff; /* Adds new styles */
33 /* Don't repeat all base styles */
34}
35
36/* 6. Use boolean and value modifiers appropriately */
37.progress-bar--loading { } /* Boolean modifier */
38.progress-bar--size-large { } /* Value modifier */
39.progress-bar--theme-dark { } /* Value modifier */
40.progress-bar--width-full { } /* Value modifier */
41
42/* 7. Avoid modifier combinations that conflict */
43.button--primary.button--secondary { } /* Avoid - conflicting */
44.button--large.button--small { } /* Avoid - conflicting */
45
46/* Better: Use single modifiers that encompass the variation */
47.button--primary-large { } /* Good - specific combination */
48.button--cta { } /* Good - semantic meaning */Organize CSS around reusable components that encapsulate styling and behavior, similar to modern JavaScript frameworks.
Component Structure Principles:
1/* Component: Button */
2/* Base component styles */
3.c-button {
4 /* Core button functionality */
5 display: inline-flex;
6 align-items: center;
7 justify-content: center;
8 padding: 0.75rem 1.5rem;
9 border: 1px solid transparent;
10 border-radius: 0.375rem;
11 font-weight: 500;
12 font-size: 0.875rem;
13 line-height: 1.25;
14 text-decoration: none;
15 cursor: pointer;
16 transition: all 0.15s ease-in-out;
17 position: relative;
18 white-space: nowrap;
19 user-select: none;
20
21 /* Prevent default button styles */
22 background: none;
23 font-family: inherit;
24}
25
26/* Component variants */
27.c-button--variant-primary {
28 background-color: #3b82f6;
29 border-color: #3b82f6;
30 color: #ffffff;
31}
32
33.c-button--variant-primary:hover {
34 background-color: #2563eb;
35 border-color: #2563eb;
36}
37
38.c-button--variant-secondary {
39 background-color: #6b7280;
40 border-color: #6b7280;
41 color: #ffffff;
42}
43
44.c-button--variant-outline {
45 background-color: transparent;
46 border-color: #d1d5db;
47 color: #374151;
48}
49
50.c-button--variant-ghost {
51 background-color: transparent;
52 border-color: transparent;
53 color: #6b7280;
54}
55
56/* Component sizes */
57.c-button--size-sm {
58 padding: 0.5rem 1rem;
59 font-size: 0.75rem;
60}
61
62.c-button--size-lg {
63 padding: 1rem 2rem;
64 font-size: 1rem;
65}
66
67.c-button--size-xl {
68 padding: 1.25rem 2.5rem;
69 font-size: 1.125rem;
70}
71
72/* Component states */
73.c-button--state-loading {
74 pointer-events: none;
75 opacity: 0.75;
76}
77
78.c-button--state-disabled {
79 pointer-events: none;
80 opacity: 0.5;
81 cursor: not-allowed;
82}
83
84/* Component additions */
85.c-button--full-width {
86 width: 100%;
87}
88
89.c-button--icon-only {
90 width: auto;
91 aspect-ratio: 1;
92 padding: 0.75rem;
93}Layout Components:
1/* Component: Container */
2.c-container {
3 width: 100%;
4 margin-left: auto;
5 margin-right: auto;
6 padding-left: 1rem;
7 padding-right: 1rem;
8}
9
10.c-container--size-sm { max-width: 640px; }
11.c-container--size-md { max-width: 768px; }
12.c-container--size-lg { max-width: 1024px; }
13.c-container--size-xl { max-width: 1280px; }
14
15/* Component: Grid System */
16.c-grid {
17 display: grid;
18 gap: 1rem;
19}
20
21.c-grid--cols-1 { grid-template-columns: repeat(1, 1fr); }
22.c-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
23.c-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
24.c-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
25.c-grid--cols-auto { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
26
27.c-grid--gap-none { gap: 0; }
28.c-grid--gap-sm { gap: 0.5rem; }
29.c-grid--gap-md { gap: 1rem; }
30.c-grid--gap-lg { gap: 1.5rem; }
31.c-grid--gap-xl { gap: 2rem; }
32
33/* Component: Flexbox Layout */
34.c-flex {
35 display: flex;
36}
37
38.c-flex--direction-column { flex-direction: column; }
39.c-flex--direction-row-reverse { flex-direction: row-reverse; }
40.c-flex--direction-column-reverse { flex-direction: column-reverse; }
41
42.c-flex--justify-start { justify-content: flex-start; }
43.c-flex--justify-center { justify-content: center; }
44.c-flex--justify-end { justify-content: flex-end; }
45.c-flex--justify-between { justify-content: space-between; }
46.c-flex--justify-around { justify-content: space-around; }
47
48.c-flex--align-start { align-items: flex-start; }
49.c-flex--align-center { align-items: center; }
50.c-flex--align-end { align-items: flex-end; }
51.c-flex--align-stretch { align-items: stretch; }
52
53.c-flex--wrap { flex-wrap: wrap; }
54.c-flex--nowrap { flex-wrap: nowrap; }Complex Component Example:
1/* Component: Card */
2.c-card {
3 background: #ffffff;
4 border-radius: 0.5rem;
5 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
6 overflow: hidden;
7 position: relative;
8 transition: all 0.15s ease-in-out;
9}
10
11/* Card sub-components */
12.c-card__header {
13 padding: 1.5rem 1.5rem 0 1.5rem;
14}
15
16.c-card__body {
17 padding: 1.5rem;
18}
19
20.c-card__footer {
21 padding: 0 1.5rem 1.5rem 1.5rem;
22 margin-top: auto;
23}
24
25.c-card__image {
26 width: 100%;
27 height: auto;
28 display: block;
29}
30
31.c-card__title {
32 font-size: 1.25rem;
33 font-weight: 600;
34 color: #1f2937;
35 margin-bottom: 0.5rem;
36}
37
38.c-card__subtitle {
39 font-size: 0.875rem;
40 color: #6b7280;
41 margin-bottom: 1rem;
42}
43
44.c-card__description {
45 color: #4b5563;
46 line-height: 1.6;
47}
48
49/* Card variants */
50.c-card--variant-elevated {
51 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
52}
53
54.c-card--variant-outlined {
55 border: 1px solid #e5e7eb;
56 box-shadow: none;
57}
58
59.c-card--variant-filled {
60 background: #f9fafb;
61 border: 1px solid #e5e7eb;
62}
63
64/* Card states */
65.c-card--state-hover:hover {
66 transform: translateY(-2px);
67 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
68}
69
70.c-card--state-loading {
71 pointer-events: none;
72}
73
74.c-card--state-loading::after {
75 content: '';
76 position: absolute;
77 inset: 0;
78 background: rgba(255, 255, 255, 0.8);
79 display: flex;
80 align-items: center;
81 justify-content: center;
82}
83
84/* Card layouts */
85.c-card--layout-horizontal {
86 display: flex;
87}
88
89.c-card--layout-horizontal .c-card__image {
90 width: 200px;
91 height: auto;
92 flex-shrink: 0;
93 object-fit: cover;
94}
95
96.c-card--layout-horizontal .c-card__content {
97 display: flex;
98 flex-direction: column;
99 flex: 1;
100}Component Composition Patterns:
1/* Composition: Media Object */
2.c-media {
3 display: flex;
4 align-items: flex-start;
5}
6
7.c-media__object {
8 flex-shrink: 0;
9 margin-right: 1rem;
10}
11
12.c-media__content {
13 flex: 1;
14 min-width: 0; /* Prevent overflow */
15}
16
17/* Variations */
18.c-media--align-center .c-media__object {
19 align-self: center;
20}
21
22.c-media--align-bottom .c-media__object {
23 align-self: flex-end;
24}
25
26.c-media--reverse {
27 flex-direction: row-reverse;
28}
29
30.c-media--reverse .c-media__object {
31 margin-right: 0;
32 margin-left: 1rem;
33}
34
35/* Composition: Flag Object (media object with fixed-width object) */
36.c-flag {
37 display: table;
38 width: 100%;
39}
40
41.c-flag__object {
42 display: table-cell;
43 width: 1px; /* Forces minimum width */
44 padding-right: 1rem;
45 vertical-align: top;
46}
47
48.c-flag__content {
49 display: table-cell;
50 vertical-align: top;
51}
52
53/* Composition: Split Layout */
54.c-split {
55 display: flex;
56 justify-content: space-between;
57 align-items: center;
58}
59
60.c-split--align-start { align-items: flex-start; }
61.c-split--align-end { align-items: flex-end; }
62.c-split--align-stretch { align-items: stretch; }
63
64.c-split--stack-sm {
65 flex-direction: column;
66 align-items: stretch;
67}
68
69@media (min-width: 640px) {
70 .c-split--stack-sm {
71 flex-direction: row;
72 align-items: center;
73 }
74}Organize CSS files and folders for maintainability, scalability, and team collaboration across large projects.
File Structure Methodologies:
1/* ITCSS (Inverted Triangle CSS) Structure */
2styles/
3├── 01-settings/ # Global variables, config
4│ ├── _colors.scss
5│ ├── _typography.scss
6│ ├── _spacing.scss
7│ └── _breakpoints.scss
8├── 02-tools/ # Mixins and functions
9│ ├── _mixins.scss
10│ ├── _functions.scss
11│ └── _helpers.scss
12├── 03-generic/ # Reset, normalize
13│ ├── _reset.scss
14│ ├── _normalize.scss
15│ └── _box-sizing.scss
16├── 04-elements/ # Base HTML elements
17│ ├── _headings.scss
18│ ├── _links.scss
19│ ├── _buttons.scss
20│ └── _forms.scss
21├── 05-objects/ # Layout patterns
22│ ├── _container.scss
23│ ├── _grid.scss
24│ ├── _media.scss
25│ └── _flag.scss
26├── 06-components/ # UI components
27│ ├── _header.scss
28│ ├── _navigation.scss
29│ ├── _card.scss
30│ ├── _modal.scss
31│ └── _buttons.scss
32├── 07-utilities/ # Helper classes
33│ ├── _spacing.scss
34│ ├── _typography.scss
35│ ├── _display.scss
36│ └── _positioning.scss
37└── main.scss # Main import fileSettings Layer - Global Configuration:
1/* _settings/_colors.scss */
2:root {
3 /* Brand Colors */
4 --color-primary: #3b82f6;
5 --color-secondary: #64748b;
6 --color-accent: #f59e0b;
7
8 /* Semantic Colors */
9 --color-success: #10b981;
10 --color-warning: #f59e0b;
11 --color-error: #ef4444;
12 --color-info: #3b82f6;
13
14 /* Neutral Colors */
15 --color-gray-50: #f9fafb;
16 --color-gray-100: #f3f4f6;
17 --color-gray-200: #e5e7eb;
18 --color-gray-300: #d1d5db;
19 --color-gray-400: #9ca3af;
20 --color-gray-500: #6b7280;
21 --color-gray-600: #4b5563;
22 --color-gray-700: #374151;
23 --color-gray-800: #1f2937;
24 --color-gray-900: #111827;
25
26 /* Text Colors */
27 --text-primary: var(--color-gray-900);
28 --text-secondary: var(--color-gray-600);
29 --text-tertiary: var(--color-gray-500);
30 --text-inverse: #ffffff;
31
32 /* Background Colors */
33 --bg-primary: #ffffff;
34 --bg-secondary: var(--color-gray-50);
35 --bg-tertiary: var(--color-gray-100);
36}
37
38/* _settings/_typography.scss */
39:root {
40 /* Font Families */
41 --font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
42 --font-family-serif: 'Playfair Display', Georgia, serif;
43 --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
44
45 /* Font Weights */
46 --font-weight-light: 300;
47 --font-weight-normal: 400;
48 --font-weight-medium: 500;
49 --font-weight-semibold: 600;
50 --font-weight-bold: 700;
51 --font-weight-black: 900;
52
53 /* Font Sizes */
54 --font-size-xs: 0.75rem; /* 12px */
55 --font-size-sm: 0.875rem; /* 14px */
56 --font-size-base: 1rem; /* 16px */
57 --font-size-lg: 1.125rem; /* 18px */
58 --font-size-xl: 1.25rem; /* 20px */
59 --font-size-2xl: 1.5rem; /* 24px */
60 --font-size-3xl: 1.875rem; /* 30px */
61 --font-size-4xl: 2.25rem; /* 36px */
62 --font-size-5xl: 3rem; /* 48px */
63 --font-size-6xl: 3.75rem; /* 60px */
64
65 /* Line Heights */
66 --line-height-tight: 1.25;
67 --line-height-snug: 1.375;
68 --line-height-normal: 1.5;
69 --line-height-relaxed: 1.625;
70 --line-height-loose: 2;
71}
72
73/* _settings/_spacing.scss */
74:root {
75 /* Base spacing unit */
76 --space-unit: 1rem;
77
78 /* Spacing scale */
79 --space-0: 0;
80 --space-px: 1px;
81 --space-0-5: 0.125rem; /* 2px */
82 --space-1: 0.25rem; /* 4px */
83 --space-1-5: 0.375rem; /* 6px */
84 --space-2: 0.5rem; /* 8px */
85 --space-2-5: 0.625rem; /* 10px */
86 --space-3: 0.75rem; /* 12px */
87 --space-3-5: 0.875rem; /* 14px */
88 --space-4: 1rem; /* 16px */
89 --space-5: 1.25rem; /* 20px */
90 --space-6: 1.5rem; /* 24px */
91 --space-7: 1.75rem; /* 28px */
92 --space-8: 2rem; /* 32px */
93 --space-9: 2.25rem; /* 36px */
94 --space-10: 2.5rem; /* 40px */
95 --space-12: 3rem; /* 48px */
96 --space-16: 4rem; /* 64px */
97 --space-20: 5rem; /* 80px */
98 --space-24: 6rem; /* 96px */
99 --space-32: 8rem; /* 128px */
100 --space-40: 10rem; /* 160px */
101 --space-48: 12rem; /* 192px */
102 --space-56: 14rem; /* 224px */
103 --space-64: 16rem; /* 256px */
104}Component Organization Patterns:
1/* components/_card.scss */
2/* ==========================================================================
3 Card Component
4 ========================================================================== */
5
6/**
7 * 1. Base card component
8 * 2. Card sub-components (header, body, footer)
9 * 3. Card variants (elevated, outlined, etc.)
10 * 4. Card states (loading, error, success)
11 * 5. Card sizes and layouts
12 * 6. Responsive behavior
13 */
14
15/* Base Component
16 ========================================================================== */
17.c-card {
18 display: flex;
19 flex-direction: column;
20 background: var(--bg-primary);
21 border: 1px solid var(--color-gray-200);
22 border-radius: var(--radius-md);
23 box-shadow: var(--shadow-sm);
24 overflow: hidden;
25 transition: all 0.15s ease;
26
27 /* Prevent collapse when empty */
28 min-height: 1px;
29}
30
31/* Sub-components
32 ========================================================================== */
33.c-card__header {
34 padding: var(--space-6) var(--space-6) 0;
35 border-bottom: 1px solid var(--color-gray-100);
36}
37
38.c-card__header:last-child {
39 border-bottom: none;
40 padding-bottom: var(--space-6);
41}
42
43.c-card__body {
44 padding: var(--space-6);
45 flex: 1;
46}
47
48.c-card__footer {
49 padding: 0 var(--space-6) var(--space-6);
50 border-top: 1px solid var(--color-gray-100);
51 margin-top: auto;
52}
53
54.c-card__title {
55 font-size: var(--font-size-xl);
56 font-weight: var(--font-weight-semibold);
57 color: var(--text-primary);
58 line-height: var(--line-height-tight);
59 margin-bottom: var(--space-2);
60}
61
62.c-card__subtitle {
63 font-size: var(--font-size-sm);
64 color: var(--text-secondary);
65 margin-bottom: var(--space-4);
66}
67
68.c-card__description {
69 color: var(--text-secondary);
70 line-height: var(--line-height-relaxed);
71}
72
73/* Variants
74 ========================================================================== */
75.c-card--variant-elevated {
76 border: none;
77 box-shadow: var(--shadow-lg);
78}
79
80.c-card--variant-outlined {
81 border: 2px solid var(--color-gray-300);
82 box-shadow: none;
83}
84
85.c-card--variant-filled {
86 background: var(--bg-secondary);
87 border-color: var(--color-gray-300);
88}
89
90/* States
91 ========================================================================== */
92.c-card--state-hover:hover {
93 transform: translateY(-2px);
94 box-shadow: var(--shadow-xl);
95}
96
97.c-card--state-interactive {
98 cursor: pointer;
99 transition: all 0.2s ease;
100}
101
102.c-card--state-interactive:hover {
103 border-color: var(--color-primary);
104 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
105}
106
107.c-card--state-loading {
108 pointer-events: none;
109 position: relative;
110 overflow: hidden;
111}
112
113.c-card--state-loading::after {
114 content: '';
115 position: absolute;
116 top: 0;
117 left: -100%;
118 height: 100%;
119 width: 100%;
120 background: linear-gradient(
121 90deg,
122 transparent,
123 rgba(255, 255, 255, 0.4),
124 transparent
125 );
126 animation: shimmer 1.5s infinite;
127}
128
129@keyframes shimmer {
130 to {
131 left: 100%;
132 }
133}
134
135/* Sizes
136 ========================================================================== */
137.c-card--size-sm {
138 --card-padding: var(--space-4);
139}
140
141.c-card--size-sm .c-card__header,
142.c-card--size-sm .c-card__body,
143.c-card--size-sm .c-card__footer {
144 padding: var(--card-padding);
145}
146
147.c-card--size-lg {
148 --card-padding: var(--space-8);
149}
150
151.c-card--size-lg .c-card__header,
152.c-card--size-lg .c-card__body,
153.c-card--size-lg .c-card__footer {
154 padding: var(--card-padding);
155}
156
157/* Responsive Behavior
158 ========================================================================== */
159@media (max-width: 640px) {
160 .c-card {
161 border-radius: 0;
162 border-left: none;
163 border-right: none;
164 }
165
166 .c-card--responsive-stack {
167 flex-direction: column;
168 }
169}
170
171/* Print Styles
172 ========================================================================== */
173@media print {
174 .c-card {
175 border: 1px solid #000;
176 box-shadow: none;
177 break-inside: avoid;
178 }
179}Main Import File Organization:
1/* main.scss - Master stylesheet */
2@charset "UTF-8";
3
4/* ==========================================================================
5 Main Stylesheet - ITCSS Architecture
6
7 This file imports all partial stylesheets in the correct order.
8 Each layer builds upon the previous, from generic to specific.
9 ========================================================================== */
10
11/* Settings Layer - Global variables and configuration
12 ========================================================================== */
13@import 'settings/colors';
14@import 'settings/typography';
15@import 'settings/spacing';
16@import 'settings/breakpoints';
17@import 'settings/shadows';
18@import 'settings/transitions';
19
20/* Tools Layer - Mixins, functions, and utilities
21 ========================================================================== */
22@import 'tools/mixins';
23@import 'tools/functions';
24@import 'tools/helpers';
25
26/* Generic Layer - Reset, normalize, box-sizing
27 ========================================================================== */
28@import 'generic/reset';
29@import 'generic/normalize';
30@import 'generic/box-sizing';
31
32/* Elements Layer - Base HTML element styling
33 ========================================================================== */
34@import 'elements/page';
35@import 'elements/headings';
36@import 'elements/text';
37@import 'elements/links';
38@import 'elements/lists';
39@import 'elements/images';
40@import 'elements/tables';
41@import 'elements/forms';
42
43/* Objects Layer - Layout patterns and abstractions
44 ========================================================================== */
45@import 'objects/container';
46@import 'objects/grid';
47@import 'objects/flex';
48@import 'objects/media';
49@import 'objects/flag';
50@import 'objects/split';
51@import 'objects/stack';
52
53/* Components Layer - UI components
54 ========================================================================== */
55@import 'components/header';
56@import 'components/navigation';
57@import 'components/hero';
58@import 'components/card';
59@import 'components/button';
60@import 'components/form';
61@import 'components/modal';
62@import 'components/tooltip';
63@import 'components/breadcrumb';
64@import 'components/pagination';
65@import 'components/footer';
66
67/* Utilities Layer - Helper classes and overrides
68 ========================================================================== */
69@import 'utilities/spacing';
70@import 'utilities/typography';
71@import 'utilities/colors';
72@import 'utilities/display';
73@import 'utilities/positioning';
74@import 'utilities/flex';
75@import 'utilities/grid';
76@import 'utilities/borders';
77@import 'utilities/shadows';
78
79/* Shame Layer - Quick fixes and hacks (temporary)
80 ========================================================================== */
81@import 'shame';
82
83/*
84 * Architecture Notes:
85 * - Each import represents a partial file (_filename.scss)
86 * - Order matters: generic -> specific, low specificity -> high specificity
87 * - Use comments to explain complex sections
88 * - Keep the shame file for temporary fixes that need refactoring
89 * - Document any deviations from the architecture
90 */Establish clear documentation and naming patterns that make CSS codebases maintainable and accessible to teams.
CSS Documentation Standards:
1/* ==========================================================================
2 Component: Navigation Menu
3 ========================================================================== */
4
5/**
6 * Primary navigation component for site-wide navigation.
7 *
8 * The navigation component provides:
9 * - Horizontal menu layout by default
10 * - Mobile-responsive hamburger menu
11 * - Support for dropdown sub-menus
12 * - Active state indication
13 * - Keyboard navigation support
14 *
15 * @example
16 * <nav class="c-nav c-nav--theme-dark">
17 * <ul class="c-nav__list">
18 * <li class="c-nav__item">
19 * <a href="#" class="c-nav__link c-nav__link--active">Home</a>
20 * </li>
21 * <li class="c-nav__item c-nav__item--has-dropdown">
22 * <a href="#" class="c-nav__link">Products</a>
23 * <ul class="c-nav__dropdown">
24 * <li class="c-nav__dropdown-item">
25 * <a href="#" class="c-nav__dropdown-link">Software</a>
26 * </li>
27 * </ul>
28 * </li>
29 * </ul>
30 * <button class="c-nav__toggle" aria-label="Toggle navigation">
31 * <span class="c-nav__toggle-icon"></span>
32 * </button>
33 * </nav>
34 *
35 * @author Design System Team
36 * @since 1.0.0
37 * @version 2.1.0
38 */
39
40/* Base Component
41 ========================================================================== */
42
43.c-nav {
44 /* 1. Create containing block for absolutely positioned dropdowns */
45 position: relative; /* 1 */
46
47 /* 2. Ensure nav spans full width */
48 width: 100%; /* 2 */
49
50 /* 3. Base styling */
51 background: var(--color-white);
52 border-bottom: 1px solid var(--color-gray-200);
53
54 /* 4. Support for themes */
55 transition: background-color 0.2s ease; /* 4 */
56}
57
58/**
59 * Navigation list container
60 *
61 * 1. Remove default list styling
62 * 2. Create horizontal layout
63 * 3. Center align items vertically
64 */
65.c-nav__list {
66 list-style: none; /* 1 */
67 margin: 0; /* 1 */
68 padding: 0; /* 1 */
69 display: flex; /* 2 */
70 align-items: center; /* 3 */
71}
72
73/**
74 * Individual navigation items
75 *
76 * 1. Position relative for dropdown positioning
77 * 2. Support for hover states on dropdowns
78 */
79.c-nav__item {
80 position: relative; /* 1 */
81}
82
83.c-nav__item--has-dropdown:hover .c-nav__dropdown {
84 opacity: 1;
85 visibility: visible;
86 transform: translateY(0); /* 2 */
87}
88
89/**
90 * Navigation links
91 *
92 * 1. Remove default link styling
93 * 2. Add consistent padding for touch targets
94 * 3. Smooth transitions for interactive states
95 * 4. Minimum touch target size for accessibility
96 */
97.c-nav__link {
98 display: block; /* 1 */
99 text-decoration: none; /* 1 */
100 color: var(--text-primary); /* 1 */
101 padding: var(--space-4) var(--space-6); /* 2 */
102 transition: all 0.2s ease; /* 3 */
103 min-height: 44px; /* 4 - WCAG AA minimum */
104 display: flex; /* 4 */
105 align-items: center; /* 4 */
106}
107
108.c-nav__link:hover,
109.c-nav__link:focus {
110 background: var(--color-gray-50);
111 color: var(--color-primary);
112}
113
114/**
115 * Active navigation state
116 *
117 * Indicates current page/section
118 */
119.c-nav__link--active {
120 color: var(--color-primary);
121 font-weight: var(--font-weight-semibold);
122 background: var(--color-primary-50);
123}
124
125/* Dropdown Sub-menus
126 ========================================================================== */
127
128/**
129 * Dropdown container
130 *
131 * 1. Absolutely position relative to parent nav item
132 * 2. Hidden by default, shown on hover
133 * 3. Elevated appearance with shadow
134 * 4. Prevent text wrapping in dropdown items
135 */
136.c-nav__dropdown {
137 position: absolute; /* 1 */
138 top: 100%; /* 1 */
139 left: 0; /* 1 */
140
141 opacity: 0; /* 2 */
142 visibility: hidden; /* 2 */
143 transform: translateY(-10px); /* 2 */
144 transition: all 0.2s ease; /* 2 */
145
146 background: var(--color-white); /* 3 */
147 border: 1px solid var(--color-gray-200); /* 3 */
148 border-radius: var(--radius-md); /* 3 */
149 box-shadow: var(--shadow-lg); /* 3 */
150
151 min-width: 200px; /* 4 */
152 list-style: none;
153 margin: 0;
154 padding: var(--space-2) 0;
155 z-index: 100;
156}
157
158.c-nav__dropdown-item {
159 /* No special styling needed, inherits from dropdown */
160}
161
162.c-nav__dropdown-link {
163 display: block;
164 padding: var(--space-2) var(--space-4);
165 color: var(--text-primary);
166 text-decoration: none;
167 transition: background-color 0.15s ease;
168}
169
170.c-nav__dropdown-link:hover,
171.c-nav__dropdown-link:focus {
172 background: var(--color-gray-50);
173 color: var(--color-primary);
174}
175
176/* Mobile Navigation
177 ========================================================================== */
178
179/**
180 * Mobile toggle button
181 *
182 * 1. Hidden on desktop, visible on mobile
183 * 2. Positioned at top-right of navigation
184 * 3. Accessible button styling
185 */
186.c-nav__toggle {
187 display: none; /* 1 - Hidden by default */
188 background: none;
189 border: none;
190 padding: var(--space-3);
191 cursor: pointer;
192 border-radius: var(--radius-sm);
193 transition: background-color 0.15s ease;
194}
195
196.c-nav__toggle:hover,
197.c-nav__toggle:focus {
198 background: var(--color-gray-100);
199 outline: 2px solid var(--color-primary);
200 outline-offset: 2px;
201}
202
203/**
204 * Hamburger icon
205 *
206 * CSS-only hamburger menu icon with animation
207 */
208.c-nav__toggle-icon {
209 display: block;
210 width: 24px;
211 height: 3px;
212 background: var(--text-primary);
213 border-radius: 3px;
214 position: relative;
215 transition: all 0.3s ease;
216}
217
218.c-nav__toggle-icon::before,
219.c-nav__toggle-icon::after {
220 content: '';
221 position: absolute;
222 left: 0;
223 width: 100%;
224 height: 3px;
225 background: var(--text-primary);
226 border-radius: 3px;
227 transition: all 0.3s ease;
228}
229
230.c-nav__toggle-icon::before {
231 top: -8px;
232}
233
234.c-nav__toggle-icon::after {
235 bottom: -8px;
236}
237
238/* Animated hamburger when menu is open */
239.c-nav--is-open .c-nav__toggle-icon {
240 background: transparent;
241}
242
243.c-nav--is-open .c-nav__toggle-icon::before {
244 top: 0;
245 transform: rotate(45deg);
246}
247
248.c-nav--is-open .c-nav__toggle-icon::after {
249 bottom: 0;
250 transform: rotate(-45deg);
251}
252
253/* Responsive Behavior
254 ========================================================================== */
255
256/**
257 * Mobile-first responsive navigation
258 *
259 * 1. Mobile: Stack vertically, hidden by default
260 * 2. Desktop: Horizontal layout, always visible
261 */
262
263/* Mobile Styles (default) */
264@media (max-width: 767px) {
265 .c-nav__toggle {
266 display: block; /* Show mobile toggle */
267 position: absolute;
268 top: var(--space-4);
269 right: var(--space-4);
270 }
271
272 .c-nav__list {
273 flex-direction: column;
274 position: absolute;
275 top: 100%;
276 left: 0;
277 right: 0;
278 background: var(--color-white);
279 border-top: 1px solid var(--color-gray-200);
280
281 /* Hidden by default */
282 opacity: 0;
283 visibility: hidden;
284 transform: translateY(-20px);
285 transition: all 0.3s ease;
286 }
287
288 .c-nav--is-open .c-nav__list {
289 opacity: 1;
290 visibility: visible;
291 transform: translateY(0);
292 }
293
294 .c-nav__item {
295 width: 100%;
296 }
297
298 .c-nav__link {
299 border-bottom: 1px solid var(--color-gray-100);
300 }
301
302 /* Disable dropdowns on mobile, show as expanded list */
303 .c-nav__dropdown {
304 position: static;
305 opacity: 1;
306 visibility: visible;
307 transform: none;
308 box-shadow: none;
309 border: none;
310 background: var(--color-gray-50);
311 margin: 0;
312 }
313
314 .c-nav__dropdown-link {
315 padding-left: var(--space-8); /* Indent sub-items */
316 }
317}
318
319/* Desktop Styles */
320@media (min-width: 768px) {
321 .c-nav__toggle {
322 display: none; /* Hide mobile toggle */
323 }
324
325 .c-nav__list {
326 /* Default flex layout works for desktop */
327 }
328}
329
330/* Theme Variants
331 ========================================================================== */
332
333/**
334 * Dark theme variant
335 *
336 * Applied via .c-nav--theme-dark class
337 */
338.c-nav--theme-dark {
339 background: var(--color-gray-900);
340 border-bottom-color: var(--color-gray-700);
341}
342
343.c-nav--theme-dark .c-nav__link {
344 color: var(--color-gray-200);
345}
346
347.c-nav--theme-dark .c-nav__link:hover,
348.c-nav--theme-dark .c-nav__link:focus {
349 background: var(--color-gray-800);
350 color: var(--color-white);
351}
352
353.c-nav--theme-dark .c-nav__link--active {
354 color: var(--color-primary-300);
355 background: var(--color-gray-800);
356}
357
358.c-nav--theme-dark .c-nav__dropdown {
359 background: var(--color-gray-800);
360 border-color: var(--color-gray-700);
361}
362
363.c-nav--theme-dark .c-nav__dropdown-link {
364 color: var(--color-gray-200);
365}
366
367.c-nav--theme-dark .c-nav__dropdown-link:hover,
368.c-nav--theme-dark .c-nav__dropdown-link:focus {
369 background: var(--color-gray-700);
370 color: var(--color-white);
371}
372
373.c-nav--theme-dark .c-nav__toggle-icon,
374.c-nav--theme-dark .c-nav__toggle-icon::before,
375.c-nav--theme-dark .c-nav__toggle-icon::after {
376 background: var(--color-gray-200);
377}
378
379/* Print Styles
380 ========================================================================== */
381
382/**
383 * Navigation should be simplified for print
384 */
385@media print {
386 .c-nav {
387 border-bottom: 2px solid #000;
388 background: transparent;
389 }
390
391 .c-nav__toggle,
392 .c-nav__dropdown {
393 display: none; /* Hide interactive elements */
394 }
395
396 .c-nav__list {
397 flex-wrap: wrap;
398 }
399
400 .c-nav__link {
401 color: #000;
402 text-decoration: underline;
403 }
404
405 .c-nav__link--active {
406 font-weight: bold;
407 text-decoration: none;
408 }
409}Naming Convention Guidelines:
1/* Naming Convention Standards */
2
3/* 1. Use lowercase with hyphens for multi-word names */
4.product-card { } /* Good */
5.productCard { } /* Avoid - camelCase */
6.product_card { } /* Avoid - underscores */
7.ProductCard { } /* Avoid - PascalCase */
8
9/* 2. Prefix component classes */
10.c-button { } /* Component */
11.o-container { } /* Object/Layout */
12.u-margin-large { } /* Utility */
13.is-active { } /* State */
14.has-dropdown { } /* State */
15.js-toggle { } /* JavaScript hook */
16
17/* 3. Use semantic names over presentational */
18.button-primary { } /* Good - semantic */
19.button-large { } /* Good - semantic */
20.button-blue { } /* Avoid - presentational */
21.button-20px { } /* Avoid - presentational */
22
23/* 4. Be consistent with modifier patterns */
24.card--featured { } /* BEM modifier */
25.card-featured { } /* Alternative pattern */
26/* Pick one and stick to it throughout the project */
27
28/* 5. Use consistent state class patterns */
29.is-open { } /* Boolean state */
30.is-loading { } /* Boolean state */
31.has-error { } /* Boolean state */
32.state-loading { } /* Alternative pattern */
33.state-error { } /* Alternative pattern */
34
35/* 6. JavaScript hooks should be separate from styling */
36.js-modal-trigger { } /* JavaScript hook only */
37.js-form-validator { } /* JavaScript hook only */
38/* Never style .js- classes, use separate styling classes */
39
40/* 7. Use data attributes for dynamic content */
41[data-theme="dark"] { } /* Theme switching */
42[data-state="loading"] { } /* Dynamic states */
43[data-size="large"] { } /* Size variations */
44
45/* 8. Breakpoint and responsive naming */
46.show-mobile { } /* Visible only on mobile */
47.hide-desktop { } /* Hidden on desktop */
48.stack-sm { } /* Stacks on small screens */
49.cols-md-2 { } /* 2 columns on medium screens */
50
51/* 9. Version and deprecation indicators */
52.button-v2 { } /* Version indication */
53.legacy-nav { } /* Legacy component indicator */
54/* .deprecated-card { } */ /* Mark deprecated components */
55
56/* 10. Namespace for third-party integration */
57.wp-block { } /* WordPress block */
58.shopify-product { } /* Shopify integration */
59.mailchimp-form { } /* Third-party service */A comprehensive demonstration of scalable CSS architecture using BEM methodology, component patterns, and organizational best practices.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Architecture & Organization Mastery</title>
7 <style>
8 /* ==========================================================================
9 CSS Architecture Example - ITCSS + BEM Methodology
10 ========================================================================== */
11
12 /* Settings Layer - Global Configuration
13 ========================================================================== */
14 :root {
15 /* Color System */
16 --color-primary: #3b82f6;
17 --color-primary-hover: #2563eb;
18 --color-primary-light: #eff6ff;
19 --color-secondary: #64748b;
20 --color-success: #10b981;
21 --color-warning: #f59e0b;
22 --color-error: #ef4444;
23
24 /* Neutral Colors */
25 --color-white: #ffffff;
26 --color-gray-50: #f9fafb;
27 --color-gray-100: #f3f4f6;
28 --color-gray-200: #e5e7eb;
29 --color-gray-300: #d1d5db;
30 --color-gray-500: #6b7280;
31 --color-gray-600: #4b5563;
32 --color-gray-700: #374151;
33 --color-gray-800: #1f2937;
34 --color-gray-900: #111827;
35
36 /* Typography */
37 --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
38 --font-size-sm: 0.875rem;
39 --font-size-base: 1rem;
40 --font-size-lg: 1.125rem;
41 --font-size-xl: 1.25rem;
42 --font-size-2xl: 1.5rem;
43 --font-size-3xl: 1.875rem;
44 --font-weight-normal: 400;
45 --font-weight-medium: 500;
46 --font-weight-semibold: 600;
47 --font-weight-bold: 700;
48 --line-height-tight: 1.25;
49 --line-height-normal: 1.5;
50 --line-height-relaxed: 1.625;
51
52 /* Spacing System */
53 --space-1: 0.25rem;
54 --space-2: 0.5rem;
55 --space-3: 0.75rem;
56 --space-4: 1rem;
57 --space-5: 1.25rem;
58 --space-6: 1.5rem;
59 --space-8: 2rem;
60 --space-10: 2.5rem;
61 --space-12: 3rem;
62 --space-16: 4rem;
63 --space-20: 5rem;
64
65 /* Layout */
66 --container-max-width: 1200px;
67 --container-padding: var(--space-6);
68 --border-radius-sm: 0.25rem;
69 --border-radius-md: 0.5rem;
70 --border-radius-lg: 0.75rem;
71
72 /* Shadows */
73 --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
74 --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
75 --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
76 --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
77
78 /* Transitions */
79 --transition-fast: 0.15s ease;
80 --transition-normal: 0.3s ease;
81 --transition-slow: 0.5s ease;
82 }
83
84 /* Generic Layer - Reset & Normalize
85 ========================================================================== */
86 * {
87 margin: 0;
88 padding: 0;
89 box-sizing: border-box;
90 }
91
92 /* Elements Layer - Base HTML Elements
93 ========================================================================== */
94 body {
95 font-family: var(--font-family-sans);
96 font-size: var(--font-size-base);
97 line-height: var(--line-height-normal);
98 color: var(--color-gray-900);
99 background: var(--color-gray-50);
100 }
101
102 h1, h2, h3, h4, h5, h6 {
103 font-weight: var(--font-weight-bold);
104 line-height: var(--line-height-tight);
105 margin-bottom: var(--space-4);
106 }
107
108 h1 { font-size: var(--font-size-3xl); }
109 h2 { font-size: var(--font-size-2xl); }
110 h3 { font-size: var(--font-size-xl); }
111
112 p {
113 margin-bottom: var(--space-4);
114 line-height: var(--line-height-relaxed);
115 }
116
117 a {
118 color: var(--color-primary);
119 text-decoration: none;
120 transition: color var(--transition-fast);
121 }
122
123 a:hover {
124 color: var(--color-primary-hover);
125 }
126
127 /* Objects Layer - Layout Patterns
128 ========================================================================== */
129
130 /**
131 * Container Object
132 * Constrains content width and centers it
133 */
134 .o-container {
135 max-width: var(--container-max-width);
136 margin: 0 auto;
137 padding: 0 var(--container-padding);
138 }
139
140 .o-container--narrow {
141 max-width: 800px;
142 }
143
144 .o-container--wide {
145 max-width: 1400px;
146 }
147
148 /**
149 * Grid Object
150 * Flexible grid system using CSS Grid
151 */
152 .o-grid {
153 display: grid;
154 gap: var(--space-6);
155 }
156
157 .o-grid--cols-1 { grid-template-columns: 1fr; }
158 .o-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
159 .o-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
160 .o-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
161 .o-grid--auto { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
162
163 .o-grid--gap-sm { gap: var(--space-4); }
164 .o-grid--gap-lg { gap: var(--space-8); }
165
166 /**
167 * Stack Object
168 * Vertical spacing between elements
169 */
170 .o-stack > * + * {
171 margin-top: var(--space-4);
172 }
173
174 .o-stack--sm > * + * { margin-top: var(--space-2); }
175 .o-stack--lg > * + * { margin-top: var(--space-6); }
176 .o-stack--xl > * + * { margin-top: var(--space-8); }
177
178 /**
179 * Flex Object
180 * Common flexbox patterns
181 */
182 .o-flex {
183 display: flex;
184 }
185
186 .o-flex--center {
187 align-items: center;
188 justify-content: center;
189 }
190
191 .o-flex--between {
192 justify-content: space-between;
193 align-items: center;
194 }
195
196 .o-flex--column {
197 flex-direction: column;
198 }
199
200 .o-flex--wrap {
201 flex-wrap: wrap;
202 }
203
204 /* Components Layer - UI Components
205 ========================================================================== */
206
207 /**
208 * Header Component
209 * Site header with navigation
210 */
211 .c-header {
212 background: var(--color-white);
213 border-bottom: 1px solid var(--color-gray-200);
214 padding: var(--space-4) 0;
215 position: sticky;
216 top: 0;
217 z-index: 100;
218 }
219
220 .c-header__content {
221 display: flex;
222 justify-content: space-between;
223 align-items: center;
224 }
225
226 .c-header__logo {
227 font-size: var(--font-size-xl);
228 font-weight: var(--font-weight-bold);
229 color: var(--color-primary);
230 }
231
232 /**
233 * Navigation Component
234 * Primary site navigation using BEM
235 */
236 .c-nav {
237 display: flex;
238 align-items: center;
239 }
240
241 .c-nav__list {
242 display: flex;
243 list-style: none;
244 gap: var(--space-6);
245 }
246
247 .c-nav__item {
248 position: relative;
249 }
250
251 .c-nav__link {
252 color: var(--color-gray-700);
253 font-weight: var(--font-weight-medium);
254 padding: var(--space-2) var(--space-3);
255 border-radius: var(--border-radius-md);
256 transition: all var(--transition-fast);
257 display: block;
258 }
259
260 .c-nav__link:hover {
261 background: var(--color-gray-100);
262 color: var(--color-gray-900);
263 }
264
265 .c-nav__link--active {
266 background: var(--color-primary-light);
267 color: var(--color-primary);
268 }
269
270 /* Mobile navigation toggle */
271 .c-nav__toggle {
272 display: none;
273 background: none;
274 border: none;
275 padding: var(--space-2);
276 cursor: pointer;
277 border-radius: var(--border-radius-md);
278 }
279
280 .c-nav__toggle:hover {
281 background: var(--color-gray-100);
282 }
283
284 .c-nav__toggle-icon {
285 display: block;
286 width: 24px;
287 height: 3px;
288 background: var(--color-gray-700);
289 border-radius: 2px;
290 position: relative;
291 transition: all var(--transition-normal);
292 }
293
294 .c-nav__toggle-icon::before,
295 .c-nav__toggle-icon::after {
296 content: '';
297 position: absolute;
298 left: 0;
299 width: 100%;
300 height: 3px;
301 background: var(--color-gray-700);
302 border-radius: 2px;
303 transition: all var(--transition-normal);
304 }
305
306 .c-nav__toggle-icon::before { top: -8px; }
307 .c-nav__toggle-icon::after { bottom: -8px; }
308
309 /**
310 * Button Component
311 * Flexible button system with variants
312 */
313 .c-button {
314 display: inline-flex;
315 align-items: center;
316 justify-content: center;
317 padding: var(--space-3) var(--space-6);
318 border: 1px solid transparent;
319 border-radius: var(--border-radius-md);
320 font-weight: var(--font-weight-medium);
321 font-size: var(--font-size-base);
322 text-decoration: none;
323 cursor: pointer;
324 transition: all var(--transition-fast);
325 position: relative;
326 background: none;
327 font-family: inherit;
328 line-height: 1;
329 }
330
331 /* Button variants */
332 .c-button--variant-primary {
333 background: var(--color-primary);
334 border-color: var(--color-primary);
335 color: var(--color-white);
336 }
337
338 .c-button--variant-primary:hover {
339 background: var(--color-primary-hover);
340 border-color: var(--color-primary-hover);
341 transform: translateY(-1px);
342 }
343
344 .c-button--variant-secondary {
345 background: var(--color-white);
346 border-color: var(--color-gray-300);
347 color: var(--color-gray-700);
348 }
349
350 .c-button--variant-secondary:hover {
351 background: var(--color-gray-50);
352 border-color: var(--color-gray-400);
353 }
354
355 .c-button--variant-outline {
356 background: transparent;
357 border-color: var(--color-primary);
358 color: var(--color-primary);
359 }
360
361 .c-button--variant-outline:hover {
362 background: var(--color-primary);
363 color: var(--color-white);
364 }
365
366 .c-button--variant-ghost {
367 background: transparent;
368 border-color: transparent;
369 color: var(--color-gray-600);
370 }
371
372 .c-button--variant-ghost:hover {
373 background: var(--color-gray-100);
374 color: var(--color-gray-900);
375 }
376
377 /* Button sizes */
378 .c-button--size-sm {
379 padding: var(--space-2) var(--space-4);
380 font-size: var(--font-size-sm);
381 }
382
383 .c-button--size-lg {
384 padding: var(--space-4) var(--space-8);
385 font-size: var(--font-size-lg);
386 }
387
388 /* Button states */
389 .c-button--state-loading {
390 pointer-events: none;
391 opacity: 0.75;
392 }
393
394 .c-button--state-disabled {
395 pointer-events: none;
396 opacity: 0.5;
397 cursor: not-allowed;
398 }
399
400 /**
401 * Card Component
402 * Content container with flexible layout
403 */
404 .c-card {
405 background: var(--color-white);
406 border: 1px solid var(--color-gray-200);
407 border-radius: var(--border-radius-lg);
408 box-shadow: var(--shadow-sm);
409 overflow: hidden;
410 transition: all var(--transition-normal);
411 }
412
413 .c-card:hover {
414 box-shadow: var(--shadow-md);
415 transform: translateY(-2px);
416 }
417
418 .c-card__header {
419 padding: var(--space-6);
420 border-bottom: 1px solid var(--color-gray-200);
421 }
422
423 .c-card__body {
424 padding: var(--space-6);
425 }
426
427 .c-card__footer {
428 padding: var(--space-6);
429 border-top: 1px solid var(--color-gray-200);
430 background: var(--color-gray-50);
431 }
432
433 .c-card__title {
434 font-size: var(--font-size-xl);
435 font-weight: var(--font-weight-semibold);
436 margin-bottom: var(--space-2);
437 }
438
439 .c-card__subtitle {
440 color: var(--color-gray-600);
441 font-size: var(--font-size-sm);
442 margin-bottom: var(--space-4);
443 }
444
445 /* Card variants */
446 .c-card--variant-elevated {
447 border: none;
448 box-shadow: var(--shadow-lg);
449 }
450
451 .c-card--variant-outlined {
452 border: 2px solid var(--color-gray-300);
453 box-shadow: none;
454 }
455
456 .c-card--variant-filled {
457 background: var(--color-gray-100);
458 border-color: var(--color-gray-300);
459 }
460
461 /**
462 * Badge Component
463 * Small status indicators
464 */
465 .c-badge {
466 display: inline-flex;
467 align-items: center;
468 padding: var(--space-1) var(--space-3);
469 border-radius: 9999px;
470 font-size: var(--font-size-sm);
471 font-weight: var(--font-weight-medium);
472 line-height: 1;
473 }
474
475 .c-badge--variant-default {
476 background: var(--color-gray-100);
477 color: var(--color-gray-800);
478 }
479
480 .c-badge--variant-primary {
481 background: var(--color-primary-light);
482 color: var(--color-primary);
483 }
484
485 .c-badge--variant-success {
486 background: #dcfce7;
487 color: var(--color-success);
488 }
489
490 .c-badge--variant-warning {
491 background: #fef3c7;
492 color: var(--color-warning);
493 }
494
495 .c-badge--variant-error {
496 background: #fef2f2;
497 color: var(--color-error);
498 }
499
500 /**
501 * Hero Component
502 * Large promotional section
503 */
504 .c-hero {
505 background: linear-gradient(135deg, var(--color-primary) 0%, #1e40af 100%);
506 color: var(--color-white);
507 padding: var(--space-20) 0;
508 text-align: center;
509 position: relative;
510 overflow: hidden;
511 }
512
513 .c-hero::before {
514 content: '';
515 position: absolute;
516 top: -50%;
517 right: -50%;
518 width: 200%;
519 height: 200%;
520 background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 50%);
521 animation: rotate 20s linear infinite;
522 }
523
524 @keyframes rotate {
525 to { transform: rotate(360deg); }
526 }
527
528 .c-hero__content {
529 position: relative;
530 z-index: 2;
531 }
532
533 .c-hero__title {
534 font-size: clamp(2rem, 5vw, 4rem);
535 margin-bottom: var(--space-6);
536 }
537
538 .c-hero__subtitle {
539 font-size: var(--font-size-lg);
540 opacity: 0.9;
541 margin-bottom: var(--space-8);
542 max-width: 600px;
543 margin-left: auto;
544 margin-right: auto;
545 }
546
547 .c-hero__actions {
548 display: flex;
549 gap: var(--space-4);
550 justify-content: center;
551 flex-wrap: wrap;
552 }
553
554 /**
555 * Feature Component
556 * Feature highlight with icon and content
557 */
558 .c-feature {
559 text-align: center;
560 padding: var(--space-6);
561 }
562
563 .c-feature__icon {
564 width: 64px;
565 height: 64px;
566 margin: 0 auto var(--space-4);
567 background: var(--color-primary-light);
568 border-radius: var(--border-radius-lg);
569 display: flex;
570 align-items: center;
571 justify-content: center;
572 font-size: 24px;
573 color: var(--color-primary);
574 }
575
576 .c-feature__title {
577 font-size: var(--font-size-xl);
578 font-weight: var(--font-weight-semibold);
579 margin-bottom: var(--space-3);
580 }
581
582 .c-feature__description {
583 color: var(--color-gray-600);
584 line-height: var(--line-height-relaxed);
585 }
586
587 /* State Classes
588 ========================================================================== */
589 .is-active {
590 /* Active state styling */
591 }
592
593 .is-hidden {
594 display: none !important;
595 }
596
597 .is-loading {
598 position: relative;
599 pointer-events: none;
600 }
601
602 .is-loading::after {
603 content: '';
604 position: absolute;
605 top: 0;
606 left: 0;
607 right: 0;
608 bottom: 0;
609 background: rgba(255, 255, 255, 0.8);
610 display: flex;
611 align-items: center;
612 justify-content: center;
613 }
614
615 .has-shadow {
616 box-shadow: var(--shadow-md) !important;
617 }
618
619 /* Utilities Layer - Helper Classes
620 ========================================================================== */
621
622 /* Text utilities */
623 .u-text-center { text-align: center !important; }
624 .u-text-left { text-align: left !important; }
625 .u-text-right { text-align: right !important; }
626
627 .u-text-primary { color: var(--color-primary) !important; }
628 .u-text-secondary { color: var(--color-gray-600) !important; }
629 .u-text-muted { color: var(--color-gray-500) !important; }
630
631 .u-text-sm { font-size: var(--font-size-sm) !important; }
632 .u-text-base { font-size: var(--font-size-base) !important; }
633 .u-text-lg { font-size: var(--font-size-lg) !important; }
634 .u-text-xl { font-size: var(--font-size-xl) !important; }
635
636 .u-font-normal { font-weight: var(--font-weight-normal) !important; }
637 .u-font-medium { font-weight: var(--font-weight-medium) !important; }
638 .u-font-semibold { font-weight: var(--font-weight-semibold) !important; }
639 .u-font-bold { font-weight: var(--font-weight-bold) !important; }
640
641 /* Spacing utilities */
642 .u-margin-0 { margin: 0 !important; }
643 .u-margin-auto { margin: auto !important; }
644 .u-margin-bottom-0 { margin-bottom: 0 !important; }
645 .u-margin-bottom-sm { margin-bottom: var(--space-2) !important; }
646 .u-margin-bottom-md { margin-bottom: var(--space-4) !important; }
647 .u-margin-bottom-lg { margin-bottom: var(--space-6) !important; }
648
649 .u-padding-0 { padding: 0 !important; }
650 .u-padding-sm { padding: var(--space-2) !important; }
651 .u-padding-md { padding: var(--space-4) !important; }
652 .u-padding-lg { padding: var(--space-6) !important; }
653
654 /* Display utilities */
655 .u-block { display: block !important; }
656 .u-inline-block { display: inline-block !important; }
657 .u-flex { display: flex !important; }
658 .u-grid { display: grid !important; }
659 .u-hidden { display: none !important; }
660
661 /* Responsive utilities */
662 @media (max-width: 768px) {
663 .u-hidden-mobile { display: none !important; }
664
665 .c-nav__list {
666 display: none;
667 }
668
669 .c-nav__toggle {
670 display: block;
671 }
672
673 .c-nav--is-open .c-nav__list {
674 display: flex;
675 flex-direction: column;
676 position: absolute;
677 top: 100%;
678 left: 0;
679 right: 0;
680 background: var(--color-white);
681 border: 1px solid var(--color-gray-200);
682 border-radius: var(--border-radius-md);
683 padding: var(--space-4);
684 gap: var(--space-2);
685 box-shadow: var(--shadow-lg);
686 margin-top: var(--space-2);
687 }
688
689 .o-grid--cols-2,
690 .o-grid--cols-3,
691 .o-grid--cols-4 {
692 grid-template-columns: 1fr;
693 }
694
695 .c-hero__actions {
696 flex-direction: column;
697 align-items: center;
698 }
699
700 .c-hero__actions .c-button {
701 width: 100%;
702 max-width: 300px;
703 }
704 }
705
706 @media (min-width: 769px) {
707 .u-hidden-desktop { display: none !important; }
708 }
709
710 /* Print utilities */
711 @media print {
712 .u-print-hidden { display: none !important; }
713
714 .c-hero {
715 background: none !important;
716 color: var(--color-gray-900) !important;
717 }
718
719 .c-button {
720 border: 2px solid var(--color-gray-900) !important;
721 background: none !important;
722 color: var(--color-gray-900) !important;
723 }
724 }
725 </style>
726</head>
727<body>
728 <!-- Header Component -->
729 <header class="c-header">
730 <div class="o-container">
731 <div class="c-header__content">
732 <div class="c-header__logo">🏗️ Architecture Demo</div>
733
734 <nav class="c-nav" id="main-nav">
735 <ul class="c-nav__list">
736 <li class="c-nav__item">
737 <a href="#home" class="c-nav__link c-nav__link--active">Home</a>
738 </li>
739 <li class="c-nav__item">
740 <a href="#components" class="c-nav__link">Components</a>
741 </li>
742 <li class="c-nav__item">
743 <a href="#architecture" class="c-nav__link">Architecture</a>
744 </li>
745 <li class="c-nav__item">
746 <a href="#documentation" class="c-nav__link">Docs</a>
747 </li>
748 </ul>
749
750 <button class="c-nav__toggle" onclick="toggleNav()" aria-label="Toggle navigation">
751 <span class="c-nav__toggle-icon"></span>
752 </button>
753 </nav>
754 </div>
755 </div>
756 </header>
757
758 <!-- Hero Component -->
759 <section class="c-hero" id="home">
760 <div class="o-container">
761 <div class="c-hero__content">
762 <h1 class="c-hero__title">CSS Architecture Mastery</h1>
763 <p class="c-hero__subtitle">
764 Build scalable, maintainable CSS with BEM methodology, component patterns, and organizational best practices.
765 </p>
766 <div class="c-hero__actions">
767 <button class="c-button c-button--variant-primary c-button--size-lg" onclick="scrollToSection('components')">
768 Explore Components
769 </button>
770 <button class="c-button c-button--variant-outline c-button--size-lg" onclick="scrollToSection('architecture')">
771 View Architecture
772 </button>
773 </div>
774 </div>
775 </div>
776 </section>
777
778 <!-- Components Section -->
779 <section id="components" style="padding: var(--space-20) 0;">
780 <div class="o-container">
781 <div class="u-text-center u-margin-bottom-lg">
782 <h2>Component Library</h2>
783 <p class="u-text-secondary u-text-lg">Modular, reusable UI components built with BEM methodology</p>
784 </div>
785
786 <!-- Button Showcase -->
787 <div class="c-card u-margin-bottom-lg">
788 <div class="c-card__header">
789 <h3 class="c-card__title">Button Component</h3>
790 <p class="c-card__subtitle">Flexible button system with variants, sizes, and states</p>
791 </div>
792 <div class="c-card__body">
793 <div class="o-stack">
794 <div>
795 <h4 class="u-margin-bottom-sm">Variants</h4>
796 <div class="o-flex" style="gap: var(--space-4); flex-wrap: wrap;">
797 <button class="c-button c-button--variant-primary">Primary</button>
798 <button class="c-button c-button--variant-secondary">Secondary</button>
799 <button class="c-button c-button--variant-outline">Outline</button>
800 <button class="c-button c-button--variant-ghost">Ghost</button>
801 </div>
802 </div>
803
804 <div>
805 <h4 class="u-margin-bottom-sm">Sizes</h4>
806 <div class="o-flex" style="gap: var(--space-4); flex-wrap: wrap; align-items: center;">
807 <button class="c-button c-button--variant-primary c-button--size-sm">Small</button>
808 <button class="c-button c-button--variant-primary">Default</button>
809 <button class="c-button c-button--variant-primary c-button--size-lg">Large</button>
810 </div>
811 </div>
812
813 <div>
814 <h4 class="u-margin-bottom-sm">States</h4>
815 <div class="o-flex" style="gap: var(--space-4); flex-wrap: wrap;">
816 <button class="c-button c-button--variant-primary">Normal</button>
817 <button class="c-button c-button--variant-primary c-button--state-loading">Loading</button>
818 <button class="c-button c-button--variant-primary c-button--state-disabled">Disabled</button>
819 </div>
820 </div>
821 </div>
822 </div>
823 </div>
824
825 <!-- Card Showcase -->
826 <div class="o-grid o-grid--cols-3 u-margin-bottom-lg">
827 <div class="c-card">
828 <div class="c-card__header">
829 <h3 class="c-card__title">Default Card</h3>
830 <p class="c-card__subtitle">Basic card component</p>
831 </div>
832 <div class="c-card__body">
833 <p>This is a standard card component with header, body, and footer sections. It demonstrates the base BEM structure.</p>
834 </div>
835 <div class="c-card__footer">
836 <button class="c-button c-button--variant-primary c-button--size-sm">Action</button>
837 </div>
838 </div>
839
840 <div class="c-card c-card--variant-elevated">
841 <div class="c-card__header">
842 <h3 class="c-card__title">Elevated Card</h3>
843 <p class="c-card__subtitle">Enhanced with shadow</p>
844 </div>
845 <div class="c-card__body">
846 <p>This card uses the --variant-elevated modifier to increase the shadow and remove the border for a floating effect.</p>
847 </div>
848 <div class="c-card__footer">
849 <button class="c-button c-button--variant-outline c-button--size-sm">Learn More</button>
850 </div>
851 </div>
852
853 <div class="c-card c-card--variant-outlined">
854 <div class="c-card__header">
855 <h3 class="c-card__title">Outlined Card</h3>
856 <p class="c-card__subtitle">Emphasized border</p>
857 </div>
858 <div class="c-card__body">
859 <p>The --variant-outlined modifier increases the border width and removes the shadow for a flat design approach.</p>
860 </div>
861 <div class="c-card__footer">
862 <button class="c-button c-button--variant-ghost c-button--size-sm">Details</button>
863 </div>
864 </div>
865 </div>
866
867 <!-- Badge Showcase -->
868 <div class="c-card">
869 <div class="c-card__header">
870 <h3 class="c-card__title">Badge Component</h3>
871 <p class="c-card__subtitle">Status and category indicators</p>
872 </div>
873 <div class="c-card__body">
874 <div class="o-flex" style="gap: var(--space-3); flex-wrap: wrap; align-items: center;">
875 <span class="c-badge c-badge--variant-default">Default</span>
876 <span class="c-badge c-badge--variant-primary">Primary</span>
877 <span class="c-badge c-badge--variant-success">Success</span>
878 <span class="c-badge c-badge--variant-warning">Warning</span>
879 <span class="c-badge c-badge--variant-error">Error</span>
880 </div>
881 </div>
882 </div>
883 </div>
884 </section>
885
886 <!-- Features Section -->
887 <section style="padding: var(--space-20) 0; background: var(--color-white);">
888 <div class="o-container">
889 <div class="u-text-center u-margin-bottom-lg">
890 <h2>Architecture Benefits</h2>
891 <p class="u-text-secondary u-text-lg">Why proper CSS architecture matters for your projects</p>
892 </div>
893
894 <div class="o-grid o-grid--cols-3">
895 <div class="c-feature">
896 <div class="c-feature__icon">📚</div>
897 <h3 class="c-feature__title">BEM Methodology</h3>
898 <p class="c-feature__description">
899 Clear naming conventions that create predictable, maintainable relationships between CSS classes and HTML structure.
900 </p>
901 </div>
902
903 <div class="c-feature">
904 <div class="c-feature__icon">🧩</div>
905 <h3 class="c-feature__title">Component Patterns</h3>
906 <p class="c-feature__description">
907 Modular, reusable components that encapsulate styling and behavior, similar to modern JavaScript frameworks.
908 </p>
909 </div>
910
911 <div class="c-feature">
912 <div class="c-feature__icon">🏗️</div>
913 <h3 class="c-feature__title">Scalable Structure</h3>
914 <p class="c-feature__description">
915 Organized file structure and naming conventions that scale from small projects to enterprise applications.
916 </p>
917 </div>
918
919 <div class="c-feature">
920 <div class="c-feature__icon">👥</div>
921 <h3 class="c-feature__title">Team Collaboration</h3>
922 <p class="c-feature__description">
923 Consistent patterns and documentation that enable multiple developers to work confidently on the same codebase.
924 </p>
925 </div>
926
927 <div class="c-feature">
928 <div class="c-feature__icon">🔧</div>
929 <h3 class="c-feature__title">Maintainable Code</h3>
930 <p class="c-feature__description">
931 Clear separation of concerns and predictable patterns that make debugging and extending styles straightforward.
932 </p>
933 </div>
934
935 <div class="c-feature">
936 <div class="c-feature__icon">📱</div>
937 <h3 class="c-feature__title">Responsive Design</h3>
938 <p class="c-feature__description">
939 Built-in responsive patterns and utilities that adapt components across all device sizes and orientations.
940 </p>
941 </div>
942 </div>
943 </div>
944 </section>
945
946 <!-- Architecture Documentation -->
947 <section id="architecture" style="padding: var(--space-20) 0;">
948 <div class="o-container">
949 <div class="u-text-center u-margin-bottom-lg">
950 <h2>CSS Architecture Layers</h2>
951 <p class="u-text-secondary u-text-lg">ITCSS (Inverted Triangle CSS) structure from generic to specific</p>
952 </div>
953
954 <div class="o-grid o-grid--cols-2">
955 <div class="c-card">
956 <div class="c-card__header">
957 <h3 class="c-card__title">1. Settings Layer</h3>
958 <span class="c-badge c-badge--variant-primary">Variables</span>
959 </div>
960 <div class="c-card__body">
961 <p>Global variables and configuration including colors, typography, spacing, and breakpoints. CSS custom properties for design tokens.</p>
962 <code style="background: var(--color-gray-100); padding: var(--space-1) var(--space-2); border-radius: var(--border-radius-sm); font-size: var(--font-size-sm);">
963 :root { --color-primary: #3b82f6; }
964 </code>
965 </div>
966 </div>
967
968 <div class="c-card">
969 <div class="c-card__header">
970 <h3 class="c-card__title">2. Tools Layer</h3>
971 <span class="c-badge c-badge--variant-secondary">Functions</span>
972 </div>
973 <div class="c-card__body">
974 <p>Mixins, functions, and helper utilities for preprocessors. Reusable code patterns that don't output CSS directly.</p>
975 <code style="background: var(--color-gray-100); padding: var(--space-1) var(--space-2); border-radius: var(--border-radius-sm); font-size: var(--font-size-sm);">
976 @mixin button-style() { ... }
977 </code>
978 </div>
979 </div>
980
981 <div class="c-card">
982 <div class="c-card__header">
983 <h3 class="c-card__title">3. Generic Layer</h3>
984 <span class="c-badge c-badge--variant-success">Reset</span>
985 </div>
986 <div class="c-card__body">
987 <p>Reset, normalize, and box-sizing rules. Far-reaching styles that affect all elements with very low specificity.</p>
988 <code style="background: var(--color-gray-100); padding: var(--space-1) var(--space-2); border-radius: var(--border-radius-sm); font-size: var(--font-size-sm);">
989 *, *::before, *::after { box-sizing: border-box; }
990 </code>
991 </div>
992 </div>
993
994 <div class="c-card">
995 <div class="c-card__header">
996 <h3 class="c-card__title">4. Elements Layer</h3>
997 <span class="c-badge c-badge--variant-warning">HTML</span>
998 </div>
999 <div class="c-card__body">
1000 <p>Bare HTML element styling. Default styles for headings, links, lists, and form elements without classes.</p>
1001 <code style="background: var(--color-gray-100); padding: var(--space-1) var(--space-2); border-radius: var(--border-radius-sm); font-size: var(--font-size-sm);">
1002 h1 { font-size: 2rem; font-weight: bold; }
1003 </code>
1004 </div>
1005 </div>
1006
1007 <div class="c-card">
1008 <div class="c-card__header">
1009 <h3 class="c-card__title">5. Objects Layer</h3>
1010 <span class="c-badge c-badge--variant-error">Layout</span>
1011 </div>
1012 <div class="c-card__body">
1013 <p>Layout patterns and abstractions. Structural components like containers, grids, and common layout patterns.</p>
1014 <code style="background: var(--color-gray-100); padding: var(--space-1) var(--space-2); border-radius: var(--border-radius-sm); font-size: var(--font-size-sm);">
1015 .o-container { max-width: 1200px; margin: 0 auto; }
1016 </code>
1017 </div>
1018 </div>
1019
1020 <div class="c-card">
1021 <div class="c-card__header">
1022 <h3 class="c-card__title">6. Components Layer</h3>
1023 <span class="c-badge c-badge--variant-primary">UI</span>
1024 </div>
1025 <div class="c-card__body">
1026 <p>Designed UI components using BEM methodology. Buttons, cards, navigation, modals, and other interface elements.</p>
1027 <code style="background: var(--color-gray-100); padding: var(--space-1) var(--space-2); border-radius: var(--border-radius-sm); font-size: var(--font-size-sm);">
1028 .c-button { padding: 0.75rem 1.5rem; }
1029 </code>
1030 </div>
1031 </div>
1032
1033 <div class="c-card">
1034 <div class="c-card__header">
1035 <h3 class="c-card__title">7. Utilities Layer</h3>
1036 <span class="c-badge c-badge--variant-success">Helpers</span>
1037 </div>
1038 <div class="c-card__body">
1039 <p>Helper classes and overrides. High-specificity utilities for spacing, typography, display, and responsive behavior.</p>
1040 <code style="background: var(--color-gray-100); padding: var(--space-1) var(--space-2); border-radius: var(--border-radius-sm); font-size: var(--font-size-sm);">
1041 .u-text-center { text-align: center !important; }
1042 </code>
1043 </div>
1044 </div>
1045
1046 <div class="c-card">
1047 <div class="c-card__header">
1048 <h3 class="c-card__title">8. Shame Layer</h3>
1049 <span class="c-badge c-badge--variant-error">Temporary</span>
1050 </div>
1051 <div class="c-card__body">
1052 <p>Quick fixes and hacks that need refactoring. Temporary solutions that should be addressed in future iterations.</p>
1053 <code style="background: var(--color-gray-100); padding: var(--space-1) var(--space-2); border-radius: var(--border-radius-sm); font-size: var(--font-size-sm);">
1054 /* TODO: Refactor this hack */
1055 </code>
1056 </div>
1057 </div>
1058 </div>
1059 </div>
1060 </section>
1061
1062 <!-- Documentation Section -->
1063 <section id="documentation" style="padding: var(--space-20) 0; background: var(--color-white);">
1064 <div class="o-container">
1065 <div class="u-text-center u-margin-bottom-lg">
1066 <h2>Documentation Standards</h2>
1067 <p class="u-text-secondary u-text-lg">Clear documentation and naming conventions for team collaboration</p>
1068 </div>
1069
1070 <div class="o-grid o-grid--cols-2">
1071 <div class="c-card">
1072 <div class="c-card__header">
1073 <h3 class="c-card__title">BEM Naming Convention</h3>
1074 </div>
1075 <div class="c-card__body">
1076 <div class="o-stack">
1077 <div>
1078 <h4>Block</h4>
1079 <code style="background: var(--color-primary-light); padding: var(--space-1) var(--space-2); border-radius: var(--border-radius-sm); color: var(--color-primary); font-weight: var(--font-weight-medium);">.c-card</code>
1080 <p class="u-text-sm u-text-secondary">Standalone component entity</p>
1081 </div>
1082
1083 <div>
1084 <h4>Element</h4>
1085 <code style="background: var(--color-success); color: white; padding: var(--space-1) var(--space-2); border-radius: var(--border-radius-sm); font-weight: var(--font-weight-medium);">.c-card__header</code>
1086 <p class="u-text-sm u-text-secondary">Part of a block with no standalone meaning</p>
1087 </div>
1088
1089 <div>
1090 <h4>Modifier</h4>
1091 <code style="background: var(--color-warning); color: white; padding: var(--space-1) var(--space-2); border-radius: var(--border-radius-sm); font-weight: var(--font-weight-medium);">.c-card--variant-elevated</code>
1092 <p class="u-text-sm u-text-secondary">Flag to change appearance or behavior</p>
1093 </div>
1094 </div>
1095 </div>
1096 </div>
1097
1098 <div class="c-card">
1099 <div class="c-card__header">
1100 <h3 class="c-card__title">Class Prefixes</h3>
1101 </div>
1102 <div class="c-card__body">
1103 <div class="o-stack">
1104 <div class="o-flex o-flex--between">
1105 <code>.c-</code>
1106 <span class="u-text-sm u-text-secondary">Components</span>
1107 </div>
1108
1109 <div class="o-flex o-flex--between">
1110 <code>.o-</code>
1111 <span class="u-text-sm u-text-secondary">Objects/Layout</span>
1112 </div>
1113
1114 <div class="o-flex o-flex--between">
1115 <code>.u-</code>
1116 <span class="u-text-sm u-text-secondary">Utilities</span>
1117 </div>
1118
1119 <div class="o-flex o-flex--between">
1120 <code>.is-</code>
1121 <span class="u-text-sm u-text-secondary">State</span>
1122 </div>
1123
1124 <div class="o-flex o-flex--between">
1125 <code>.has-</code>
1126 <span class="u-text-sm u-text-secondary">State</span>
1127 </div>
1128
1129 <div class="o-flex o-flex--between">
1130 <code>.js-</code>
1131 <span class="u-text-sm u-text-secondary">JavaScript Hook</span>
1132 </div>
1133 </div>
1134 </div>
1135 </div>
1136 </div>
1137 </div>
1138 </section>
1139
1140 <!-- Summary -->
1141 <section style="text-align: center; background: linear-gradient(135deg, var(--color-primary) 0%, #1e40af 100%); color: var(--color-white); padding: var(--space-20) 0;">
1142 <div class="o-container">
1143 <h2 style="color: var(--color-white); margin-bottom: var(--space-6);">🏗️ CSS Architecture Mastery!</h2>
1144 <p style="font-size: var(--font-size-lg); margin-bottom: var(--space-8); opacity: 0.9;">
1145 You've mastered scalable CSS architecture with BEM methodology and component patterns!
1146 </p>
1147
1148 <div class="o-grid o-grid--cols-4" style="margin: var(--space-12) 0;">
1149 <div style="background: rgba(255,255,255,0.1); padding: var(--space-6); border-radius: var(--border-radius-lg);">
1150 <strong>✅ BEM Methodology</strong><br>
1151 <small>Clear naming conventions for maintainable CSS</small>
1152 </div>
1153 <div style="background: rgba(255,255,255,0.1); padding: var(--space-6); border-radius: var(--border-radius-lg);">
1154 <strong>✅ Component Patterns</strong><br>
1155 <small>Modular, reusable UI component system</small>
1156 </div>
1157 <div style="background: rgba(255,255,255,0.1); padding: var(--space-6); border-radius: var(--border-radius-lg);">
1158 <strong>✅ ITCSS Structure</strong><br>
1159 <small>Organized layers from generic to specific</small>
1160 </div>
1161 <div style="background: rgba(255,255,255,0.1); padding: var(--space-6); border-radius: var(--border-radius-lg);">
1162 <strong>✅ Documentation</strong><br>
1163 <small>Professional standards for team collaboration</small>
1164 </div>
1165 </div>
1166 </div>
1167 </section>
1168
1169 <script>
1170 // Navigation toggle functionality
1171 function toggleNav() {
1172 const nav = document.getElementById('main-nav');
1173 nav.classList.toggle('c-nav--is-open');
1174
1175 const toggle = nav.querySelector('.c-nav__toggle');
1176 toggle.setAttribute('aria-expanded',
1177 nav.classList.contains('c-nav--is-open') ? 'true' : 'false'
1178 );
1179 }
1180
1181 // Smooth scroll to sections
1182 function scrollToSection(id) {
1183 const element = document.getElementById(id);
1184 if (element) {
1185 element.scrollIntoView({
1186 behavior: 'smooth',
1187 block: 'start'
1188 });
1189 }
1190
1191 // Close mobile nav if open
1192 const nav = document.getElementById('main-nav');
1193 if (nav.classList.contains('c-nav--is-open')) {
1194 toggleNav();
1195 }
1196 }
1197
1198 // Update active nav link based on scroll position
1199 function updateActiveNavLink() {
1200 const sections = ['home', 'components', 'architecture', 'documentation'];
1201 const navLinks = document.querySelectorAll('.c-nav__link');
1202
1203 let currentSection = '';
1204
1205 sections.forEach(section => {
1206 const element = document.getElementById(section);
1207 if (element) {
1208 const rect = element.getBoundingClientRect();
1209 if (rect.top <= 100 && rect.bottom >= 100) {
1210 currentSection = section;
1211 }
1212 }
1213 });
1214
1215 navLinks.forEach(link => {
1216 link.classList.remove('c-nav__link--active');
1217 if (link.getAttribute('href') === '#' + currentSection) {
1218 link.classList.add('c-nav__link--active');
1219 }
1220 });
1221 }
1222
1223 // Initialize
1224 document.addEventListener('DOMContentLoaded', function() {
1225 // Set up scroll listener for active nav
1226 window.addEventListener('scroll', updateActiveNavLink);
1227
1228 // Set up nav link click handlers
1229 document.querySelectorAll('.c-nav__link').forEach(link => {
1230 link.addEventListener('click', function(e) {
1231 e.preventDefault();
1232 const target = this.getAttribute('href').substring(1);
1233 scrollToSection(target);
1234 });
1235 });
1236
1237 // Set up button click handlers
1238 document.querySelectorAll('[onclick]').forEach(button => {
1239 button.addEventListener('click', function() {
1240 // Add loading state for demonstration
1241 this.classList.add('c-button--state-loading');
1242 setTimeout(() => {
1243 this.classList.remove('c-button--state-loading');
1244 }, 1500);
1245 });
1246 });
1247
1248 // Close mobile nav when clicking outside
1249 document.addEventListener('click', function(e) {
1250 const nav = document.getElementById('main-nav');
1251 const toggle = nav.querySelector('.c-nav__toggle');
1252
1253 if (nav.classList.contains('c-nav--is-open') &&
1254 !nav.contains(e.target) &&
1255 !toggle.contains(e.target)) {
1256 toggleNav();
1257 }
1258 });
1259
1260 // Handle responsive behavior
1261 window.addEventListener('resize', function() {
1262 const nav = document.getElementById('main-nav');
1263 if (window.innerWidth > 768 && nav.classList.contains('c-nav--is-open')) {
1264 nav.classList.remove('c-nav--is-open');
1265 }
1266 });
1267
1268 // Initial active nav update
1269 updateActiveNavLink();
1270 });
1271
1272 // Keyboard navigation support
1273 document.addEventListener('keydown', function(e) {
1274 if (e.key === 'Escape') {
1275 const nav = document.getElementById('main-nav');
1276 if (nav.classList.contains('c-nav--is-open')) {
1277 toggleNav();
1278 }
1279 }
1280 });
1281 </script>
1282</body>
1283</html>This comprehensive CSS architecture demonstration showcases professional development practices:
🏗️ Complete ITCSS Implementation:
📚 BEM Methodology Excellence:
🧩 Component-Based Architecture:
📖 Professional Documentation Standards:
🎨 Advanced Features Demonstrated:
This example represents production-ready CSS architecture that scales from small projects to enterprise applications while maintaining code quality and team collaboration standards.
Fantastic work mastering CSS architecture and organization! You now understand how to build scalable, maintainable CSS codebases using professional methodologies. Next, we'll explore "Cross-browser Compatibility" where you'll learn to handle browser differences, vendor prefixes, and testing strategies to ensure your CSS works everywhere. Get ready to master cross-browser development!
Your progress is saved in this browser, on this device only.