5 تمرین CSS که باید از آنها اجتناب کنید

Summarize this content to 400 words in Persian Lang
سلام! مدتی از آخرین مقاله من می گذرد و من دلم برای ارتباط با همه شما تنگ شده است. خوشحالم که برمی گردم و نکات مفیدی را برای سفر توسعه دهنده وب شما به اشتراک می گذارم!

امروز بیایید بررسی کنیم پنج تمرین CSS که باید از آنها اجتناب کنید. امیدوارم این اطلاعات برای شما مفید باشد! بریم 🚀

1. انتخابگرهای بسیار خاص

نوشتن انتخابگرهای بسیار خاص می تواند مدیریت و اشکال زدایی CSS شما را سخت تر کند. انتخابگرها را ساده و قابل استفاده مجدد نگه دارید.

اجتناب کنید:

#header .nav .link.active:hover {
color: red;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بهتر:

.nav-link:hover {
color: red;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای جلوگیری از پیچیدگی های غیر ضروری، از ویژگی فقط در جایی استفاده کنید که لازم است.

2. بارگذاری بیش از حد انتخابگرهای جهانی

استفاده از انتخابگرهای جهانی یا بیش از حد گسترده می تواند به طور ناخواسته بر بخش های بزرگی از سایت شما تأثیر بگذارد.

اجتناب کنید:

* {
margin: 0;
padding: 0;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بهتر:

html, body {
margin: 0;
padding: 0;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای جلوگیری از عوارض جانبی غیر منتظره، استفاده از انتخابگرهای جهانی را کاهش دهید.

3. رنگ ها یا مقادیر هاردکدینگ

هاردکد به روز رسانی را دشوار می کند. به جای استفاده از مقادیر تصادفی در همه جا، از متغیرها برای ثبات استفاده کنید.

اجتناب کنید:

.primary-btn {
color: #3498db;
margin: 20px;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بهتر:

:root {
–primary-color: #3498db;
–default-margin: 20px;
}
.primary-btn {
color: var(–primary-color);
margin: var(–default-margin);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4. واحدهای ناسازگار

مخلوط کردن واحدها (به عنوان مثال، px، rem، %) منجر به طراحی های ناسازگار و مشکلات پاسخگویی می شود.

اجتناب کنید:

font-size: 16px;
margin: 1rem;
width: 50%;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بهتر:

font-size: 1rem;
margin: 1rem;
width: 50%;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

از واحدهای ثابت مانند rem برای فونت ها و % برای طرح بندی استفاده کنید.

5. فراموش کردن سازگاری مرورگر

استفاده از ویژگی های جدید CSS بدون در نظر گرفتن پشتیبانی مرورگر می تواند طراحی ها را برای برخی از کاربران خراب کند.

اجتناب کنید:

div {
aspect-ratio: 16 / 9;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بهتر:

@supports (aspect-ratio: 1) {
div {
aspect-ratio: 16 / 9;
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه گیری

توسط اجتناب از این شیوه های رایج CSS، می توانیم سبک های تمیزتر و کارآمدتر بنویسیم و از صفحات وب با کارایی بالا اطمینان حاصل کنیم. پیروی از بهترین شیوه ها نه تنها تجربه کاربر را بهبود می بخشد بلکه کد ما را نیز می سازد خواندنی تر و قابل نگهداری برای تیم ما

امیدوارم این پست برای شما مفید بوده باشد! شما را در مقاله بعدی می بینیم!

#header .nav .link.active:hover {
    color: red;
}

.nav-link:hover {
    color: red;
}

* {
    margin: 0;
    padding: 0;
}

html, body {
    margin: 0;
    padding: 0;
}

.primary-btn {
    color: #3498db;
    margin: 20px;
}

:root {
    --primary-color: #3498db;
    --default-margin: 20px;
}
.primary-btn {
    color: var(--primary-color);
    margin: var(--default-margin);
}

font-size: 16px;  
margin: 1rem;  
width: 50%;

font-size: 1rem;  
margin: 1rem;  
width: 50%;

div {
    aspect-ratio: 16 / 9;
}

@supports (aspect-ratio: 1) {
    div {
        aspect-ratio: 16 / 9;
    }
}