हम बेहतर और सुंदर सीएसएस लिखते हैं

ईमानदार होना: अच्छा CSS लिखना मुश्किल है।
कई डेवलपर्स CSS लिखना पसंद नहीं करते हैं। कुछ भी, लेकिन ऐसा नहीं है! सीएसएस नहीं।

जब आपको अनुप्रयोगों को विकसित करते समय सीएसएस से निपटना पड़ता था, तो यह नौकरी का सबसे खुशी का हिस्सा नहीं था। लेकिन इसे टाला नहीं जा सकता, है ना? आज यह एप्लिकेशन के डिजाइन के साथ उपयोगकर्ता को खुश करने के लिए इतना महत्वपूर्ण है कि सीएसएस के बिना - कुछ भी नहीं।

जब परियोजना अभी शुरू हो रही है, तो सब कुछ ठीक हो जाता है। आपके पास केवल कुछ चयनकर्ता हैं: .title , input , #app - #app जितना आसान।

लेकिन धीरे-धीरे आवेदन बढ़ता है, और यह सीएसएस में देखने के लिए डरावना है: इन सभी चयनकर्ताओं का पता लगाना इतना आसान नहीं है। आप div#app .list li.item a जैसे कुछ लिखना शुरू करते हैं। div#app .list li.item a , कोड के कुछ टुकड़े बार-बार दोहराए जाते हैं, और फ़ाइल के अंत में अपने सभी लेखन को डंप करते हैं: आप परवाह नहीं करते हैं, क्योंकि CSS बेकार है। परिणाम सीएसएस कोड की 500 लाइनें हैं जो समर्थित नहीं हो सकती हैं।


सीएसएस से लड़ने पर यह मुझे है

Alconost में अनुवादित

मेरी चुनौती आज आपको सीएसएस को बेहतर तरीके से लिखना सिखाने की है। मैं चाहता हूं कि आप पुरानी परियोजनाओं को देखें और सोचें: “हे देवताओं! आप यह कैसे लिख सकते हैं?

लेकिन सीएसएस फ्रेमवर्क के बारे में क्या? - आप पूछें। आखिरकार, उन्हें इसके लिए आविष्कार किया गया - अच्छा सीएसएस कोड लिखने के लिए।

यह सही है। लेकिन उनके नुकसान हैं:

• आउटपुट डिज़ाइन अक्सर उबाऊ होता है।
  
• आवश्यक सेटिंग्स करना या फ्रेमवर्क की क्षमताओं से परे जाना मुश्किल हो सकता है।
  
• चौखटे का उपयोग करने के लिए, आपको पहले उनका अध्ययन करने की आवश्यकता है।
  

ठीक है, आप इस लेख को पढ़ रहे हैं - इसका मतलब है कि एक कारण है, है ना? इसलिए, आगे की हलचल के बिना, सीएसएस को बेहतर लिखना सीखें।

नोट। यह आलेख सुंदर अनुप्रयोगों को बनाने के तरीके के बारे में नहीं है, लेकिन समर्थित सीएसएस कोड लिखने और इसे व्यवस्थित करने के तरीके के बारे में है।

एससीएसएस

उदाहरणों में, मैं SCSS का उपयोग करूंगा।

एससीएसएस एक सीएसएस प्रीप्रोसेसर है, अनिवार्य रूप से सीएसएस का एक सुपरसेट जो कुछ शांत विशेषताओं को जोड़ता है, जैसे चर, घोंसले के शिकार, आयात और अशुद्धियां ("मिक्सिन्स")।

आगे मैं आपको बताऊंगा कि हम यहां किन अवसरों का उपयोग करेंगे।

चर

SCSS के चर हैं, और उनका मुख्य लाभ पुन: उपयोग है। मान लीजिए कि आपके पास एक आवेदन के लिए एक रंग पैलेट है, और प्राथमिक रंग नीला है।

