Roadmap › HTML5 & CSS3 — Semantic Markup to Responsive Layouts › Module: Modern CSS and Frameworks
Lessons in this course (11)
10. Bootstrap, Tailwind and CSS architecture
IntermediateMediumLesson 10 of 11
| Approach | Example | Pros | Cons |
|---|---|---|---|
| Component framework | Bootstrap 5 | Fast, consistent grid and components | Sites look alike, heavier CSS |
| Utility-first | Tailwind CSS | No naming, small production CSS, design tokens | Long class lists in markup |
| Methodology | BEM (.card__title--active) | Predictable, low specificity | Verbose names |
| Scoped CSS | CSS Modules, Angular view encapsulation, Vue scoped | No global leaks | Tooling-specific |
html
<!-- Bootstrap grid -->
<div class="container"><div class="row"><div class="col-12 col-md-6 col-lg-4">Card</div></div></div>
<!-- Tailwind -->
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"><div class="rounded-xl p-4 shadow">Card</div></div>