शैलियों का संगठन और अनुकूलन

इस पोस्ट में मैं एक विशिष्ट परियोजना पर शैलियों के संगठन का एक उदाहरण दूंगा।

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



अब चलो शैलियों की बहुत संरचना के बारे में सीधे बात करते हैं।
सभी शैलियों को एक फ़ाइल में रखना अनुचित है, समय के साथ, इसमें नेविगेट करना काफी मुश्किल हो जाता है। साथ ही, प्रत्येक पृष्ठ इस फ़ाइल से लगभग 10% नियमों का उपयोग करता है, और इसका वजन काफी होता है।
यह एक साइट के तार्किक ब्लॉकों द्वारा शैलियों को अलग करने के लिए बहुत अधिक इष्टतम है।

Css (LESS, SASS, SCSS) के साथ काम करने के लिए लाइब्रेरी को प्रोजेक्ट से जोड़ना भी आवश्यक है। हमें चर, कार्यों के साथ काम करने की आवश्यकता होगी।
सर्वर अनुरोधों को कम करने के लिए, फ़ाइल असेंबली की आवश्यकता है। फ़ाइलों को एक विशेष डिजाइन के अनुसार एक साथ सरेस से जोड़ा जाना चाहिए, उदाहरण के लिए, आप मानक सीएसएस - आयात निर्माण का उपयोग कर सकते हैं। यहां, आपको अपनी चुनी हुई सीएसएस लाइब्रेरी के स्रोत कोड को संपादित करने के लिए डेवलपर से मदद की आवश्यकता हो सकती है।
साथ ही, वॉल्यूम को कम करने के लिए, फ़ाइलों को क्लाइंट को संपीड़ित करने के लिए आना चाहिए। उदाहरण के लिए, dotLess , web.config में मान <dotless minifyCss=" true " cache="false"/> साथ फ़ाइलों को संपीड़ित करता है।

प्रत्येक तार्किक ब्लॉक में एक अलग सीएसएस फ़ाइल होगी। यह समर्थन, वांछित शैलियों की खोज, और वास्तव में फाइलों में अभिविन्यास को सरल करता है। ये सभी फाइलें स्रोत हैं, हम उन्हें / सीएसएस / स्रोत / फ़ोल्डर में समाहित करेंगे। शेष सीएसएस फ़ाइलें कलेक्टर हैं, वे पृष्ठों से लिंक करते हैं और आयात करके स्रोतों को इकट्ठा करते हैं।
मान लीजिए कि प्रश्न में परियोजना एक निश्चित सामाजिक नेटवर्क है, इसके आधार पर, निम्नलिखित संरचना को प्रतिष्ठित किया जा सकता है:

/ सीएसएस
/ स्रोतों - संसाधनों के लिए फ़ोल्डर, सर्वर पर बाहर नहीं रखा गया है
/ Global-vars - इस फ़ोल्डर की फाइलें आवश्यक रूप से प्रत्येक css- फाइल कलेक्टर में शामिल हैं
locals.css - वैश्विक चर
functions.css - वैश्विक फ़ंक्शंस
/ आम
reset.css - मुझे लगता है कि यह स्पष्ट करना आवश्यक नहीं है, यह स्पष्ट है कि किस प्रकार की शैलियाँ हैं
utils.css - प्रकार की शैलियाँ .clearfix
/ सामग्री
base.css - सामग्री के लिए मुख्य शैलियाँ, अर्थात् h1-h6, p, सूचियों के लिए बुलेट (ul.text, ul.dashed, आदि), dl, dd, dt, चित्र और पैनल पाठ में (टेक्स्ट रैप) ), पाठ कॉलम, आदि।
panel.css - विभिन्न पैनल
table.css - सामग्री में तालिकाओं के लिए शैलियाँ (वें, धारी के माध्यम से)
/ नियंत्रण
button.css - बटन के प्रकार
form.css - इनपुट फ़ील्ड के लिए सामान्य शैलियाँ (उदाहरण के लिए, आंतरिक छाया, फ़ोकस (फ़्रेम), सत्यापन संदेश फ़ॉर्मेट करना और उन्हें डिफ़ॉल्ट रूप से छिपाना)
tabs.css - टैब, टैब
सिस्टम-नोटिफिकेशन.एससी - सिस्टम संदेश, एक नियम के रूप में, 3 प्रकार के होते हैं: सफलता (हरा), विफलता (लाल) और जानकारी (ग्रे, नीला)
pager.css - पेजर
साइट पर बैनर - बैनर - बैनर
balloons.css - सभी प्रकार के गुब्बारे, टूलटिप्स, कस्टम टूल, आदि।
/ सदस्य
thumb.css - उपयोगकर्ता अवतार
card.css - उपयोगकर्ता कार्ड (अवतार, नाम, संक्षिप्त डेटा)
कार्ड- list.css - उदाहरण के लिए, कार्ड के साथ एक ग्रिड
profile.css - उपयोगकर्ता प्रोफ़ाइल
/ मॉड्यूल - साइट के लिए विभिन्न मॉड्यूल
search.css
समाचार-list.css
gifts.css
games.css
/ नहीं-नहीं - अनधिकृत उपयोगकर्ताओं के लिए
login.css - लॉगिन फ़ॉर्म
Registration.css - पंजीकरण फॉर्म
/ अधिकृत - अधिकृत उपयोगकर्ताओं के लिए
मेरी-account.css
mail-system.css - इनबॉक्स संदेश, आउटबॉक्स, आदि।
अधिकृत मेनू-css - अधिकृत क्षेत्र में नेविगेशन मेनू
my-profile.css - अपनी प्रोफ़ाइल देखें, संपादित करें
/ लेआउट
common.css
header.css
शीर्ष menu.css
footer.css
overlay.css - उदाहरण के लिए, परतों के शीर्ष पर सभी पॉप-अप 0.5 मद्धम होंगे
main.css - मुख्य कलेक्टर, सभी मास्टर पृष्ठों से जुड़ा हुआ है
/ लेआउट
default.css - साइट का मुख्य लेआउट, / लेआउट फ़ोल्डर से फ़ाइलें एकत्र करता है, मुख्य लेआउट के साथ विज़ार्ड से जोड़ता है
popup-windows.css - पॉपअप के लिए स्टाइल, पॉपअप विंडो के लिए मास्टर पेज पर जुड़े
not-dif.css - / स्त्रोतों / not-Cort / फ़ोल्डर से शैलियाँ एकत्र करता है
dif.css - / स्रोत / ज़ोर / फ़ोल्डर से शैलियाँ एकत्र करता है
/ थीम्स - विभिन्न साइट थीम
नई-year.css
सेंट-valentine.css
/% अनुभाग-नाम% - साइट का कोई भी नया अनुभाग, "साइट में साइट", अपने स्वयं के सबमेनू की उपस्थिति की विशेषता है, आदि।
/ सीएसएस
% खंड-नाम% .css
layout.css
/ स्रोत
menu.css

