সিএসএসে শিরোনাম লিখবেন না
কেবল বিভাগগুলিকে ফাইলগুলিতে বিভক্ত করুন। যে কোনও সিএসএসের মন্তব্য, মন্তব্য হওয়া উচিত।
reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css
এগুলির সাথে একত্রিত করতে একটি স্ক্রিপ্ট ব্যবহার করুন; যদি প্রয়োজন হয় তাহলে. আপনার পাশাপাশি একটি দুর্দান্ত ডিরেক্টরি কাঠামো থাকতে পারে এবং আপনার স্ক্রিপ্টটি পুনরাবৃত্তভাবে .cssফাইলগুলির জন্য স্ক্যান করতে পারেন।
যদি আপনাকে অবশ্যই শিরোনাম লিখতে হয় তবে ফাইলের শুরুতে একটি টিওসি রাখুন
TOC- এ শিরোনামগুলি আপনার পরে লেখার শিরোনামগুলির সাথে পুরোপুরি সমান হওয়া উচিত। শিরোনামগুলি অনুসন্ধান করার জন্য এটি একটি ব্যথা। সমস্যাটি যুক্ত করার জন্য, কেউ আপনার প্রথম শিরোনামের পরে অন্য একটি শিরোনাম আছে তা ঠিক কীভাবে অনুমান করা যায়? পুনশ্চ. টিওসিগুলি লেখার সময় প্রতিটি লাইনের শুরুতে ডক-জাতীয় * (তারা) যুক্ত করবেন না, এটি পাঠ্যটি নির্বাচন করা আরও বিরক্তিকর করে তোলে।
/* Table of Contents
- - - - - - - - -
Header stuff
Body Stuff
Some other junk
- - - - - - - - -
*/
...
/* Header Stuff
*/
...
/* Body Stuff
*/
নিয়মের সাথে বা এর মধ্যে মন্তব্যগুলি লিখুন, ব্লকের বাইরে নয়
প্রথমে, আপনি যখন স্ক্রিপ্টটি সম্পাদনা করবেন তখন সেখানে 50/50 এর সুযোগ থাকে আপনি নিয়ম ব্লকের বাইরে যা আছে তার দিকে মনোযোগ দিন (বিশেষত এটি যদি পাঠ্যের একটি বড় গ্লোব;))। দ্বিতীয়ত (প্রায়) কোনও ক্ষেত্রেই নেই যেখানে আপনার বাইরে "মন্তব্য" লাগবে। যদি এটি বাইরে থাকে তবে এটি শিরোনামের 99% সময় হয়, সুতরাং এটি এটিকেই রাখুন।
পৃষ্ঠাটি উপাদানগুলিতে বিভক্ত করুন
উপাদানগুলির বেশিরভাগ সময় position:relative, না paddingএবং না থাকা উচিত margin। এই সরলীকৃত% অনেক, সেইসাথে অনেক সহজ জন্য অনুমতি নিয়ম absolute:position', উপাদানের ing থেকে পরম স্থান ধারক আছে কিনা কম্পিউটিং যখন পরম স্থান উপাদান ধারক ব্যবহার করবে top, right, bottom, leftবৈশিষ্ট্য।
এইচটিএমএল 5 নথিতে বেশিরভাগ ডিআইভি সাধারণত একটি উপাদান হয়।
একটি উপাদানও এমন একটি বিষয় যা পৃষ্ঠায় একটি স্বাধীন ইউনিট হিসাবে বিবেচনা করা যেতে পারে। সাধারণ ব্যক্তির শর্তাবলী একটি ব্ল্যাকবক্সের মতো কিছু আচরণ করা যদি বোধগম্য হয় তবে তা উপাদানগুলির মতো কিছু ব্যবহার করে ।
আবার কিউএ পৃষ্ঠার উদাহরণ সহ যাচ্ছি:
#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;
}
আপনি যখন আইডি / ক্লাস ব্যবহার করতে পারেন তখন নির্বাচক হিসাবে ট্যাগ ব্যবহার করা থেকে বিরত থাকুন
প্রথমে ডিআইভি এবং স্প্যান ট্যাগগুলি ব্যতিক্রম: আপনার কখনও সেগুলি ব্যবহার করা উচিত নয়! ;) কেবল কোনও শ্রেণি / আইডি সংযুক্ত করতে তাদের ব্যবহার করুন।
এই...
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;
}
কারণ সেখানে অতিরিক্ত জটলা ডিআইভিগুলি নির্বাচককে কিছুই যোগ করে না। তারা একটি অপ্রয়োজনীয় ট্যাগ-বিধি বাধ্য করে। আপনি যদি পরিবর্তন করতে চান, উদাহরণস্বরূপ, .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পৃথক পৃষ্ঠা নম্বর লিঙ্কগুলি বলুন এবং তাদের একটি গা a় ধূসর ব্যাকগ্রাউন্ড দিন give এগুলি দৃশ্যমান হওয়ার জন্য আপনার এ জাতীয় নিয়ম থাকতে হবে:
.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 বা কম ।
আমি কীভাবে রঙ প্যালেট লিখব?
শেষ পর্যন্ত এটি ছেড়ে দিন। আপনার পুরো রঙ প্যালেট জন্য একটি ফাইল আছে। এই ফাইলটি বের করার সাথে সাথে আপনার স্টাইলের নিয়মে কিছু ব্যবহারযোগ্য রঙ-প্যালেট থাকা উচিত। আপনার রঙ প্যালেট ওভাররাইট করা উচিত। আপনি খুব উচ্চ স্তরের প্যারেন্ট উপাদান (উদা। #page) ব্যবহার করে নির্বাচকদের চেইন করেন এবং তারপরে আপনার স্টাইলকে স্বাবলম্বী নিয়ম ব্লক হিসাবে লিখুন write এটি কেবল রঙ বা আরও কিছু হতে পারে।
যেমন।
#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
color: #222; background: #fff;
border-radius: 10px;
padding: 1em;
}
ধারণাটি সহজ, আপনার রঙ প্যালেটটি বেস স্টাইলের চেয়ে আলাদা একটি স্টাইলশিট, যা আপনি ক্যাসকেড করেছেন ।
কম নাম, কম স্মৃতি দরকার, কোডটি পড়া সহজ করে তোলে
কম নাম ব্যবহার করা ভাল। আদর্শভাবে খুব সাধারণ (এবং সংক্ষিপ্ত!) শব্দ ব্যবহার করুন: পাঠ্য, বডি, শিরোনাম।
সরল শব্দের সংমিশ্রণটি আমি আরও সহজ "লম্বা" উপযুক্ত "শব্দের একটি স্যুপ থাকা সহজভাবে বুঝতে পারি: পোস্টবডি, পোস্টহেড, ইউজারিনফো ইত্যাদি to
ভোকাবুলারিটি ছোট রাখুন, এমনকি যদি আপনার স্টাইল-স্যুপটি পড়ার জন্য কিছু অচেনা লোক আসেন (কয়েক সপ্তাহ পরে নিজের মতো করুন;)) কেবল প্রতিটি নির্বাচক যেখানে ব্যবহৃত হয় সেখানে শব্দগুলি কোথায় ব্যবহৃত হয় তা কেবল বুঝতে হবে। উদাহরণস্বরূপ আমি .thisযখনই কোনও উপাদান অনুমিতভাবে "নির্বাচিত আইটেম" বা "বর্তমান আইটেম" ইত্যাদি ব্যবহার করি তখন ব্যবহার করি etc.
নিজের পরে পরিষ্কার করুন
সিএসএস লেখা খাওয়ার মতো, কখনও কখনও আপনি কোনও জগাখিচুড়ি রেখে যান। আপনি যে জগাখিচুড়ি পরিষ্কার করেছেন তা নিশ্চিত করুন বা আবর্জনা কোডটি কেবল স্তুপ করে দেবে। আপনার ব্যবহৃত ক্লাস / আইডিগুলি সরান। আপনি ব্যবহার করেন না এমন CSS বিধিগুলি সরান। নিশ্চিত করুন যে সবকিছু সুন্দর একটি টাইট এবং আপনার বিবাদী বা নকল বিধি নেই।
যদি আপনি, যেমন আমি পরামর্শ দিয়েছি, আপনার স্টাইলে কিছু ধারককে কালো-বাক্স (উপাদানগুলি) হিসাবে বিবেচনা করে, আপনার নির্বাচকগুলিতে সেই উপাদানগুলি ব্যবহার করেছেন এবং সবকিছুকে একটি ডেডিকেটেড ফাইলে রেখে দিয়েছেন (বা কোনও ফাইলকে একটি টিওসি এবং শিরোলেখ দিয়ে সঠিকভাবে বিভক্ত করা) তবে আপনার কাজ যথেষ্ট পরিমাণে সহজ ...
ফায়ারফক্স এক্সটেনশান ডাস্ট-মি সিলেক্টরের মতো একটি সরঞ্জাম আপনি ব্যবহার করতে পারেন (টিপ: এটি আপনার সাইটম্যাপ.এক্সএমএল এ নির্দেশ করুন) আপনার সিএসএস নিউক এবং কার্নিজগুলিতে লুকানো কিছু জাঙ্ক খুঁজে পেতে সহায়তা করতে।
একটি unsorted.cssফাইল রাখুন
বলুন আপনি একটি QA সাইট স্টাইল করছেন, এবং আপনার কাছে ইতিমধ্যে "উত্তর পৃষ্ঠা" এর জন্য একটি স্টাইলশিট রয়েছে, যা আমরা কল করব answers.css। আপনার যদি এখন প্রচুর নতুন সিএসএস যুক্ত করার দরকার হয় তবে এটি unsorted.cssস্টাইলশীটে যুক্ত করুন তারপরে আপনার answers.cssস্টাইলশিটে রিফ্যাক্টর ।
এর বেশ কয়েকটি কারণ:
- আপনার কাজ শেষ হওয়ার পরে এটি রিফ্যাক্টর করা দ্রুত, তারপরে এটি নিয়মগুলি অনুসন্ধান করা (এটি সম্ভবত বিদ্যমান নেই) এবং কোড ইনজেকশন করা
- আপনি এমন স্টাফ লিখবেন যা আপনি সরিয়ে ফেলবেন, ইনজেকশন কোড কেবল সেই কোডটি মুছে ফেলা আরও শক্ত করে তোলে
- মূল ফাইলটিতে সংযোজন সহজেই নিয়ম / নির্বাচক সদৃশ দিকে পরিচালিত করে
simplicity,complexity,maintenance,structureএবংrefactoring।