इसलिए, आपके पास हर जगह नीला है: background-color बटन की background-color , हेडर के color , लिंक। नीला - हर कोई।

और अचानक नीला आपको पसंद नहीं आया। नया पसंदीदा हरा है।

• यदि आपने चर का उपयोग नहीं किया है, तो आपको उन सभी लाइनों को बदलना होगा जिसमें नीला है।
  
• और चर के साथ, उनमें से एक के मूल्य को बदल दें।
  

 //   $primary-color: #0099ff; //    h1 { color: $primary-color: } 

घोंसला करने की क्रिया

SCSS में, आप नेस्टिंग का उपयोग कर सकते हैं। इसलिए टुकड़े से

 h1 { font-size: 5rem; color: blue; } h1 span { color: green; } 

आप इस तरह से एक कोड बना सकते हैं:

 h1 { font-size: 5rem; color: blue; span {  color: green; } } 

उत्तरार्द्ध बेहतर पढ़ता है, है ना? नेस्टिंग आपको कम समय में जटिल चयनकर्ताओं को लिखने की अनुमति देता है।

आयात और आंशिक फ़ाइलें

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

हम "आंशिक फ़ाइलें" बना सकते हैं - जिसके लिए नाम एक अंडरस्कोर के साथ शुरू होता है: _animations.scss, _base.scss, _variables.scss और इसी तरह।

उन्हें आयात करने के लिए, संबंधित निर्देश का उपयोग किया जाता है: @import । उदाहरण के लिए, आप यह कर सकते हैं:

 // _animations.scss @keyframes</i> appear { 0% {  opacity: 0; } 100% {  opacity: 1; } } <i>// header.scss</i> <b>@import "animations";</b> h1 { animation: appear 0.5s ease-out; } 

आपने सोचा होगा: “अहा! उसकी यहाँ गलती है! हमें _animations.scss लिखना है, animations नहीं। "

नहीं। SCSS यह महसूस करने के लिए पर्याप्त स्मार्ट है कि यह एक आंशिक फ़ाइल है।

बस हमें चर, घोंसले के शिकार, आंशिक फ़ाइलों और आयात के बारे में जानना होगा । एससीएसएस में अन्य संभावनाएं हैं - अशुद्धियां, विरासत और विभिन्न निर्देश ( @for , @if , ...), लेकिन मैं यहां उन पर स्पर्श नहीं करूंगा।

यदि आप रुचि रखते हैं, तो दस्तावेज़ीकरण पढ़ें: यह पर्याप्त और अच्छी तरह से लिखा गया है।

CSS ऑर्डरिंग: BEM कार्यप्रणाली

मैंने अनगिनत बार CSS कक्षाओं के लिए सामान्य नामों का उपयोग किया है। ठीक है, आप जानते हैं: .button .page-1 .page-2 .custom-input

अक्सर हमारे पास कोई विचार नहीं होता है कि कौन सा नाम चुनना है - हालांकि नामकरण एक महत्वपूर्ण कार्य है। कल्पना कीजिए कि आपने एक आवेदन लिखना शुरू कर दिया है, और फिर कई महीनों के लिए इस व्यवसाय को स्थगित करने का फैसला किया है - या इससे भी बदतर, किसी ने आपकी परियोजना पर कब्जा कर लिया है। यदि आप सीएसएस कोड में नामकरण के बारे में नहीं सोचते हैं, तो यह समझना मुश्किल होगा कि किसी विशेष पंक्ति में क्या मतलब है।

बीईएम इस समस्या को हल करने में मदद करता है। बीईएम एक नामकरण सम्मेलन है; ब्लॉक, तत्व, संशोधक के लिए खड़ा है ।

यह कार्यप्रणाली आपको अपने कोड को बनाने में मदद करेगी, इसे और अधिक मॉड्यूलर बनाएगी और पुन: उपयोग को सरल बनाएगी। आइए देखें कि "ब्लॉक", "तत्व" और "संशोधक" का क्या मतलब है।

ब्लॉक

