वेब डेवलपर्स के लिए आईटीसीएसएस का परिचय

वहाँ के लिए महान तरीकों का एक मुट्ठी भर है सीएसएस कोड को संरचित करना, और वे सभी अलग-अलग तरीकों से काम करते हैं। सबसे लोकप्रिय ओओसीएसएस और एसएमएसीएसएस हैं, लेकिन एक कम ज्ञात विधि भी है जिसे कहा जाता है ITCSS (उल्टे त्रिकोण सीएसएस) हैरी रॉबर्ट्स द्वारा निर्मित.

यह एक पुस्तकालय या एक ढांचा नहीं है, लेकिन ए कोड लिखने की पद्धति यह स्केलेबल और हेरफेर करने में आसान है। ITCSS का लाभ इससे मिलता है सरल कोड संगठन फ़ाइल आकार और सीएसएस वास्तुकला की अधिक समझ.

ITCSS हर किसी के लिए नहीं है, लेकिन यह कोडिंग प्रक्रिया के दौरान स्टाइलशीट को स्पष्टता के साथ देखने का एक पेशेवर तरीका प्रदान करता है। आइए ITCSS के पीछे की अवधारणाओं में तल्लीन करें, और देखें कि उन्हें वेब परियोजनाओं पर कैसे लागू किया जा सकता है.

ITCSS क्या है?

सीएसएस के आयोजन के आधुनिक तरीके अक्सर वापस आ जाते हैं मॉड्यूलर या सीएसएस वस्तुओं अमूर्त विचारों का निर्माण करने के लिए.

उल्टे त्रिकोण सीएसएस का नया विचार है सीएसएस गुणों को विभाजित करने का स्तरित तरीका उनकी विशिष्टता और महत्व के स्तर के आधार पर. यह SMACSS और OOCSS की तुलना में एक कम ज्ञात विधि है - हालाँकि दोनों को ITCSS के साथ जोड़ा जा सकता है.

चूंकि ITCSS है ज्यादातर मालिकाना, इसके उपयोग के बारे में कोई विस्तृत नियम पुस्तिका मौजूद नहीं है। केवल एक विशिष्ट सिद्धांतों का सेट हमारे निपटान में है। लेखक नीचे वीडियो में उनके बारे में बोलता है.

डिफ़ॉल्ट रूप से, ITCSS OOCSS के समान सिद्धांतों का उपयोग करता है लेकिन अधिक पृथक्करण के साथ विशिष्टता के आधार पर। इसलिए यदि आप पहले से ही OOCSS से परिचित हैं, तो इस पर विचार करें वैकल्पिक सीएसएस वास्तुकला कोशिश करना.

आईटीसीएसएस का उपयोग करने के कुछ सबसे बड़े लाभ इस प्रकार हैं:

• पेज ऑब्जेक्ट्स को अपनी CSS / SCSS फाइलों में विभाजित किया जा सकता है पुनर्प्रयोग. प्रत्येक ऑब्जेक्ट को कॉपी / पेस्ट करना और विस्तारित करना सरल है अन्य परियोजनाओं में.
• विशिष्टता की गहराई है आप पर निर्भर करता है.
• वहाँ है कोई सेट फ़ोल्डर संरचना, और प्रीप्रोसेसिंग टूल का कोई आवश्यक उपयोग नहीं.
• आप सीएसएस मॉड्यूल जैसे अन्य तरीकों से अवधारणाओं को मर्ज कर सकते हैं अपनी खुद की हाइब्रिड वर्कफ़्लो बनाएँ.

ITCSS प्रणाली

आइए एक नज़र डालते हैं कि इनवर्टेड ट्राइएंगल मॉडल लुबोस केमेटको के पोस्ट से निम्न चित्रण का उपयोग करके कैसे काम करता है.

उल्टे त्रिभुज के सपाट शीर्ष से नीचे दिशा में नीचे की ओर एक दिशात्मक प्रवाह ए का प्रतीक है विशिष्टता में वृद्धि. इस कम विशिष्टता पर ध्यान दें कई बार किसी साइट पर कक्षाओं का पुन: उपयोग करना आसान बनाता है.

