আমি !important
বাধা পারফরম্যান্সের পূর্বাভাস দিতে পারি না , কোনওভাবেই সহজাতভাবে নয়। তবে, যদি আপনার সিএসএসের সাথে ছাঁটাই হয় তবে !important
এটি ইঙ্গিত দেয় যে আপনি বাছাইকারী বাছাইকারীদের চেয়ে বেশি হয়ে গেছেন এবং খুব নির্দিষ্ট হয়ে গেছেন এবং আপনার পিতামাতার বাইরে চলে গেছেন বা স্পষ্টতা যুক্ত করার জন্য বাছাই করেছেন। ফলস্বরূপ, আপনার সিএসএস ফুলে উঠবে (যা কার্য সম্পাদনে বাধা সৃষ্টি করবে ) এবং বজায় রাখা কঠিন।
আপনি দক্ষ সিএসএস লিখতে চান, তাহলে আপনি হতে চান শুধুমাত্র নির্দিষ্ট হিসাবে হিসাবে আপনি হতে ও লিখতে প্রয়োজন মডুলার সিএসএস । আইডি (হ্যাশ সহ) ব্যবহার করা, নির্বাচকদের শৃঙ্খলাবদ্ধ করতে বা বাছাইকারীদের বাছাই করা থেকে বিরত থাকার পরামর্শ দেওয়া হচ্ছে।
সিএসএসে প্রিফিক্স করা আইডিগুলি #
ভয়ানকভাবে নির্দিষ্ট, যেখানে 255 ক্লাস কোনও আইডি ওভাররাইড করে না ( ফিডাল দ্বারা: @ ফাউস্ট )। আইডির একটি গভীর রাউন্ড সমস্যা রয়েছে যদিও এগুলি অনন্য হতে হবে, এর অর্থ আপনি সেগুলি নকল শৈলীর জন্য পুনরায় ব্যবহার করতে পারবেন না, তাই আপনি পুনরাবৃত্ত শৈলীর সাথে লিনিয়ার সিএসএস লেখার সমাপ্তি করুন। এটি করার ফলশ্রুতি স্কেলের উপর নির্ভর করে প্রকল্পে প্রকল্পে পরিবর্তিত হবে, তবে রক্ষণাবেক্ষণযোগ্যতা প্রচুর এবং প্রান্তিক ক্ষেত্রে, পারফরম্যান্সেও ভুগবে।
!important
শৃঙ্খলাবদ্ধতা, যোগ্যতা বা আইডি ছাড়াই আপনি কীভাবে সুনির্দিষ্টতা যুক্ত করতে পারেন (যথা #
)
এইচটিএমএল
<div class="eg1-foo">
<p class="eg1-bar">foobar</p>
</div>
<div id="eg2-foo">
<p id="eg2-bar">foobar</p>
</div>
<div class="eg3-foo">
<p class="eg3-foo">foobar</p>
</div>
সিএসএস
.eg1-foo {
color: blue;
}
.eg1-bar {
color: red;
}
[id='eg2-foo'] {
color: blue;
}
[id='eg2-bar'] {
color: red;
}
.eg3-foo {
color: blue;
}
.eg3-foo.eg3-foo {
color: red;
}
JSFiddle
ঠিক আছে, তাহলে কিভাবে কাজ করে?
প্রথম এবং দ্বিতীয় উদাহরণগুলি একই কাজ করে, প্রথমটি আক্ষরিক অর্থে একটি শ্রেণি, এবং দ্বিতীয়টি বৈশিষ্ট্য নির্বাচনকারী। ক্লাস এবং অ্যাট্রিবিউট সিলেক্টারের অভিন্ন বৈশিষ্ট্য রয়েছে। .eg1/2-bar
এর রঙ থেকে উত্তরাধিকারী না.eg1/2-foo
কারণ এর নিজস্ব নিয়ম রয়েছে।
তৃতীয় উদাহরণটি বাছাই করা বা নির্বাচকদের শৃঙ্খলাবদ্ধ করার মতো দেখায় তবে এটিও নয়। চেইনিং হ'ল যখন আপনি বাছাইকারীদের পিতামাতা, পূর্বপুরুষ, এবং এর সাথে উপস্থাপিত করেন; এটি সুনির্দিষ্টতা যুক্ত করে। যোগ্যতা সমান, তবে আপনি নির্বাচক প্রয়োগ করার উপাদানটি সংজ্ঞায়িত করেন। কোয়ালিফাইং:ul.class
এবং শৃঙ্খলাবদ্ধ:ul .class
আপনি এই কৌশলটি কী বলবেন তা আমি নিশ্চিত নই, তবে আচরণটি ইচ্ছাকৃত এবং হ'ল ডাব্লু 3 সি দ্বারা নথিভুক্ত করা হয়েছে
একই সাধারণ নির্বাচকের পুনরাবৃত্তি হওয়ার অনুমতি দেওয়া হয় এবং নির্দিষ্টতা বাড়ায়।
দুটি নিয়মের মধ্যে স্বতন্ত্রতা অভিন্ন হলে কী ঘটে?
@ বোল্টক্লক যেমন উল্লেখ করেছে , যদি একাধিক! গুরুত্বপূর্ণ ঘোষণাপত্র থাকে তবে অনুমান নির্দেশ দেয় যে সর্বাধিক সুনির্দিষ্ট ব্যক্তিকে অগ্রাধিকার দেওয়া উচিত।
নীচের উদাহরণে, উভয় .foo
এবং .bar
অভিন্ন বৈশিষ্ট্য রয়েছে, সুতরাং আচরণটি সিএসএসের ক্যাসকেডিং প্রকৃতির হয়ে পড়ে, যার মাধ্যমে সিএসএসে ঘোষিত শেষ বিধিটি প্রাধান্য দাবি করে .foo
।
এইচটিএমএল
<div>
<p class="foo bar">foobar</p>
</div>
সিএসএস
.bar {
color: blue !important;
}
.foo {
color: red !important;
}
JSFiddle