कम-से-कम CSS से एक अच्छा साइट बनाना (2023)

 (thecascade.dev)
6 पॉइंट द्वारा GN⁺ 2025-10-07 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • कई डेवलपर्स CSS डिज़ाइन की अति के कारण अनावश्यक समस्याओं का सामना करते हैं
  • सिर्फ़ न्यूनतम global styles से भी काफ़ी साफ़-सुथरे और responsive पेज बनाए जा सकते हैं
  • इमेज, SVG, वीडियो एलिमेंट्स पर size limit और block display लगाने भर से बेसिक layout समस्याएँ हल की जा सकती हैं
  • system-ui फ़ॉन्ट, उचित line-height, और पैराग्राफ की अधिकतम चौड़ाई सीमित करने से पठनीयता बेहतर की जा सकती है
  • OS की dark mode जैसी पसंदीदा सेटिंग्स को दर्शाने के लिए color-scheme प्रॉपर्टी लागू करना ज़रूरी है

कम-से-कम CSS से एक अच्छा साइट बनाना

CSS की अति की समस्या और अपनाने का तरीका

  • बहुत से लोग वेबसाइट बनाते समय CSS डिज़ाइन को ज़रूरत से ज़्यादा जटिल बना देते हैं
  • सिर्फ़ न्यूनतम CSS से भी काफ़ी परिष्कृत और मूलभूत बातों पर टिके responsive पेज बनाए जा सकते हैं

बुनियादी HTML और इमेज हैंडलिंग

  • केवल बेसिक HTML लिखने पर भी साइट मूलभूत responsive व्यवहार देती है

  • इमेज की वजह से layout में overflow समस्या आ सकती है, इसलिए नीचे दिया गया CSS लागू किया जाता है

    img {
  max-width: 100%;
  display: block;
}

  • SVG, video एलिमेंट्स में भी ऐसी ही समस्या होने पर, इसे नीचे की तरह बढ़ाया जा सकता है

    img,
svg,
video {
  max-width: 100%;
  display: block;
}

टाइपोग्राफी में सुधार

  • ब्राउज़र का डिफ़ॉल्ट फ़ॉन्ट डिज़ाइन के लिहाज़ से फीका लग सकता है

  • फ़ॉन्ट फ़ैमिली के रूप में system-ui इस्तेमाल करने से हर प्लेटफ़ॉर्म के अनुरूप डिफ़ॉल्ट टाइपफ़ेस लागू किया जा सकता है

  • डिफ़ॉल्ट फ़ॉन्ट साइज़ और line-height थोड़ा छोटा होने की प्रवृत्ति रखते हैं, इसलिए नीचे जैसी सेटिंग सुझाई जाती है

    body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}

  • सिर्फ़ इस सेटिंग से भी ब्राउज़र डिफ़ॉल्ट की तुलना में बड़ा सुधार देखा जा सकता है

dark mode सपोर्ट

  • बहुत से यूज़र dark mode पसंद करते हैं, इसलिए OS सेटिंग का पालन करने वाली color-scheme प्रॉपर्टी उपयोगी है

    html {
  color-scheme: light dark;
}

  • यह प्रॉपर्टी user agent styles को सिस्टम की पसंदीदा थीम अपने-आप दर्शाने के लिए सेट करती है

  • इसे HTML टैग attribute के रूप में भी दिया जा सकता है

    <html lang="en" color-scheme="light dark"></html>

  • सिर्फ़ सिस्टम preference ही नहीं, बल्कि यूज़र को सीधे color scheme चुनने का विकल्प देना भी एक अच्छा best practice है

कंटेंट चौड़ाई सीमित करना

  • कंटेंट पैराग्राफ की लंबाई पठनीयता पर बड़ा असर डालने वाला महत्वपूर्ण तत्व है

  • आम तौर पर मुख्य टेक्स्ट एक लाइन में 45~90 अक्षरों की सीमा में दिखना आदर्श माना जाता है

  • नीचे की तरह main एलिमेंट की अधिकतम चौड़ाई सीमित करके पैराग्राफ की पठनीयता बेहतर की जा सकती है

    main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}

  • min() फ़ंक्शन 70ch और 100% - 4rem में से छोटा मान चुनता है

  • margin-inline: auto से क्षैतिज केंद्र-संरेखण हो जाता है

  • ज़रूरत के अनुसार main की जगह .container या .wrapper क्लास का इस्तेमाल भी किया जा सकता है