त्रिकोण के प्रत्येक उपधारा को एक अलग फ़ाइल या फ़ाइलों का समूह माना जा सकता है, हालाँकि आपको उस तरह से कोड लिखने की आवश्यकता नहीं है। यह आयात सुविधा के कारण Sass / Less उपयोगकर्ताओं के लिए अधिक समझ में आता है। बस प्रत्येक उपधारा के लिए एक कार्यप्रणाली के रूप में सोचें विभाजन और पुन: प्रयोज्य सीएसएस कोड का आयोजन.

आइए एक त्वरित नज़र डालें उल्टे त्रिकोण का प्रत्येक खंड ऊपर से नीचे की ओर बढ़ते हुए.

• सेटिंग्स - प्रीप्रोसेसर चर और तरीके (कोई वास्तविक सीएसएस आउटपुट नहीं)
• उपकरण - मिश्रण और कार्य (कोई वास्तविक सीएसएस उत्पादन नहीं)
• सामान्य - सीएसएस रीसेट में एरिक मेयर का रीसेट, Normalize.css या कोड का अपना बैच शामिल हो सकता है
• तत्वों - कक्षाओं के बिना एकल HTML तत्व चयनकर्ता
• वस्तुओं - पृष्ठ संरचना के लिए कक्षाएं आमतौर पर OOCSS पद्धति का अनुसरण करती हैं
• अवयव - किसी भी और सभी पृष्ठ तत्वों को स्टाइल करने के लिए एस्थेटिक कक्षाएं (अक्सर ऑब्जेक्ट कक्षाओं की संरचना के साथ संयुक्त)
• तुरुप - त्रिभुज में किसी भी चीज़ को ओवरराइड करने के लिए सबसे विशिष्ट शैली

उल्टे त्रिकोण की प्रत्येक परत हो सकती है अपनी आवश्यकताओं के अनुरूप समायोजित. इसलिए यदि आप एक सीएसएस प्रीप्रोसेसर का उपयोग नहीं करते हैं तो आपको सेटिंग्स या टूल लेयर की आवश्यकता नहीं होगी.

जैसा कि आप फिट देखते हैं, आपको प्रत्येक उपधारा की व्याख्या करने के लिए स्वतंत्र महसूस करना चाहिए। उदाहरण के लिए, जॉर्डन कोशेई बताते हैं कि कैसे उन्होंने संरचना वर्गों में एक साथ संरचना और सौंदर्यशास्त्र को एक साथ जोड़ा, जो कि घटक खंड में बहुत कम है.

ITCSS है कोई कठिन-व्रत नियम नहीं कि आप का पालन करना चाहिए। आईटीसीएसएस अनुपालन परीक्षक नहीं है, और कोई भी इस मॉडल को थोड़ा बदलने के लिए आप पर चिल्लाएगा.

यद्यपि ITCSS के निर्माता हैरी रॉबर्ट्स आंतरिक उपयोग के लिए अपने तरीकों को स्वामित्व में रखने के लिए इच्छुक थे, आप एक पा सकते हैं ITCSS का खुला स्रोत उदाहरण इस GitHub रेपो में। यह CSS Wizardry खाते द्वारा होस्ट किया गया है, जो हैरी रॉबर्ट्स की निजी वेबसाइट है.

BEM + IT = BEMIT नामकरण

सबसे लोकप्रिय CSS नामकरण योजनाओं में से एक BEM है। यह ब्लॉक-एलिमेंट-मॉडिफ़ायर के लिए खड़ा है और एक विशेष सिंटैक्स का अनुसरण करता है.

बीईएम में प्रत्येक तत्व सीएसएस वर्गों के लिए एक नामकरण सम्मेलन का वर्णन करता है:

• ब्लाकों व्यक्तिगत तत्वों के लिए कक्षाएं हैं जिन्हें दोहराया जा सकता है और अकेले खड़े हो सकते हैं.
• तत्वों हमेशा एक ब्लॉक का हिस्सा होते हैं
• संशोधक हमेशा अपनी उपस्थिति को बदलने के लिए एक ब्लॉक या तत्व को संशोधित करें (चालू / बंद, सक्रिय / निष्क्रिय, निश्चित, स्थिर, हाइलाइट / तटस्थ).

BEMIT नामकरण सम्मेलन है ITCSS द्वारा अपनाया गया, जो ITCSS के साथ नए विचारों को लागू करते समय BEM से विचारों को उधार लेता है.