बेशक, प्रत्येक परियोजना की अपनी अनूठी संरचना है। फ़ाइल पृथक्करण का सिद्धांत महत्वपूर्ण है।

कुछ फ़ाइलों के लिए अतिरिक्त विवरण:

main.css - फ़ोल्डर्स से फ़ाइलें एकत्र करता है:
/ स्रोत / वैश्विक-वार
/ स्रोत / आम
/ स्रोत / सामग्री
/ स्रोत / नियंत्रण
/ स्रोत / सदस्य
/ स्रोत / मॉड्यूल

functions.css - में वैश्विक कार्य शामिल हैं, जैसे:

घिरे-कोने ( @radius)
{
सीमा-त्रिज्या : @radius;
-मोज़-बॉर्डर-रेडियस : @ ब्रैडियस;
-वेबकिट-बॉर्डर-रेडियस : @radius;
* व्यवहार : url ( /libs/progressive-IE.htc ) ;
}

स्रोत / लेआउट / common.css - लेआउट द्वारा वैश्विक शैली:

.columns-आवरण
{
प्रदर्शन : टेबल ;
* ज़ूम : 1 ;
}
.columns-आवरण .column
{
प्रदर्शन : टेबल-सेल ;
* फ्लोट : बाएं ;
}

उपयोगकर्ता के प्राधिकरण की स्थिति पर not-Cort.css और dif.css फ़ाइलों का कनेक्शन निर्भर करता है। उदाहरण के लिए, asp.net में यह इस तरह दिखेगा:

< asp:LoginView runat ="server" >
< AnonymousTemplate >
< link href ="/css/not-auth.css" rel ="stylesheet" type ="text/css" />
</ AnonymousTemplate >
< LoggedInTemplate >
< link href ="/css/auth.css" rel ="stylesheet" type ="text/css" />
</ LoggedInTemplate >
</ asp:LoginView >

* This source code was highlighted with Source Code Highlighter .

मैं एक अवधारणा देना चाहता हूं जो मुझे लगता है कि आयोजित की जानी चाहिए।
घटकों, "ईंटों" से नए पृष्ठ बनाए जाने चाहिए - सीएसएस कक्षाएं। कुछ लोग इस अवधारणा को गलत समझते हैं और मार-बॉटम -15 , फ्लोट-लेफ्ट या पैड -20 जैसी कक्षाओं से एक पेज बनाते हैं, जो एक बड़ी गलती भी है।
तत्वों की एक समान शैली को पूरे साइट पर बनाए रखा जाना चाहिए, अर्थात्। एक पृष्ठ पर शीर्षक h1 दूसरे पर h1 के समान दिखना चाहिए। हेडिंग, पैराग्राफ, सूचियाँ, पैनल, टैब, पेजर, कंटेंट टेबल आदि। डिजाइन को एक ही शैली का अनुपालन करना चाहिए।
एक नए पृष्ठ के लिए शैलियों को लिखने से पहले, आपको परियोजना की मौजूदा सीएसएस-फाइलों का विश्लेषण करना चाहिए, शायद पहले से ही आवश्यक शैलियों हैं। सीएसएस फ़ाइल अनावश्यक रूप से विकसित नहीं होनी चाहिए।

अंत में, मैं कहूंगा कि ऊपर वर्णित सब कुछ जेएस के लिए भी प्रासंगिक है।