Modern CSS कोड स्निपेट्स: अब CSS को 2015 की तरह लिखना बंद करें

 (modern-css.com)
3 पॉइंट द्वारा GN⁺ 2026-02-16 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • पुराने CSS hack techniques और उनकी जगह लेने वाले नवीन native CSS syntax को साथ-साथ तुलना करके दिखाने वाला कोड संग्रह
  • Grid, Flexbox, OKLCH colors, container query, scroll-timeline जैसे आधुनिक standards का उपयोग करके JavaScript पर निर्भरता कम करता है
  • colors, layout, animation, selectors, typography, workflow जैसे विषयों के अनुसार वर्गीकृत, और हर फीचर के लिए आधुनिक विकल्प प्रस्तुत करता है
  • नवीन CSS standards के जरिए JS, Sass, external libraries पर निर्भरता घटाई जा सकती है, और browser native features का अधिकतम उपयोग किया जा सकता है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2026-02-16
Hacker News की राय

  • 2025 का CSS? यह तो मानो 2005 की तरह inline styles सीधे HTML में लिखने जैसा लगता है
    बात Tailwind की हो रही है, लेकिन आखिरकार यह format और presentation के separation को नज़रअंदाज़ करता है

    • वेब डेवलपमेंट का सबसे पुराना myth है ‘separation of concerns’ का विचार
    • HTML और CSS सिर्फ तकनीकों का separation हैं
      अगर HTML सच में सिर्फ content संभालता और CSS सिर्फ style, तो .container-wrapper .container .container-inner जैसी div soup बनाने की ज़रूरत ही नहीं पड़ती
      हर बार layout बदलने पर HTML भी बदलना पड़ता है, यही उसका सबूत है
    • कोड को obfuscate करने की ज़रूरत नहीं, बस Tailwind इस्तेमाल कर लो
    • मुझे तो उल्टा वही बेहतर लगता है
      component से जुड़ा code एक ही जगह इकट्ठा रहता है, इसलिए files के बीच बार-बार जाना नहीं पड़ता
    • मुझे यह अच्छा idea लगता है
      layout और style, UI का ऐसा हिस्सा हैं जिन्हें अलग नहीं किया जा सकता
      HTML content नहीं, layout है
      मान लो कि आप separation of concerns के पक्के मानने वाले हों, तब भी HTML और CSS एक ही presentation layer में आते हैं
      यह मानना कि इन्हें अलग किया जा सकता है, हक़ीक़त से आँख मूँदने जैसा है

  • मैंने हाल की CSS improvements की एक सूची बनाई

    1. nested selectors
    2. :has(...)
    3. :is(...) — पहले :not(:not(...)) जैसी तरकीबें लगानी पड़ती थीं
    4. :where(...) — :is(...) जैसा है, लेकिन selector specificity 0 होती है, इसलिए complex selectors में काम आता है
    • #1 से पूरी तरह सहमत हूँ
      ज़्यादातर LLM इस feature को नहीं जानते
      AGENTS.md में examples जोड़ने की सलाह दूँगा
      MDN Nesting Selector दस्तावेज़ देखना उपयोगी होगा
      & selector का इस्तेमाल करके readability और duplication हटाना दोनों साथ मिलते हैं
    • मेरा सबसे पसंदीदा text-box: trim है
      20 साल तक designers को यह समझाने के दिन ख़त्म हुए कि uppercase top alignment संभव नहीं है, अब सच में राहत मिलती है
    • मुझे व्यक्तिगत रूप से @layer feature सबसे अच्छा लगता है
    • 2~4 अच्छे हैं, लेकिन nested selectors पर grep नहीं चल सकता, इसलिए वे पसंद नहीं

  • कुछ examples में पुराना तरीका सभी browsers में काम करता है, लेकिन नया तरीका सिर्फ Chrome/Edge में
    ऐसे examples डालना Blink monopoly को और मज़बूत करता है, इसलिए यह गैर-जिम्मेदाराना लगता है

    • सहमत हूँ। अच्छा होगा अगर default filter “newly available” की जगह ऐसा हो जो तीनों बड़े browsers (Chrome/Edge, Safari, Firefox) को शामिल करे
    • इसमें site की गलती नहीं है
      बल्कि Mozilla के standards compliance की कमी की ओर इशारा करना चाहिए

  • elements को screen के किनारों पर fixed करना बंद करना चाहिए
    कुछ sites में आधी screen से ज़्यादा static elements घेरे रहते हैं
    content का scroll होना ही स्वाभाविक है

  • विडंबना यह है कि वह site dark mode पर fixed है, और prefers-color-scheme का इस्तेमाल नहीं करती

  • “वाह, creative CSS examples अच्छे हैं!” ऐसा सोचकर देखो, तो browser support 40~50% के आसपास निकलती है, इसलिए व्यावहारिक सीमाएँ हैं

    • पहले support की यह कमी बड़ी समस्या थी, लेकिन अब हालात काफ़ी बेहतर हैं
      Chromium के ज़रूरत से ज़्यादा influence की वजह से सही, फिर भी नतीजा सकारात्मक है
      Interop 2025 देखें
    • example filter को “widely available” पर बदल दें तो support rate काफ़ी बढ़ जाती है
    • बस समय लगता है
      browser vendors कभी-न-कभी wide support के लिए पहले से features जोड़ते रहते हैं

  • Firefox में जिन examples पर not supported दिखाया गया है, वे actual demo में सही चल रहे हैं, इसलिए उलझन होती है
    सोचता हूँ क्या वहाँ polyfill लगा है

    • यह “Limited availability” का संकेत है
      नीचे बाएँ दिखने वाला हरा percentage उस feature को support करने वाले browser users के अनुपात को दिखाता है
      कई बार यह आधे से भी कम होता है
      आख़िरकार यह “modern CSS” से ज़्यादा “latest Chrome CSS” के करीब है
    • feature support labeling पूरी तरह गड़बड़ है
      उदाहरण के लिए sibling-index() अभी Firefox में नहीं चलता, फिर भी उसे “widely available” दिखाया गया है

  • आजकल Tailwind, CSS-in-JS, Sass/SCSS, Vanilla CSS में से क्या इस्तेमाल करें, यही समझ नहीं आता

    • इसका कोई एक सही जवाब नहीं
      जो आपकी team को सूट करे, वही इस्तेमाल करें
      Tailwind सही लगे तो वही, personal project हो तो inline CSS, Sass में सहज हों तो वही जारी रखें,
      और अगर latest CSS पर all-in जाना चाहते हैं, तो वह भी बढ़िया choice है

  • वेब डेवलपमेंट करते-करते इतना समय हो गया कि जिन्हें “पुराना तरीका” कहा जा रहा है, उनमें भी कई features मैंने पहली बार देखे

  • color brightness adjust करने वाला feature पहली बार देखा
    पहले इसे Sass और Compass से implement करता था, लेकिन toolchain maintenance झंझट भरी थी
    अब CSS खुद यह support करता है, इसलिए बहुत ज़्यादा सुविधाजनक हो गया है