एक ब्लॉक को एक घटक के रूप में कल्पना की जा सकती है। उदाहरण के लिए, लेगो कंस्ट्रक्टर को ही लें।

कैसे एक डिजाइनर से एक साधारण घर बनाने के लिए? यह एक खिड़की, एक छत, एक दरवाजा, दीवारों के एक जोड़े - और यह ले जाएगा। यह ठीक हमारे ब्लॉक है - वे अपने दम पर अर्थ ले जाते हैं।

नामकरण: ब्लॉक का नाम: .block
उदाहरण: .card, .form, .post, .user-navigation

तत्वों

और डिजाइनर क्यूब्स से एक खिड़की कैसे बनाएं? आप क्यूब्स को ढूंढ सकते हैं जो फ्रेम के कुछ हिस्सों की तरह दिखते हैं और उनमें से एक सुंदर खिड़की को इकट्ठा करते हैं। ये हमारे तत्व होंगे । वे ब्लॉक के आवश्यक हिस्सों का प्रतिनिधित्व करते हैं, लेकिन ब्लॉक के बाहर खुद बेकार हैं।

नामकरण: ब्लॉक नाम + __ + तत्व नाम: .block__element
उदाहरण: .post__author, .post__date, .post__text

संशोधक

तो, हमने किसी तरह की खिड़की बनाई। अब हमें एक हरे रंग की आवश्यकता थी या, उदाहरण के लिए, एक छोटी खिड़की। ये हमारे संशोधक होंगे। वे ब्लॉक और तत्वों पर झंडे हैं जिनका उपयोग व्यवहार, उपस्थिति आदि को बदलने के लिए किया जाता है।

नामकरण: ब्लॉक नाम या तत्व + -- + संशोधक का नाम: .block__element--modifier, .block--modifier
उदाहरण: .post--important, .post__btn--disabled

नोट

• बीईएम का अर्थ है कक्षाओं का नामकरण और केवल कक्षाएं । पहचानकर्ता नहीं और टैग नहीं - सिर्फ कक्षाएं ।
  
• ब्लॉक और तत्वों को अन्य ब्लॉकों और तत्वों में नेस्ट किया जा सकता है, लेकिन उन्हें पूरी तरह से स्वतंत्र होना चाहिए। आवश्यक रूप से स्वतंत्र । इसलिए, बटन के लिए एक फ़ील्ड जोड़ना आवश्यक नहीं है, ताकि यह शीर्ष के नीचे हो, अन्यथा यह शीर्ष पर संलग्न हो जाएगा। हेल्पर वर्गों का उपयोग करने के लिए बेहतर है।
  
• हां, HTML फ़ाइल अतिभारित होगी, लेकिन यह डरावना नहीं है: BEM के फायदे इस नुकसान को पछाड़ते हैं।
  

उदाहरण

पाठकों के लिए थोड़ा व्यायाम। उन साइटों पर जाएं, जहां आप अक्सर जाते हैं और सोचते हैं कि ब्लॉक, तत्व और संशोधक क्या हो सकते हैं।

उदाहरण के लिए, मैं Google स्टोर में ऐसी तस्वीर की कल्पना कर सकता हूं:



अब आपकी बारी है। उत्सुक रहें और सोचें कि क्या बेहतर किया जा सकता है। और हां, अपने स्वयं के कौशल को सुधारने के लिए, आपको स्वतंत्र रूप से खोज, प्रयोग और कोड लिखना होगा।

सीएसएस फाइलों का आयोजन: 7-1 सिद्धांत

मैंने तुम्हें अभी तक नहीं थकाया? बहुत बढ़िया! आइए जानें कि सीएसएस फाइलों को कैसे व्यवस्थित किया जाए। यह काम की दक्षता में बहुत सुधार करेगा और आपको सीएसएस कोड को तुरंत खोजने में मदद करेगा जिसे ठीक करने की आवश्यकता है।

