সিএসএস হেল

পিক্সেল এবং শতাংশের বাইরে একটি জীবন আছে। ব্যবহার px নির্দিষ্ট ক্ষেত্রে ইউনিটগুলি ঠিক আছে, আসল ভুলটি আপেক্ষিক ইউনিটের পরিবর্তে পরম ব্যবহার করছে।

p {
font-size: 16px;
line-height: 20px;
margin-bottom: 8px;
}

পরিবর্তনশীল ফন্টগুলি দুর্দান্ত, তবে এর অপ্রয়োজনীয় ব্যবহার font-variation-settings অবশেষে আপনার শৈলী ভাঙ্গা হবে.

.bold {
font-variation-settings: 'wght'700;
}
.italic {
font-variation-settings: 'ital'1;
}

নির্দিষ্টতা নির্ধারণ করে, কোন CSS নিয়ম ব্রাউজার দ্বারা প্রয়োগ করা হয়। বিকাশকারীরা প্রায়শই অতিরিক্ত নির্দিষ্ট নির্বাচক লেখেন শুধুমাত্র 10000% নিশ্চিত হওয়ার জন্য যে তাদের নিয়মগুলি হবে নিয়ম.

div#my-popup div span.my-radiocheckbox-label-text {
color: #666;
}
#some-id .label {
color: #111 !important;
}

প্রায় প্রতিটি নির্বাচকের জন্য প্রাথমিক ফন্ট নির্দিষ্ট করা একটি ভাল পদ্ধতি নয়, তবুও আমি প্রায়শই এই সমস্যায় পড়ি।

.my-class-1 {
font-family: Roboto;
}
.my-class-2 {
font-family: Roboto;
}
p {
font-family: Roboto;
}
.my-class-3 {
font-family: Roboto;
}
footer {
font-family: Roboto;
}

ব্রাউজার বিক্রেতারা কখনও কখনও পরীক্ষামূলক বা ননস্ট্যান্ডার্ড CSS বৈশিষ্ট্য এবং জাভাস্ক্রিপ্ট এপিআইতে উপসর্গ যোগ করে, যাতে বিকাশকারীরা নতুন ধারণা নিয়ে পরীক্ষা করতে পারে — তাত্ত্বিকভাবে — তাদের পরীক্ষা-নিরীক্ষার উপর নির্ভর করা থেকে বাধা দেয় এবং তারপর স্ট্যান্ডার্ডাইজেশন প্রক্রিয়া চলাকালীন ওয়েব ডেভেলপারদের কোড ভাঙতে পারে।

.my-class {
-webkit-transition: left 400ms ease-out;
-webkit-transition: left 400ms ease-out;
-moz-transition: left 400ms ease-out;
-ms-transition: left 400ms ease-out;
-o-transition: left 400ms ease-out;
transition: left 400ms ease-out;
}