A modern website should not only look good but also be:
In this lesson, we'll cover two important aspects of frontend development:
CSS Performance focuses on making styles load and render efficiently.
Well-optimized CSS leads to:
Poorly optimized CSS can cause:
Optimizing your CSS helps websites load faster and feel smoother.
Large CSS files take longer to download.
.button {
background: blue;
}
.card {
background: white;
}
/* Hundreds of unused styles */
Remove:
Smaller CSS files download faster.
Instead of writing CSS inside every HTML page, use an external stylesheet.
<link
rel="stylesheet"
href="styles.css"
>
Benefits:
Complex selectors take longer for browsers to evaluate.
body main section article div p span {
color: red;
}
.text {
color: red;
}
Simple selectors are easier to read and more efficient.
Deeply nested selectors make CSS harder to maintain.
.container .content .card .title {
color: blue;
}
.card-title {
color: blue;
}
Prefer class selectors.
Fast
.button {}
.card {}
.nav-link {}
Avoid unnecessary complex selectors.
div > ul > li > a {}
Background images should be optimized.
.hero {
background-image: url("large-image.png");
}
.hero {
background-image: url("hero.webp");
}
Recommended formats:
Smaller images improve loading speed.
Some CSS properties trigger layout recalculations.
Example
Bad
.card:hover {
top: -10px;
}
Good
.card:hover {
transform: translateY(-10px);
}
Modern browsers optimize animations using:
Example
.card {
transition: transform 0.3s ease;
}
These animations are smoother and require less processing power.
Before deploying a website, CSS should be minified.
Before
.card {
padding: 20px;
}
After
.card{padding:20px}
Benefits:
Avoid repeating values throughout your stylesheet.
Instead of
.button {
background: #2563EB;
}
.card {
border-color: #2563EB;
}
Use
:root {
--primary: #2563EB;
}
.button {
background: var(--primary);
}
.card {
border-color: var(--primary);
}
Benefits:
Every visual update requires the browser to:
Calculate Layout
↓
Paint Pixels
↓
Render Screen
Avoid triggering unnecessary layout recalculations.
Prefer:
Avoid animating:
Images below the visible area should load only when needed.
<img
src="image.jpg"
loading="lazy"
alt="Image"
>
Benefits:
✔ Remove Unused CSS
✔ Minify CSS
✔ Use CSS Variables
✔ Optimize Images
✔ Prefer Transform & Opacity
✔ Avoid Deep Selectors
✔ Cache CSS Files
Accessibility ensures websites are usable by everyone, including people with disabilities.
This includes users with:
Benefits include:
Avoid generic elements when semantic elements exist.
Bad
<div class="header">
</div>
Good
<header>
</header>
Benefits:
Bad
<h1>Main Title</h1>
<h4>Section</h4>
Good
<h1>Main Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
Proper heading order creates a logical content hierarchy.
Bad
<img src="logo.png">
Good
<img
src="logo.png"
alt="Company Logo"
>
Benefits:
Bad
<input type="email">
Good
<label for="email">
Email
</label>
<input
id="email"
type="email"
>
Labels improve usability and accessibility.
Users should be able to navigate using only the keyboard.
Common keys:
Good
<button>
Submit
</button>
Avoid
<div onclick="submit()">
Submit
</div>
Poor contrast makes text difficult to read.
Bad
Light Gray Text
on White Background
Good
Dark Text
on White Background
High contrast improves readability.
Avoid communicating information using only colors.
Bad
Red = Error
Green = Success
Better
❌ Error
✅ Success
Or provide descriptive text alongside colors.
Keyboard users need to know which element is currently selected.
Good
button:focus {
outline: 2px solid blue;
}
Avoid
button:focus {
outline: none;
}
Avoid very small text.
Bad
font-size: 10px;
Recommended
font-size: 16px;
Body text should generally be at least 16px.
Text should adapt to different screen sizes.
font-size: clamp(
1rem,
2vw,
1.25rem
);
This improves readability across devices.
Bad
<div>
Click Me
</div>
Good
<button>
Click Me
</button>
Buttons provide built-in keyboard and accessibility support.
Bad
<a>
Read More
</a>
Good
<a href="/article">
Read More
</a>
Links should always have a valid destination.
ARIA (Accessible Rich Internet Applications) provides additional information to assistive technologies when HTML alone is not enough.
Example
<button
aria-label="Close Menu"
>
✕
</button>
| Attribute | Purpose |
|---|---|
aria-label |
Accessible label |
aria-hidden |
Hide from screen readers |
aria-expanded |
Expand/Collapse state |
aria-describedby |
Additional description |
Use ARIA only when semantic HTML cannot provide the required accessibility.
Popular accessibility tools include:
These tools help identify accessibility issues before deployment.
✔ Use Semantic HTML
✔ Maintain Proper Heading Structure
✔ Add Alt Text
✔ Label Form Controls
✔ Support Keyboard Navigation
✔ Ensure Good Color Contrast
✔ Show Focus Indicators
✔ Use Responsive Typography
✔ Use ARIA Only When Necessary
Great websites achieve both.
Example
<img
src="hero.webp"
alt="Students learning HTML"
loading="lazy"
>
Benefits
:root {
--primary: #2563EB;
}
.button {
background: var(--primary);
transition: transform 0.3s ease;
}
.button:hover {
transform: translateY(-2px);
}
.button:focus {
outline: 2px solid blue;
}
This example provides:
| Topic | Purpose |
|---|---|
| CSS Performance | Faster websites |
| Minification | Smaller CSS files |
| CSS Variables | Reusable values |
| Transform & Opacity | Efficient animations |
| Semantic HTML | Better accessibility |
| Alt Text | Accessible images |
| Labels | Accessible forms |
| Focus States | Keyboard navigation |
| Color Contrast | Better readability |
| ARIA | Enhanced accessibility |
A professional frontend developer should build websites that are:
Fast
+
Accessible
+
Responsive
+
Maintainable
Modern frontend development commonly uses:
transformopacityclamp()Combined with:
Following these best practices helps create websites that are faster, more accessible, SEO-friendly, and usable by everyone.