यह "7-1" के सिद्धांत से परिचित होने का समय है।
ये नंबर आपको कुछ नहीं बताते हैं, है ना?

लेकिन सब कुछ काफी सरल है। पालन ​​करने के लिए दो नियम हैं:

1. आंशिक फ़ाइलों को 7 फ़ोल्डरों में रखें।
   
2. उन सभी को रूट में स्थित एक main.scss फ़ाइल में आयात करें। वह सब है।
   

सात फ़ोल्डर:

• base फ़ोल्डर टेम्पलेट सीएसएस कोड है जिसे आप जब भी कोई नया प्रोजेक्ट शुरू करते हैं तो लिखते हैं। ये लेआउट नियम, एनिमेशन, सहायक कक्षाएं (उदाहरण के लिए, margin-right-large , text-center , ...) और इतने पर हो सकते हैं।
  
• components फ़ोल्डर - पेज बनाने के लिए उपयोग किए जाने वाले सभी घटक: बटन, फॉर्म, पेजिंग मॉड्यूल - "स्वाइपर्स", पॉप-अप विंडो, आदि।
  
• layout फ़ोल्डर - पृष्ठ के विभिन्न भागों के लेआउट के लिए, अर्थात्, शीर्ष लेख, पाद लेख, नेविगेशन, अनुभाग, कस्टम ग्रिड, आदि।
  
• pages फ़ोल्डर उन पृष्ठों के लिए है जिन्हें मानक से भिन्न शैली की आवश्यकता होती है।
  
• themes फ़ोल्डर - विभिन्न एप्लिकेशन थीम (अंधेरे मोड, प्रशासन, आदि) के लिए।
  
• abstracts फ़ोल्डर - सभी फ़ंक्शन, चर और अशुद्धियाँ। संक्षेप में, सहायक बातें।
  
• vendors फ़ोल्डर एक बाहरी पुस्तकालय है, जिसके बिना, शायद, एक भी आवेदन नहीं कर सकता है। vendors फ़ोल्डर में वे फाइलें होती हैं जो आप से स्वतंत्र हैं: फ़ॉन्ट विस्मयकारी, बूटस्ट्रैप फाइलें और वह सब।
  

मुख्य फ़ाइल

सभी आंशिक फ़ाइलें यहाँ आयात की जाती हैं।

 @import abstracts/variables; @import abstracts/functions; @import base/reset; @import base/typography; @import base/utilities; @import components/button; @import components/form; @import components/user-navigation; @import layout/header; @import layout/footer; … 

हां, यह थोड़ा फूला हुआ दिखता है, मैं मानता हूं। लेकिन इस वास्तुकला का आविष्कार बड़ी परियोजनाओं के लिए किया गया था - और छोटे कार्यों के लिए एक और विकल्प है।

सबसे पहले, हमें vendors फ़ोल्डर की आवश्यकता नहीं है: सभी बाहरी सीएसएस कोड हेडर में रखे link टैग में होंगे। इसके अलावा, themes फ़ोल्डर की आवश्यकता नहीं है: सबसे अधिक संभावना है, एक छोटे से आवेदन में केवल एक विषय होगा। अंत में, विशिष्ट पृष्ठों के लिए कोई शैली नहीं होगी - इसलिए हम संबंधित फ़ोल्डर को हटा देते हैं। तो, चार फ़ोल्डर बचे हैं - महान!

अब हमारे पास दो विकल्प हैं:

1. यदि आप "7-1" के सिद्धांत का पालन करते हैं, तो आपको फ़ोल्डर abstracts , components , layout और base को बचाने की आवश्यकता है।
   
2. यदि आप एक बड़े फ़ोल्डर के साथ काम करने में अधिक सहज हैं, जिसमें सभी आंशिक फ़ाइलें और main.scss , तो आपको कुछ इस तरह मिलेगा:
   

 sass/ _animations.scss _base.scss _buttons.scss _header.scss … _variables.scss main.scss 

यह आप पर निर्भर है।