बीईएम सिंटैक्स बहुत विशिष्ट नियमों को निर्धारित करता है। नीचे BEM वेबसाइट से एक नमूना है:

.फ़ॉर्म  .form - विषय-क्रिसमस  .form - सरल  .form__input  .form__submit  .form__submit - अक्षम  

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

हैरी इस ब्लॉग पोस्ट में BEMIT में गहराई से है। उनका विवरण बहुत संक्षिप्त है और यह दर्शाता है कि ITCSS की वास्तविक प्रकृति है अन्य सीएसएस कार्यप्रणालियों के साथ दोस्ताना खेलें.

हैरी परिभाषित करता है वस्तुओं के नाम स्थान के रूप में दिखाई दे रहा है प्रत्येक प्रमुख वर्ग के नाम के लिए उपसर्ग. वे जैसे ही टूट जाते हैं ओ- वस्तुओं के लिए, सी- घटकों के लिए, और यू- उपयोगिताओं के लिए (जैसे स्पष्ट या पाठ केंद्रित).

यहाँ कुछ नमूना कोड प्रस्तुत कर रहे हैं विशिष्ट BEMIT नामकरण परंपराएँ.

  
... 
 
 

वह भी उपयोग करने की सलाह देता है @ मीडिया शैलियों के आधार पर कक्षाओं के लिए प्रत्यय। ऐसा .ओ-मीडिया कक्षा में परिवर्तन हो सकता है .ओ-मीडिया @ एलजी बड़ी स्क्रीन के लिए, और .ओ-मीडिया @ md मध्यम आकार की स्क्रीन के लिए.

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

आईटीसीएसएस ने बीईएम क्यों बढ़ाया, और आप अपनी सीएसएस कक्षाओं का नाम कैसे लेना चाहते हैं, इसके बारे में अधिक जानने के लिए मैं इस इंट्रो BEMIT लेख को पढ़ने की सलाह देता हूं।.

ITCSS को संक्षेप में प्रस्तुत किया जा सकता है एक संगठनात्मक विधि लिखने हेतु पुन: प्रयोज्य और स्केलेबल सीएसएस. BEM पसंदीदा नाम सिंटैक्स है, और BEMIT है यह काम करने के लिए बढ़ाता है अधिक विशिष्ट और पहचानने योग्य कोड के लिए नामस्थान के साथ.

सीखने के लिए बहुत कुछ है, और अगर आप सीएसएस के लिए नए हैं तो यह एक कठिन अवधारणा को तोड़ने के लिए होगा। लेकिन अगर आप सीखने के लिए तैयार हैं, तो मैं गारंटी देता हूं कि आप आईटीसीएसएस कोड की चिकना प्रकृति से आश्चर्यचकित होंगे.

समेट रहा हु

फ्रंट-एंड डेवलपर्स हमेशा अपने वर्कफ़्लो को अनुकूलित करने के लिए देख रहे हैं। ITCSS सिर्फ एक और तरीका है जो जटिल वेबसाइटों को सुधारने की बेहतर विधि में योगदान कर सकता है.

कठिनाई यह सीख रही है कि वास्तविक परियोजना के काम में यह कैसे काम करता है। यदि आपके पास मंदिर है, और सीखने के लिए ड्राइव है, तो ITCSS आपके टूलकिट में जोड़ने लायक हो सकता है। हालाँकि मुझे कोई आधिकारिक दस्तावेज नहीं मिला है, फिर भी आईटीसीएसएस के बारे में जानने के लिए ऑनलाइन बहुत सारे संसाधन हैं.

• नए CSS आर्किटेक्चर ITCSS के साथ बड़े पैमाने पर वेब प्रोजेक्ट प्रबंधित करें (Creativebloq.com)
• आईटीसीएसएस के साथ सीएसएस परियोजनाओं का प्रबंधन - प्रस्तुति स्लाइड (Speakerdeck.com)
• ITCSS के साथ सीएसएस परियोजनाएं (1hr वीडियो प्रस्तुति)
• आईटीसीएसएस - बड़े पैमाने पर परियोजनाओं को व्यवस्थित करने का एक दिलचस्प तरीका (Css-tricks.com)

(कवर फोटो स्पीकरडेक डॉट कॉम के जरिए)