CSS में शीर्षासन न लिखें
बस खंडों को फ़ाइलों में विभाजित करें। किसी भी सीएसएस टिप्पणी, कि टिप्पणी होना चाहिए।
reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css
उन्हें एक में संयोजित करने के लिए एक स्क्रिप्ट का उपयोग करें; यदि आवश्यक है। तुम भी एक अच्छी निर्देशिका संरचना के रूप में अच्छी तरह से कर सकते हैं, और बस अपनी स्क्रिप्ट .cssफ़ाइलों के लिए पुनरावर्ती स्कैन है ।
यदि आपको शीर्षक लिखना है, तो फ़ाइल के प्रारंभ में एक TOC रखें
टीओसी में हेडिंग आपके द्वारा लिखे गए शीर्षकों के बराबर होनी चाहिए। यह शीर्षकों की खोज करने के लिए एक दर्द है। समस्या में जोड़ने के लिए, यह जानने के लिए कि आपके पहले हेडर के बाद आपके पास एक और हेडर कैसे है? ps। टीओसी लिखते समय प्रत्येक पंक्ति की शुरुआत में डॉक्स-जैसे * (स्टार) न जोड़ें, यह सिर्फ पाठ का चयन करने के लिए अधिक कष्टप्रद बनाता है।
/* Table of Contents
- - - - - - - - -
Header stuff
Body Stuff
Some other junk
- - - - - - - - -
*/
...
/* Header Stuff
*/
...
/* Body Stuff
*/
नियमों के साथ या भीतर टिप्पणी लिखें, ब्लॉक के बाहर नहीं
सबसे पहले, जब आप स्क्रिप्ट को संपादित करते हैं, तो 50/50 मौका होता है, आप ध्यान दें कि नियम ब्लॉक के बाहर क्या है (विशेषकर यदि यह पाठ का एक बड़ा ग्लोब है;))। दूसरी बात यह है कि (लगभग) कोई मामला नहीं है जहाँ आपको बाहर "टिप्पणी" की आवश्यकता होगी। यदि यह बाहर है, तो यह शीर्षक का 99% समय है, इसलिए इसे इस तरह रखें।
पृष्ठ को घटकों में विभाजित करें
अधिकांश समय घटक के पास होना चाहिए position:relative, नहीं paddingऔर नहीं margin। यह% नियमों को बहुत सरल करता है, साथ ही absolute:positionतत्वों के बहुत सरल अंतर्वेशन के लिए अनुमति देता है , क्योंकि अगर कोई निरपेक्ष तैनात कंटेनर है तो पूर्ण तैनात तत्व कंटेनर का उपयोग करेगा top, जब कंप्यूटिंग right,, bottomऔर leftगुण।
HTML5 दस्तावेज़ में अधिकांश DIV आमतौर पर एक घटक होते हैं।
एक घटक भी कुछ ऐसा है जिसे पृष्ठ पर एक स्वतंत्र इकाई माना जा सकता है। आम आदमी की शर्तों में एक घटक की तरह कुछ का इलाज अगर यह एक ब्लैकबॉक्स की तरह कुछ समझ में आता है ।
QA पृष्ठ उदाहरण के साथ फिर से जा रहे हैं:
#navigation
#question
#answers
#answers .answer
etc.
पृष्ठ को घटकों में विभाजित करके, आप अपने काम को प्रबंधनीय इकाइयों में विभाजित करते हैं।
एक ही लाइन पर एक संचयी प्रभाव के साथ नियम रखो।
उदाहरण के लिए border, marginऔर padding(लेकिन नहीं outline) सभी उस तत्व के आयाम और आकार में जोड़ते हैं जो आप स्टाइल कर रहे हैं।
position: absolute; top: 10px; right: 10px;
यदि वे सिर्फ एक पंक्ति में पढ़ने योग्य नहीं हैं, तो कम से कम उन्हें निकटता में रखें:
padding: 10px; margin: 20px;
border: 1px solid black;
जब संभव हो तो आशुलिपि का उपयोग करें:
/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;
चयनकर्ता को कभी न दोहराएं
यदि आपके पास एक ही चयनकर्ता के अधिक उदाहरण हैं, तो एक अच्छा मौका है कि आप एक ही नियम के कई उदाहरणों के साथ अपरिहार्य रूप से समाप्त होंगे। उदाहरण के लिए:
#some .selector {
margin: 0;
font-size: 11px;
}
...
#some .selector {
border: 1px solid #000;
margin: 0;
}
TAGs को चयनकर्ताओं के रूप में उपयोग करने से बचें, जब आप आईडी / कक्षाओं का उपयोग कर सकते हैं
सबसे पहले DIV और SPAN टैग अपवाद हैं: आपको कभी भी, कभी भी उनका उपयोग नहीं करना चाहिए! ;) केवल उन्हें एक वर्ग / आईडी संलग्न करने के लिए उपयोग करें।
इस...
div#answers div.answer table.statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
outline: 3px solid #000;
}
इस तरह लिखा जाना चाहिए:
#answers .answer .statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
क्योंकि अतिरिक्त झूलने वाले DIVs चयनकर्ता के लिए कुछ भी नहीं जोड़ते हैं। वे एक अनावश्यक टैग-नियम को भी मजबूर करते हैं। आप उदाहरण के लिए, बदलने के लिए, तो .answerएक से divएक को articleअपनी शैली टूट जाएगा।
या यदि आप अधिक स्पष्टता पसंद करते हैं:
#answers .answer .statistics {
color: pink;
border: 1px solid #000;
}
#answers .answer table.statistics {
border-collapse: collapsed;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
border-collapseसंपत्ति होने का कारण एक विशेष संपत्ति है जो केवल तभी समझ में आता है जब इसे लागू किया जाता है table। यदि .statisticsयह नहीं है तो tableयह लागू नहीं होना चाहिए।
सामान्य नियम बुरे हैं!
- यदि आप कर सकते हैं तो सामान्य / जादू नियम लिखने से बचें
- जब तक यह सीएसएस-रीसेट / अनलेट के लिए नहीं है, तब तक आपके सभी सामान्य जादू कम से कम एक रूट घटक पर लागू होने चाहिए
वे आपको समय नहीं बचाते हैं, वे आपके सिर में विस्फोट करते हैं; साथ ही रख-रखाव एक बुरा सपना है। जब आप नियम लिख रहे होते हैं, तो आप जान सकते हैं कि वे कहां लागू होते हैं, हालांकि इसकी कोई गारंटी नहीं है कि आपका नियम आपके साथ बाद में गड़बड़ नहीं करेगा।
इस सामान्य नियमों में जोड़ने के लिए भ्रमित करना और पढ़ना मुश्किल है, भले ही आपके पास दस्तावेज़ के कुछ विचार हों जो आप स्टाइल कर रहे हैं। यह कहने के लिए नहीं है कि आपको सामान्य नियम नहीं लिखना चाहिए, बस उनका उपयोग न करें जब तक कि आप वास्तव में उनके लिए सामान्य होने का इरादा नहीं रखते हैं, और यहां तक कि वे चयनकर्ता में उतनी ही गुंजाइश जानकारी जोड़ सकते हैं जितनी आप कर सकते हैं।
इस तरह से सामान ...
.badges {
width: 100%;
white-space: nowrap;
}
address {
padding: 5px 10px;
border: 1px solid #ccc;
}
... प्रोग्रामिंग भाषा में वैश्विक चर का उपयोग करने के रूप में एक ही समस्या है। आपको उन्हें गुंजाइश देने की आवश्यकता है!
#question .userinfo .badges {
width: 100%;
white-space: nowrap;
}
#answers .answer .userinfo address {
padding: 5px 10px;
border: 1px solid #ccc;
}
मूल रूप से जो इस प्रकार है:
components target
---------------------------- --------
#answers .answer .userinfo address
-------- --------- --------- --------
domain component component selector
मुझे आईडी का उपयोग करना पसंद है जब भी मुझे पता चलता है कि एक घटक एक पृष्ठ पर एक सिंगलटन है; आपकी जरूरतें अलग हो सकती हैं।
नोट: आदर्श रूप में, आपको बस पर्याप्त लिखना चाहिए। कम घटकों का उल्लेख करने की तुलना में चयनकर्ता में अधिक घटकों का उल्लेख करना अधिक क्षमाशील गलती है।
मान लें कि आपके पास एक paginationघटक है। आप इसे अपनी साइट पर कई स्थानों पर उपयोग करते हैं। यह एक अच्छा उदाहरण होगा जब आप एक सामान्य नियम लिख रहे होंगे। आपको display:blockव्यक्तिगत पृष्ठ संख्या लिंक कहते हैं और उन्हें एक गहरे भूरे रंग की पृष्ठभूमि देते हैं। उन्हें दिखाई देने के लिए आपके पास इस तरह के नियम होना चाहिए:
.pagination .pagelist a {
color: #fff;
}
अब आपको उत्तर की सूची के लिए अपने पृष्ठांकन का उपयोग करने देता है, आप कुछ इस तरह से सामना कर सकते हैं
#answers .header a {
color: #000;
}
...
.pagination .pagelist a {
color: #fff;
}
इससे आपके सफेद लिंक काले हो जाएंगे, जो आप नहीं चाहते हैं।
इसे ठीक करने का गलत तरीका है:
.pagination .pagelist a {
color: #fff !important;
}
इसे ठीक करने का सही तरीका है:
#answers .header .pagination .pagelist a {
color: #fff;
}
जटिल "तर्क" टिप्पणियाँ काम नहीं करती हैं :)
यदि आप कुछ इस तरह लिखते हैं: "यह मूल्य ब्ला-ब्ला की ऊंचाई के साथ संयुक्त ब्ला-ब्ला पर निर्भर है", तो यह अनिवार्य है कि आप एक गलती करेंगे और यह सब कार्ड के घर की तरह नीचे गिर जाएगा।
अपनी टिप्पणियों को सरल रखें; यदि आपको "तार्किक संचालन" की आवश्यकता है, तो उन सीएसएस टेम्प्लेटिंग भाषाओं में से एक पर विचार करें, जैसे SASS या LESS ।
आप एक रंग पैलेट कैसे लिखते हैं?
इसे अंत के लिए छोड़ दें। अपने पूरे रंग के पैलेट के लिए एक फाइल रखें। इस फ़ाइल के साथ आपकी शैली में अभी भी नियमों में कुछ प्रयोग करने योग्य रंग-पैलेट होना चाहिए। आपका रंग फूस को अधिलेखित करना चाहिए। आप एक बहुत ही उच्च स्तरीय मूल घटक (जैसे। #page) का उपयोग करके चयनकर्ताओं की श्रृंखला करते हैं और फिर अपनी शैली को एक आत्मनिर्भर नियम ब्लॉक के रूप में लिखते हैं। यह सिर्फ रंग या कुछ और हो सकता है।
जैसे।
#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
color: #222; background: #fff;
border-radius: 10px;
padding: 1em;
}
विचार सरल है, आपका रंग पैलेट आधार शैली से स्वतंत्र एक स्टाइलशीट है, जिसे आपने कैस्केड किया है।
कम नाम, कम मेमोरी की आवश्यकता होती है, जिससे कोड को पढ़ना आसान हो जाता है
कम नामों का उपयोग करना बेहतर है। आदर्श रूप से बहुत सरल (और संक्षिप्त!) शब्दों का उपयोग करें: पाठ, शरीर, हेडर।
मुझे यह भी पता है कि सरल शब्दों का संयोजन समझना आसान है, फिर लंबे "उपयुक्त" शब्दों का एक सूप होना: पोस्टबॉडी, पोस्टहेड, उपयोगकर्ता नाम, आदि।
शब्दावली को छोटा रखें, इस तरह से भले ही कुछ अजनबी आपके स्टाइल-सूप (जैसे कि कुछ हफ्तों के बाद खुद को पढ़ने के लिए आ रहे हों) को केवल यह समझने की जरूरत है कि शब्दों का उपयोग कहां किया जाता है, जहां हर चयनकर्ता का उपयोग किया जाता है। उदाहरण के लिए .thisजब भी कोई तत्व "चयनित आइटम" या "वर्तमान आइटम", आदि का उपयोग करता है
अपने आप के बाद साफ करो
सीएसएस लिखना खाने की तरह है, कभी-कभी आप एक गड़बड़ छोड़ देते हैं। सुनिश्चित करें कि आप उस गंदगी को साफ करते हैं, या कचरा कोड बस ढेर हो जाएगा। उन कक्षाओं / आईडी को निकालें जिनका आप उपयोग नहीं करते हैं। उन सीएसएस नियमों को हटा दें जिनका आप उपयोग नहीं करते हैं। सुनिश्चित करें कि सब कुछ अच्छा तंग है और आपके पास परस्पर विरोधी या दोहराए गए नियम नहीं हैं।
यदि आपने मुझे सुझाव दिया है, तो आपकी शैली में कुछ कंटेनरों को ब्लैक-बॉक्स (घटकों) के रूप में माना जाता है, उन घटकों को अपने चयनकर्ताओं में उपयोग किया है, और सब कुछ एक समर्पित फ़ाइल में रखा है (या टीओसी और हेडर के साथ एक फ़ाइल को ठीक से विभाजित करें), फिर आपकी काम काफी आसान है ...
आप फ़ायरफ़ॉक्स एक्सटेंशन डस्ट-मी सेलेक्टर्स (टिप: इसे अपने साइटमैप.एक्सएमएल पर इंगित करें) जैसे टूल का उपयोग कर सकते हैं, जिससे आपको अपने सीएसएस की नाक और कार्नियों में छिपे हुए कुछ जंक को ढूंढने में मदद मिलेगी।
एक unsorted.cssफाइल रखें
कहते हैं कि आप एक क्यूए साइट को स्टाइल कर रहे हैं, और आपके पास पहले से ही "उत्तर पृष्ठ" के लिए एक स्टाइलशीट है, जिसे हम कॉल करेंगे answers.css। यदि आपको अब बहुत सी नई सीएसएस जोड़ने की आवश्यकता है, unsorted.cssतो इसे स्टाइलशीट में जोड़ें, फिर अपनी answers.cssस्टाइलशीट में रिफलेक्टर करें।
इसके कई कारण हैं:
- आपके द्वारा काम पूरा करने के बाद इसे रिफलेक्टर करना तेज़ है, फिर यह नियमों की खोज करना है (जो कि संभवत: मौजूद नहीं है) और कोड इंजेक्ट करें
- आप सामान को लिखेंगे जिसे आप हटा देंगे, कोड को इंजेक्ट करना बस उस कोड को हटाने के लिए कठिन बनाता है
- मूल फ़ाइल के लिए आसानी से नियम / चयनकर्ता दोहराव की ओर जाता है
simplicity,complexity,maintenance,structureऔरrefactoring।