मैंने आश्वस्त किया! यह सब कैसे लागू करें? मेरा मतलब है, ब्राउज़र scss फ़ाइलों का समर्थन नहीं करता है, है ना?

सच देखा जाए! अंतिम चरण में, हम SCSS को CSS में संकलित करेंगे।

SCSS से CSS बनाओ

हमें Node.js और NPM (या यार्न ) की आवश्यकता होगी।

हम node-sass उपयोग करेंगे, जो हमें .css फ़ाइलों को .css में संकलित करने की अनुमति देगा।

इसका इंटरफ़ेस काफी सरल है:

 node-sass <> <> [] 

हम केवल दो मापदंडों का उपयोग करेंगे:

• -w - निर्देशिका या फ़ाइल की निगरानी। node-sass कोड में बदलाव का इंतजार करेगा, और जैसे ही यह उनका पता लगाएगा, यह तुरंत सीएसएस में संबंधित फाइल को संकलित करेगा, जो विकास के दौरान बहुत सुविधाजनक है।
  
• पैरामीटर --output-style - आउटपुट सीएसएस फाइल कैसा दिखेगा। यह निम्न मान ले सकता है: nested|expanded|compact|compressed | CSS फ़ाइल बनाते समय हम इस विकल्प का उपयोग करेंगे।
  

यदि आप उत्सुक हैं (मुझे आशा है कि: डेवलपर को उत्सुक होना चाहिए!), पूर्ण प्रलेखन यहाँ है ।

अब हम जानते हैं कि किस उपकरण का उपयोग किया जाएगा। बाकी भी करना आसान है:

• प्रोजेक्ट बनाना: mkdir my-app && cd my-app
  
• इसे प्रारंभ करें: npm init
  
• node-sass जोड़ें: npm install node-sass --save-dev
  
• आवश्यक फ़ोल्डर, index.html और main.scss :
  

 touch index.html mkdir -p sass/{abstracts,base,components,layout} css cd sass && touch main.scss 

• निम्न स्क्रिप्ट को package.json फ़ाइल में जोड़ें:
  

 { … "scripts": {  "watch": "node-sass sass/main.scss css/style.css -w",  "build": "node-sass sass/main.scss css/style.css --output-style compressed" }, … } 

• Index.html फ़ाइल के हेड टैग में संकलित CSS फ़ाइल का लिंक जोड़ें:
  

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <b><link rel="stylesheet" href="css/style.css"></b> <title>My app</title> </head> <body> <h1 class="heading">My app</h1> </body> </html> 

वह सब है! जब आप कोड लिखते हैं, तो npm run watch और ब्राउज़र में index.html फ़ाइल खोलें। CSS को कम करने के लिए, बस npm run build ।

कुछ और

मक्खी पर रिबूट

बेहतर तर्क देने के लिए, आप स्थानीय index.html फ़ाइल का स्वत: पुनः लोड जोड़ सकते हैं।

ऐसा करने के लिए, यह करें:

• live-server पैकेज npm install -g live-server : npm install -g live-server
  नोट: यह एक वैश्विक पैकेज है।
  
• प्रोजेक्ट के आधार पर npm install npm-run-all --save-dev - यह आपको एक ही समय में कई स्क्रिप्ट चलाने की अनुमति देगा।
  
• निम्न स्क्रिप्ट को package.json जोड़ें:
  

 { … "scripts": { <b>   "start": "npm-run-all --parallel liveserver watch",  "liveserver": "live-server",</b>  "watch": "node-sass sass/main.scss css/style.css -w", }, … } 

अब, यदि आप npm run start , तो बदलाव तुरंत दिखाई देंगे - आपके हिस्से पर अनावश्यक आंदोलनों के बिना।

ऑटो उपसर्ग

