टेलविंड से दूर जा रहा हूं, और अपने सीएसएस की संरचना करना सीख रहा हूं

नमस्ते! 8 साल पहले, मैंने टेलविंड की खोज के बारे में उत्साहपूर्वक लिखा था।

उस समय मुझे वास्तव में पता नहीं था कि अपने सीएसएस कोड को कैसे संरचित किया जाए और पूर्ण अराजकता और टेलविंड के ढेर के बीच विकल्प को देखते हुए, मैं टेलविंड को चुनने में वास्तव में खुश था। इससे मुझे बहुत सी छोटी-छोटी साइटें बनाने में मदद मिली!

मैंने पिछला सप्ताह लगभग कुछ साइटों को टेलविंड से दूर और अधिक अर्थपूर्ण HTML + वेनिला सीएसएस की ओर स्थानांतरित करने में बिताया, और यह बहुत मजेदार और बहुत दिलचस्प था, इसलिए यहां कुछ चीजें हैं जो मैंने सीखीं!

हमेशा की तरह मैं एक पूर्णकालिक फ्रंटएंड डेवलपर नहीं हूं और इसलिए मेरी सभी सीएसएस सीख कई वर्षों में फिट और स्टार्ट में हुई है।

यह पता चला कि टेलविंड ने मुझे बहुत कुछ सिखाया

जब मैंने सीएसएस की संरचना के बारे में सोचना शुरू किया, तो पहले तो मैं डर गया: मैं अपनी सीएसएस की संरचना करने में बहुत अच्छा नहीं हूँ! लेकिन फिर मैंने सीएसएस की संरचना कैसे करें (जैसे परतों का एक पूरा झरना या 2024 में मैं सीएसएस कैसे लिखता हूं) के बारे में बात करते हुए ब्लॉग पोस्ट पढ़ना शुरू किया और मुझे कुछ चीजों का एहसास हुआ:

1. प्रत्येक सीएसएस कोड बेस में विभिन्न चीजों का एक समूह होता है (लेआउट! फ़ॉन्ट! रंग! सामान्य घटक!)
2. इनमें से प्रत्येक चीज़ को प्रबंधित करने के लिए सिस्टम या दिशानिर्देशों का होना बेहद उपयोगी है, अन्यथा चीज़ें अराजकता में बदल जाती हैं
3. टेलविंड के पास इनमें से कुछ के लिए सिस्टम हैं, और मैं उन सिस्टमों को पहले से ही जानता हूँ! शायद मैं उन प्रणालियों की नकल कर सकता हूँ जो मुझे पसंद हैं!

उदाहरण के लिए, टेलविंड में:

जिन प्रणालियों के बारे में मैं बात करने जा रहा हूँ

मैं अपने सीएसएस कोडबेस के कुछ पहलुओं और अपने अब तक के विचारों के बारे में बात करने जा रहा हूं कि मैं प्रत्येक के लिए कोडबेस पर किस तरह के नियम लागू करना चाहता हूं। उनमें से कुछ को टेलविंड से कॉपी किया गया है और कुछ को नहीं।

1. रीसेट करें
2. अवयव
3. रंग
4. फ़ॉन्ट आकार
5. उपयोगिता वर्ग
6. आधार
7. अंतर
8. उत्तरदायी आकार
9. निर्माण प्रणाली

1. रीसेट करें

मैंने अभी-अभी टेलविंड की “प्रीफ्लाइट शैलियों” की नकल की है tailwind.css और पहली 200 पंक्तियों की नकल करना।

मैंने देखा कि समय के साथ मैंने टेलविंड के सीएसएस रीसेट के साथ एक रिश्ता विकसित किया है, उदाहरण के लिए टेलविंड सेट box-sizing: border-box प्रत्येक तत्व पर (जिसका अर्थ है कि किसी तत्व की चौड़ाई में उसकी पैडिंग शामिल है):

* { box-sizing: border-box; }

मुझे लगता है कि इनके बिना सीएसएस लिखने पर स्विच करना मेरे लिए एक वास्तविक समायोजन होगा, और मुझे यकीन है कि टेलविंड रीसेट में कई अन्य चीजें हैं (जैसे)
html {line-height: 1.5;}) मैं अवचेतन रूप से इसका आदी हो गया हूं और मुझे इसका एहसास भी नहीं है।

2. घटक

यह अगला भाग सीएसएस का बड़ा हिस्सा है!

यहां विचार सीएसएस को “घटकों” द्वारा व्यवस्थित करने का है, इस तरह से जो आध्यात्मिक रूप से Vue या React घटकों से संबंधित हो। (हालाँकि साइट पर वास्तव में कोई जावास्क्रिप्ट नहीं हो सकती है)

मूलतः विचार यह है कि:

1. प्रत्येक “घटक” का एक अद्वितीय वर्ग होता है
2. एक घटक के लिए सीएसएस कभी भी किसी अन्य घटक के लिए सीएसएस को ओवरराइड नहीं करता है
3. प्रत्येक घटक की अपनी सीएसएस फ़ाइल होती है

