Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Prevents CSS from becoming a mess
Makes code easier to understand and modify
Helps teams work together without conflicts
Uses naming conventions and organization rules
Popular methodologies: BEM, OOCSS, SMACSS
Essential for large websites and applications
.button2-new-final, styles scattered everywhere, team members overwriting each other's code with !important, and nobody knowing which CSS is safe to delete. Sound familiar? CSS Architecture solves this!Class names explain what they do
.user-profile__avatar (clear) vs .img2 (unclear)Write CSS once, use it many times
One .button class for all buttonsStyles apply only where intended
.card__title (specific) vs .title (too broad)Each component is self-contained
Card CSS doesn't affect button CSS.block__element--modifier.cardThe main component (like a card, button, menu)
.card__titleA part of the block (uses double underscore __)
.card--featuredA variation of the block (uses double dash --)
/* Block: The main component */
.user-card {
padding: 20px;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
/* Element: Part of the card (notice __) */
.user-card__avatar {
width: 60px;
height: 60px;
border-radius: 50%;
}
.user-card__name {
font-size: 20px;
font-weight: 600;
margin-top: 10px;
}
.user-card__bio {
font-size: 14px;
color: #6b7280;
}
/* Modifier: Variation of the card (notice --) */
.user-card--premium {
border-color: #3b82f6;
background: linear-gradient(to bottom, #eff6ff, white);
}
.user-card--compact {
padding: 10px;
}
.user-card--compact .user-card__avatar {
width: 40px;
height: 40px;
}<div class="user-card">
<img class="user-card__avatar" src="https://via.placeholder.com/60" alt="User">
<h3 class="user-card__name">John Doe</h3>
<p class="user-card__bio">Web Developer</p>
</div>
<div class="user-card user-card--premium">
<img class="user-card__avatar" src="https://via.placeholder.com/60" alt="User">
<h3 class="user-card__name">Jane Smith</h3>
<p class="user-card__bio">Premium Member ⭐</p>
</div>
<div class="user-card user-card--compact">
<img class="user-card__avatar" src="https://via.placeholder.com/40" alt="User">
<h3 class="user-card__name">Bob Wilson</h3>
</div>Loading preview...
.menu__item--active tells you everything.card__title won't break anything elseStructure = size, padding, margin. Skin = colors, fonts, shadows
Content should look the same no matter where it's placed
/* STRUCTURE: Layout and sizing */
.box {
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
/* SKIN: Visual appearance */
.skin-primary {
background: #3b82f6;
color: white;
border: 2px solid #2563eb;
}
.skin-success {
background: #10b981;
color: white;
border: 2px solid #059669;
}
.skin-danger {
background: #ef4444;
color: white;
border: 2px solid #dc2626;
}
/* COMBINE THEM */
/* <div class="box skin-primary">...</div> */
/* <div class="box skin-success">...</div> */
/* CONTENT: Works anywhere */
.media {
display: flex;
gap: 15px;
}
.media__image {
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: 50%;
}
.media__content {
flex: 1;
}<div class="box skin-primary">
<h3>Primary Box</h3>
<p>This box uses the primary skin</p>
</div>
<div class="box skin-success">
<h3>Success Box</h3>
<p>This box uses the success skin</p>
</div>
<div class="box skin-danger">
<h3>Danger Box</h3>
<p>This box uses the danger skin</p>
</div>
<div class="media">
<img class="media__image" src="https://via.placeholder.com/60" alt="User">
<div class="media__content">
<h4>Media Object</h4>
<p>Content looks the same anywhere</p>
</div>
</div>Loading preview...
Default styles for HTML elements
body, h1, a, buttonMajor page structure (prefix with l-)
.l-header, .l-sidebar, .l-mainReusable components
.card, .button, .menuHow things look in different states (prefix with is-)
.is-active, .is-hidden, .is-errorColors and visual themes (prefix with theme-)
.theme-dark, .theme-light/* File: base.css - Default element styles */
body {
font-family: system-ui, sans-serif;
line-height: 1.6;
color: #333;
}
h1, h2, h3 {
margin-bottom: 1rem;
}
/* File: layout.css - Page structure */
.l-header {
padding: 20px;
background: #3b82f6;
}
.l-sidebar {
width: 250px;
float: left;
}
.l-main {
margin-left: 270px;
}
/* File: module.css - Components */
.card {
padding: 20px;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
.button {
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
}
/* File: state.css - States */
.is-active {
background: #3b82f6;
color: white;
}
.is-hidden {
display: none;
}
.is-loading {
opacity: 0.6;
pointer-events: none;
}
/* File: theme.css - Themes */
.theme-dark {
background: #1f2937;
color: #f3f4f6;
}
.theme-light {
background: #ffffff;
color: #1f2937;
}