अंतिम न्यूनतम CSS उदाहरण

  • ऊपर की बातों को मिलाकर, नीचे दिए गए न्यूनतम CSS सेट से एक स्थिर साइट बनाई जा सकती है

    html {
  color-scheme: light dark;
}

body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}

समापन और विस्तारशीलता

  • ऊपर का उदाहरण हल्के शुरुआती बिंदु या छोटे पेज के लिए तुरंत उपयोग किया जा सकता है
  • अधिकतर मामलों में, इस आधार पर अतिरिक्त styles जोड़कर आगे विस्तार करना बेहतर होता है

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

1 टिप्पणियां

 
GN⁺ 2025-10-07
Hacker News राय
  • यह पुराना लेख है, लेकिन कुछ क्षेत्रों में system ui font family की सिफारिश न करने की वजहें अब भी मान्य हैं।
    https://infinnie.github.io/blog/2017/systemui.html
    • लेख दिलचस्प था, लेकिन font की st ligature इतनी खराब लगती है कि उस वेबसाइट से font सलाह नहीं लेना चाहूँगा
  • सच कहूँ तो मुझे यह अच्छी तरह समझ नहीं आता। पढ़ने में आसान minimal webpage बनाना है, यह समझ में आता है। लेकिन उसके लिए ज़रूरी तरीके तो पहले से काफी जाने-पहचाने नहीं हैं क्या? ऐसे में किस target user को इससे जूझना पड़ता है, यह जानने की जिज्ञासा है। और यह HN पर इतना लोकप्रिय क्यों है, इस पर भी सवाल है
    • मैं। मैं मुख्य रूप से backend developer हूँ, और side project में कभी-कभी frontend भी बनाता हूँ, लेकिन CSS लगभग नहीं जानता। मेरे लिए ये तरीके 'well-known' नहीं हैं। CSS न जानने की वजह से हर बार मुश्किल होती है
    • जो लोग सिर्फ max-width जैसी एक चीज़ से भी जूझते हैं? personal homepage बनाने वाले सभी लोग ही target हैं
font-family: System UI;

यह गलत है। सही syntax है

font-family: system-ui;

लेखक ने कुछ उदाहरणों में सही लिखा है, लेकिन पहले उदाहरण में गलत लिखा, जिससे भ्रम हो सकता है

  • सोच रहा हूँ कि अगर font name दो शब्दों का हो तो क्या उसे double quotes में रखना चाहिए। उदाहरण के लिए
font-family: Times New Roman;