इसलिए एक घटक के लिए सीएसएस को संपादित करने से दूसरे घटक में रहस्यमय तरीके से कुछ नहीं टूटेगा। और संभवतः 80% सीएसएस जिसे मैं वास्तव में बदलना चाहता हूं वह विभिन्न घटक फ़ाइलों में है, इसलिए यदि मैं 100-पंक्ति घटक को संपादित कर रहा हूं, तो मुझे बस उन 100 पंक्तियों के बारे में सोचना होगा। मेरे लिए इसके बारे में सोचना बहुत आसान है।

उदाहरण के लिए, यह HTML हो सकता है .zine “अवयव”।

और नेस्टेड चयनकर्ताओं का उपयोग करते हुए सीएसएस कुछ इस तरह दिखता है:

.zine {
  ...
  &.horizontal {
    ...
  }
  &.vertical {
    ...
  }
  &:hover {
    ...
  }
}

मैंने कुछ भी प्रोग्रामेटिक (जैसे वेब घटक या @स्कोप) नहीं किया है जो यह सुनिश्चित करता है कि घटक एक-दूसरे के साथ हस्तक्षेप नहीं करेंगे, लेकिन सिर्फ एक सम्मेलन करना और अपना सर्वश्रेष्ठ प्रयास करना पहले से ही एक बड़े सुधार की तरह लगता है।

अगला: साइट पर कुछ स्थिरता बनाए रखने और इन घटकों को एक-दूसरे के अनुरूप रखने के लिए परंपराएँ!

3. रंग

colours.css इसमें इस तरह के बहुत सारे वेरिएबल हैं जिनका मैं आवश्यकतानुसार उपयोग कर सकता हूं। रंग वास्तव में कठिन है और मैं इस रिफैक्टर में रंग के उपयोग पर दोबारा गौर नहीं करना चाहता था, इसलिए मैंने इसे अकेला छोड़ दिया।

एकमात्र दिशानिर्देश जिसे मैं यहां लागू करने का प्रयास कर रहा हूं वह यह है कि साइट में उपयोग किए गए सभी रंग इस फ़ाइल में सूचीबद्ध हैं।

:root {
  --pink: #fea0c2;
  --pink-light: #F9B9B9;
  --red: #f91a55;
  --orange: rgb(222, 117, 31);
  ...
}

4. फ़ॉन्ट आकार

टेलविंड के बारे में एक बात जिसकी मैंने सराहना की, वह यह थी कि यदि मैं एक फ़ॉन्ट आकार सेट करना चाहता था, तो मैं सिर्फ यह सोच सकता था कि “हम्म, मैं चाहता हूं कि टेक्स्ट बड़ा हो”, लिखें text-lgऔर इसके साथ काम पूरा करें! और शायद अगर यह पर्याप्त बड़ा नहीं है तो मैं इसका उपयोग करूंगा xl या 2xl बजाय। यह याद रखने की कोई कोशिश नहीं है कि मैं उपयोग कर रहा हूं या नहीं em या px या rem.

इसलिए मैंने टेलविंड से लिए गए वेरिएबल्स के एक समूह को इस तरह परिभाषित किया:

  --size-xs: 0.75rem;
  --line-height-xs: 1rem;

  --size-sm: 0.875rem;
  --line-height-sm: 1.25rem;

फिर अगर मैं फ़ॉन्ट आकार सेट करना चाहता हूं, तो मैं इसे इस तरह कर सकता हूं। यह टेलविंड की तुलना में थोड़ा अधिक क्रियात्मक है लेकिन मैं अभी इससे खुश हूं।

h3 {
  font-size: var(--size-lg);
  line-height: var(--line-height-lg);
}

5. उपयोगिताएँ

बटन जैसी कुछ चीजें हैं जो कई अलग-अलग घटकों में दिखाई देती हैं। मैं इन्हें “उपयोगिताएँ” कह रहा हूँ।

मैंने टेलविंड से कुछ उपयोगिता कक्षाएं कॉपी कीं (जैसे .sr-only उन चीज़ों के लिए जो केवल स्क्रीनरीडर उपयोगकर्ताओं के लिए दिखाई देनी चाहिए)।

यह अनुभाग काफी छोटा है और मैं यहां परिवर्तन करने में सावधानी बरतने का प्रयास करता हूं।

6. आधार

“आधार” शैलियाँ वे शैलियाँ हैं जो पूरी साइट पर लागू होती हैं जिन्हें मैंने स्वयं चुना है। मुझे इस अनुभाग को वास्तव में छोटा रखना होगा क्योंकि मैं पूरी साइट पर बहुत सारी शैलियों को लागू करने के लिए पर्याप्त आश्वस्त नहीं हूं। ये केवल दो ही हैं जिनके बारे में मुझे अभी ठीक लगता है, और मैं इन्हें बदल सकता हूँ

/* put a 950px column in the middle of each 
 */
section {
  --inner-width: 950px;
  padding: 3rem max(1rem, (100% - var(--inner-width))/2);
}

a {
  color: var(--orange);
}

section > *+* {
  margin-top: 1rem;
}

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), max-content));
  justify-content: center;

@import "reset.css";
@import "typography.css";
@import "colors.css";

.page {
  h2 { ...}
}

esbuild style.css --bundle --loader:.svg=dataurl  --loader:.woff2=file --outfile=/tmp/out.css