CSS Frameworks Overview

एक bicycle बनाने की कल्पना करें। आप किसी metal foundry में जा सकते हैं, steel frame forge कर सकते हैं, rubber tires काट सकते हैं, और chain links को शुरू से खुद assemble कर सकते हैं (यह raw, vanilla CSS लिखना है)। यह आपको पूरी creative freedom देता है, लेकिन इसमें बहुत समय लगता है। अब, एक pre-assembled kit खरीदने की कल्पना करें। इसमें high-quality, pre-built parts (जैसे frames, wheels, और gears) आते हैं जिन्हें आप कुछ ही minutes में अपनी bike बनाने के लिए साथ में snap कर सकते हैं। CSS Frameworks वही pre-assembled kits हैं। ये pre-built style classes, grids, और UI components की libraries provide करते हैं जो आपको कुछ ही minutes में professional, responsive websites design करने देते हैं।

In this page:

CSS Frameworks क्या हैं?
Utility-First Architecture
Component-Driven Architecture
Default Theme Configurations Customize करना
Unused CSS को Optimize और Purge करना

CSS Frameworks क्या हैं?

CSS Frameworks CSS classes, grids, और components की pre-written libraries हैं जो development times तेज़ करने और आपके project में consistent styling establish करने के लिए design की गई हैं।

Note: अपने project goals के आधार पर एक framework चुनें: custom designs के लिए utility-first चुनें, और तेज़, standard layouts के लिए component-driven।

Warning: frameworks को customize किए बिना इस्तेमाल करना आपकी website को हज़ारों दूसरी sites जैसी identical दिखा सकता है।

उदाहरण: What are CSS Frameworks?

css

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <style>
    .container { background: #e7f1ff; border: 2px solid #0d6efd; padding: 1rem; }
  </style>
</head>
<body>
  <div class="container">Pre-written classes, grids, and components</div>
</body>
</html>

Utility-First Architecture

Utility-first frameworks (जैसे Tailwind CSS) छोटी, single-purpose classes की libraries provide करते हैं (जैसे padding के लिए p-4 या centering के लिए text-center) जो आपको सीधे अपने HTML markup के अंदर elements style करने देती हैं।

Note: अपनी HTML file छोड़े बिना जल्दी custom, unique designs बनाने के लिए utility-first classes इस्तेमाल करें।

Warning: ज़्यादा इस्तेमाल होने पर utility-first classes आपके HTML code को cluttered और पढ़ने में मुश्किल बना सकती हैं।

उदाहरण: Utility-First Architecture

css

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body { font-family: sans-serif; }
  </style>
</head>
<body>
  <div class="p-4 text-center bg-blue-100 border-2 border-blue-500">Tiny single-purpose classes</div>
</body>
</html>

Component-Driven Architecture

Component-driven frameworks (जैसे Bootstrap या Bulma) पूरे UI components (जैसे navigation bars, cards, modals, या forms) के लिए pre-written classes provide करते हैं, आपको कुछ ही minutes में standard pages बनाने देते हुए।

Note: जब आपको जल्दी standard, functional dashboards या prototypes बनाने हों तो component-driven frameworks इस्तेमाल करें।

Warning: pre-designed components को override करने के लिए complex, highly specific CSS selectors लिखने चाहिए हो सकते हैं।

उदाहरण: Component-Driven Architecture

css

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <style>
    body { padding: 1rem; }
  </style>
</head>
<body>
  <nav class="navbar navbar-light bg-light border">Pre-written navbar component</nav>
</body>
</html>

Default Theme Configurations Customize करना

अपनी website को दूसरों जैसी identical दिखने से रोकने के लिए, ज़्यादातर frameworks आपको design variables इस्तेमाल करके उनकी default theme configurations (जैसे colors, fonts, या breakpoints) customize करने देते हैं।

Note: अपने brand की unique identity से match करने के लिए हमेशा अपने framework color variables customize करें।

Warning: framework files को सीधे update करने से बचें; अपने changes declare करने के लिए custom override stylesheets इस्तेमाल करें।

उदाहरण: Customizing Default Theme Configurations

css

<style>
:root {
  --bs-primary: #ff5733;
}
</style>
<button class="btn btn-primary">Themed button</button>

Unused CSS को Optimize और Purge करना

क्योंकि CSS frameworks हज़ारों classes की libraries provide करते हैं, उनकी file sizes बहुत बड़ी हो सकती हैं। अपनी website को तेज़ और optimized रखने के लिए, आपको publish करने से पहले अपने HTML को scan करने और किसी भी unused classes को automatically strip out करने के लिए optimization tools (जैसे PurgeCSS) इस्तेमाल करने चाहिए।

Note: अपने page load speed और Core Web Vitals score बेहतर करने के लिए अपनी final compiled CSS से unused classes purge करें।

Warning: JavaScript इस्तेमाल करके dynamically load की गई classes को purge करते समय सावधान रहें, क्योंकि वे गलती से strip out हो सकती हैं।

उदाहरण: Optimizing and Purging Unused CSS

css

<style>
.btn { background: royalblue; color: white; padding: 10px 20px; border: 0; }
/* .legacy-banner { ... } is never used in the HTML: PurgeCSS would strip it */
/* PurgeCSS scans your HTML and strips out any unused classes
   from the compiled framework CSS before you publish */
</style>
<button class="btn">Used class kept</button>

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Preprocessors Next Lesson → CSS Interview Prep