हमने विकास उपकरण स्थापित किए - महान! अब आइए बिल्ड टूल्स के बारे में, विशेष रूप से - इसके बारे में: ऑटोप्रेक्सिफ़र ।
यह उपकरण (या बल्कि, पोस्टस्कॉल्स प्लगइन) सीएसएस को पार्स करता है और कैन आई यूज से मूल्यों का उपयोग करके सीएसएस नियमों के लिए विक्रेता उपसर्ग जोड़ता है।

वेबसाइट बनाते समय, नई सुविधाओं का उपयोग किया जा सकता है जो सभी ब्राउज़रों में समर्थित नहीं हैं। ऐसे कार्यों के लिए सहायता प्रदान करें जो विक्रेता उपसर्गों की अनुमति दें।

यह कैसा दिखेगा इसका एक उदाहरण:

 -webkit-animation-name: myAnimation; -moz-animation-name: myAnimation; -ms-animation-name: myAnimation; 

हां, इसे हाथ से लिखना थकाऊ है। हमारे लिए जीवन को आसान बनाना स्वचालित रूप से उपसर्ग जोड़ने का एक उपकरण है जो बिना किसी अतिरिक्त प्रयास के ब्राउज़र के साथ सीएसएस कोड को संगत बना देगा।

तो, सीएसएस संकलित करने के लिए:

1. हम सभी सीएसएसएस फाइलों को एक सीएसएस फाइल में संकलित करते हैं।
   
2. Autoprefixer का उपयोग करके उपसर्ग जोड़ें।
   
3. CSS फ़ाइल को संपीड़ित करें।
   

कुछ भी नहीं बचा है - चैनल को स्विच न करें।

• दो निर्भरताएं जोड़ें - postcss-cli और autoprefixer : npm install autoprefixer postcss-cli --save-dev
  
• हम build स्क्रिप्ट को संशोधित करते हैं और इन पंक्तियों को package.json जोड़ते हैं:
  

 { … "scripts": {  "start": "npm-run-all --parallel liveserver watch",  "liveserver": "live-server",  "watch": "node-sass sass/main.scss css/style.css -w", <b>   "compile": "node-sass sass/main.scss css/style.css",  "prefix": "postcss css/style.css --use autoprefixer -o css/style.css",  "compress": "node-sass css/style.css css/style.css --output-style compressed",  "build": "npm-run-all compile prefix compress"</b> … } 

अब जब आप npm run build शुरू करते हैं, तो प्रदाता उपसर्ग जोड़े जाएंगे, और सीएसएस कोड स्वयं संकुचित हो जाएगा। बस जादू!

क्या आप कुछ और जादू करना चाहते हैं? मैंने भंडार को उठाया - ताकि आप इसे तेजी से समझ सकें?

यदि आप रुचि रखते हैं कि मैंने अपने पोर्टफोलियो पृष्ठ पर इन कौशल को कैसे लागू किया, तो इस भंडार पर एक नज़र डालें और परिणाम का आनंद लें। मुझे उम्मीद है कि इन उदाहरणों से बेहतर समझने में मदद मिलेगी कि लेख में क्या चर्चा की गई थी।

और ... आज के लिए बस इतना ही! अब आप पुन: प्रयोज्य समर्थित मॉड्यूलर सीएसएस कोड लिख सकते हैं।



अनुवादक के बारे में

लेख का अनुवाद अल्कोनोस्ट ने किया था।

Alconost 68 भाषाओं में खेल , एप्लिकेशन और साइटों को स्थानीय करता है। मूल भाषा के अनुवादक, भाषाई परीक्षण, एपीआई के साथ क्लाउड प्लेटफ़ॉर्म, निरंतर स्थानीयकरण, परियोजना प्रबंधक 24/7, स्ट्रिंग संसाधनों का कोई भी प्रारूप।

हम विज्ञापन और प्रशिक्षण वीडियो भी बनाते हैं - Google Play और ऐप स्टोर के लिए बिक्री, छवि, विज्ञापन, प्रशिक्षण, टीज़र, खोजकर्ता, ट्रेलरों के लिए।

अधिक जानकारी