इस तरह। 'times' और 'Times New Roman' दोनों बिना quotes के ठीक चलते दिखते हैं, तो समझ नहीं आता कि यह पुराने font होने की वजह से exception है, या CSS नाम मिलान में काफी उदार है

  • https://meyerweb.com/eric/tools/css/reset/
    इसे तो मैं बस cash money कहना चाहूँगा
    • Eric Meyer CSS दुनिया के legend हैं। 2002 में जब box model समझ नहीं आता था, तब उनकी व्याख्या से समझ पाया था
      https://meyerweb.com/eric/books/
    • इसे मैंने अक्सर देखा है, लेकिन किसी वजह से मेरी नज़र में यह थोड़ा अजीब लगता है। न यह काफी simple है, न modern/minimal। text भी ठीक से पढ़ा नहीं जाता सा लगता है। शायद यह सिर्फ मेरी पसंद हो
    • CSS reset stylesheet style pollution की शुरुआत है। Kevin Powell वाला approach, यानी browser के default styles का सम्मान करना, ज़्यादा बेहतर है। cross-browser testing की ज़रूरत रहती है, लेकिन लगभग 20 साल से CSS reset को default की तरह साथ घसीटा जा रहा है, और उसके ऊपर framework चढ़ाकर complexity ही बढ़ाई गई है। अब modern CSS Grid, variables वगैरह के साथ पुराने तरीकों से निकलकर बहुत अधिक creative तरीके अपनाए जा सकते हैं। पहले तरह-तरह के hacks से घिरकर CSS से चिढ़ थी, लेकिन अब यह ठीक-ठीक फिट होने वाले Lego जोड़ने जैसा लगता है। CSS reset अब कोई अनिवार्य चीज़ नहीं, बल्कि डर छोड़ने में मदद करने वाला सहायक tool है। CSS pre-processor की भी अब ज़्यादा ज़रूरत नहीं लगती
  • यह simple academic minimal website के लिए SSG(static site generator) recommendation माँगने वाला सवाल है। Astro और Hugo options हैं, लेकिन Astro बहुत complex लगा, और खुद html/css लिखने पर layout और customization में असुविधा होती है। Astro themes में personal blog के लिए भी ज़्यादा विकल्प नहीं हैं, ज़्यादातर corporate या flashy हैं। यह सब सोचते हुए फिर से हैरानी होती है कि website design इतना मुश्किल क्यों हो गया है। framework, component, और ढेरों dependency के बीच web developers इस प्रवाह के साथ कैसे चलते रहते हैं, यह जानना चाहता हूँ
    • Eleventy(https://11ty.dev/) या Zola(https://getzola.org/) की सिफारिश करता हूँ। दोनों अपेक्षाकृत नए tools हैं, और इनके कुशल users भी काफ़ी हैं
    • यह web system की स्वाभाविक complexity है। simplicity टिक नहीं सकती। फिर भी license के बिना इस्तेमाल हो सकने वाले open standards और frameworks के लिए आभारी हूँ। options इतने ज़्यादा हैं कि choice paralysis हो जाती है
    • ऐसी चर्चाएँ खुद modern web की शर्मनाक स्थिति पर पर्दा डालती हैं। Facebook जैसे बड़े web services के अलावा शायद ही कुछ मूल्यवान बचा है, और यह शर्म की बात है
    • हो सकता है और विकल्पों की ज़रूरत न हो, लेकिन franklin.jl math, inline code handling और सादगी के लिहाज़ से बिल्कुल उपयुक्त लगा
  • यह वेबसाइट खुद लेख में सुझाई गई CSS से कहीं ज़्यादा CSS इस्तेमाल कर रही है। लगभग 300 से अधिक lines हैं। फिर भी baseline सेट करने के लिए ठीक है
    • mobile पर यह बात चेक करके बताने के लिए धन्यवाद। इस तथ्य से उस माध्यम की विश्वसनीयता कुछ घटती है। बाद में खुद जाँच करूँगा। फिर भी उम्मीद है कि बताई गई techniques अच्छी तरह लागू की गई होंगी
  • "पठनीयता के लिए content width सीमित करें" इस सुझाव को देखकर लगा कि काश यह न किया जाए। usability research कुछ भी कहे, मुझे चौड़ाई ज़्यादा पसंद है। browser size बदलकर भी content width नियंत्रित की जा सकती है
    • browser size बदलने से पूरी window ही छोटी हो जाती है, इसलिए असुविधा और बढ़ती है। उदाहरण के लिए, बाएँ किनारे से चिपके 80-column text को बीच में लाने के लिए browser का आकार बार-बार बदलना पड़ता है, जो बेहद झंझट है। कभी-कभी इतनी असुविधा होती है कि मैं साइट की stylesheet खुद override कर देता हूँ। कई बार तो plain text देखना ही बेहतर लगता है। या फिर reader mode में बदलकर पढ़ता हूँ
    • मेरे लगभग सभी परिचित, चाहे tech में हों या नहीं, हमेशा बहुत सारे tabs खोलकर रखते हैं। उन सब tabs में हर एक सिर्फ एक line text से बना हो, इसकी संभावना 0% है। हर बार window size बदलने से तो dot matrix printer पर निकालकर पढ़ना शायद बेहतर लगे। थोड़ा बढ़ा-चढ़ाकर कह रहा हूँ
    • गद्य-आधारित content के लिए सीमित चौड़ाई ही ज़्यादा पसंद की जाती है। चौड़ी screen पर लाइन के आख़िर तक आँख घुमाकर पढ़ना मुश्किल होता है
    • यह कि इस comment को सबसे ज़्यादा upvote मिला, यह भी दिखाता है कि HN की सलाह को बहुत गंभीरता से लेने की ज़रूरत नहीं
    • content width सीमित करना अपने आप में ठीक है। लेकिन content-width, बड़े fonts और line-height का overuse परेशान करता है। आजकल बहुत सी sites बहुत बड़े fonts और बहुत चौड़ी line spacing इस्तेमाल करती हैं, जिससे scroll बहुत ज़्यादा करना पड़ता है। browser का default font size सिस्टम के हिसाब से ठीक बैठता है, इसलिए font size को वैसे ही रहने देना और zoom पर छोड़ देना बेहतर है
  • लेख पढ़े बिना भी जवाब साफ है। सही उत्तर है '0'
    • default styles खासकर images के मामले में mobile पर बहुत असुविधाजनक हैं। जैसा लेख कहता है, अगर 'काफ़ी अच्छा दिखने वाला' कुछ चाहिए तो defaults से यह उतना आसान नहीं लगता
    • browser का default serif होता है
  • CSS reset के साथ अब भी कुछ हद तक baseline alignment की ज़रूरत रहती है। अगर target सिर्फ पिछले 5 साल के भीतर के browsers हैं, तो संक्षिप्त और परिष्कृत लोकप्रिय reset इस्तेमाल करना काफ़ी है
    • असली बात style consistency नहीं, बल्कि पढ़ने में आसान baseline है। अलग-अलग platform/browser में अलग दिखे तब भी अगर पढ़ना आसान है तो ठीक है। aesthetic perfection से ज़्यादा basic usability पर ध्यान देना व्यावहारिक है
    • reset को ज़रूरत से ज़्यादा महत्व दिया जा रहा है। personal blog जैसे minimal मामलों में platform के हिसाब से style थोड़ा अलग हो तो भी बड़ी समस्या नहीं। यह designer instinct से पैदा हुई वह मानसिकता है जो हर चीज़ को बाध्य होकर एक जैसा करना चाहती है

img { max-width: 100%; }
इस setting को हमेशा height: auto के साथ इस्तेमाल करना चाहिए। नहीं तो image का aspect ratio बिगड़ जाएगा
img, svg, video { max-width: 100%; }
Chrome 141 में nested SVG elements की width/height समस्या के कारण auto calculation गलत हो जाती है। अस्थायी रूप से
svg:where(:not(svg svg)) से संभालना चाहिए
system-ui font सिर्फ साधारण sans-serif replacement नहीं है। content body में system UI font इस्तेमाल करने पर कुछ OS/भाषा संयोजनों में पढ़ना लगभग असंभव जितना असुविधाजनक हो सकता है। अगर sans-serif चाहिए, तो sans-serif ही इस्तेमाल करना सही है
default font size थोड़ा छोटा है, इसलिए 18~20px(1.25rem) के आसपास ठीक रहता है। लेकिन छोटी screens पर 1rem से ऊपर न जाना बेहतर है
default line-height के लिए 1.5~1.7 की सिफारिश होती है, लेकिन छोटी screens पर 1.7 बहुत ज़्यादा लगता है। 1.4~1.5 उचित है, और screen size के अनुसार 1.4~1.6 तक समायोजित किया जा सकता है
font-family: System UI;
यह स्पष्ट syntax error है। stylesheet की जाँच करें तो तुरंत पता चल जाएगा
dark/light system theme और web theme को अलग रखना अच्छा विचार है। Firefox में default रूप से content system theme का पालन करता है, और इसे अलग से समायोजित भी किया जा सकता है
main { max-width: min(70ch, 100% - 4rem); margin-inline: auto; }
इसका मतलब न्यूनतम लगभग 2rem margin है (body के default margin को जोड़ें तो 2rem + 8px)। margin बहुत ज़्यादा है, और इसे लगाने की जगह भी थोड़ी अजीब है। अगर main पर लागू करना हो तो

main {
  max-width: 70ch;
  padding-inline: 2rem;
  margin-inline: auto;
}

जैसे padding का इस्तेमाल करना अधिक तर्कसंगत है। लेकिन वास्तव में header या footer में भी वही side spacing चाहिए, इसलिए body margin को समायोजित करना बेहतर है

body {
  margin: 1rem;
}

main {
  max-width: 70ch;
  margin-inline: auto;
}

इससे spacing को लगभग 40px से घटाकर 16px स्तर तक लाया जा सकता है

  • व्यावहारिक रूप से layout adjustment और सूक्ष्म tuning का अधिकांश काम media queries से हल किया जा सकता है। इस मामले में, अंततः साधारण लेकिन अच्छी तरह लिखी गई CSS की तुलना में code बहुत अधिक नहीं बढ़ता