10 روش CSS تغییر دهنده بازی که کد شما را ارتقا می دهد

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

💡 نکات هفتگی CSS، قطعه کد و آموزش را مستقیماً در صندوق ورودی خود دریافت کنید – 100٪ رایگان!

1. واحدها: رهایی از پیکسل ها

راه اشتباه:

.container {
width: 1200px;
font-size: 16px;
margin: 20px;
}

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

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

راه بهتر:

.container {
width: 90vw;
max-width: 75rem;
font-size: 1rem;
margin: 1.25rem;
}

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

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

استفاده از واحدهای نسبی باعث می شود طراحی شما پاسخگو و قابل دسترس باشد. REM ها با اندازه فونت ترجیحی کاربر مقیاس می شوند، در حالی که واحدهای نمای دید تضمین می کنند که چیدمان شما با اندازه های مختلف صفحه سازگار است. همیشه در نظر داشته باشید که کاربران ممکن است بزرگنمایی کنند یا اندازه فونت پایه خود را تغییر دهند.

2. CSS Reset: شروع تازه

راه اشتباه:

/* Starting without any reset, relying on browser defaults */

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

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

راه بهتر:

*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}

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

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

تنظیم مجدد CSS رندر ثابت در مرورگرهای مختلف را تضمین می کند. را box-sizing: border-box ویژگی محاسبات عرض را با گنجاندن بالشتک و حاشیه در عرض کل عنصر بصری می کند.

3. Flexbox در مقابل Float: راه حل های چیدمان مدرن

راه اشتباه:

.container {
overflow: hidden;
}
.sidebar {
float: left;
width: 300px;
}
.main {
margin-left: 320px;
}

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

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

راه بهتر:

.container {
display: flex;
gap: 1.25rem;
}
.sidebar {
flex-basis: 18.75rem;
flex-shrink: 0;
}
.main {
flex-grow: 1;
}

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

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

Flexbox طرح‌بندی‌های قدرتمند و انعطاف‌پذیر را با کد کمتر ارائه می‌دهد. فاصله، تراز، و پاسخگویی را با ظرافت بیشتری نسبت به عناصر شناور مدیریت می کند و در مرورگرهای مدرن بهتر پشتیبانی می شود.

4. مدیریت رنگ: متغیرها برای سازگاری

راه اشتباه:

.button {
background-color: #007bff;
}
.link {
color: #007bff;
}

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

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

راه بهتر:

:root {
–primary-color: #007bff;
–primary-hover: #0056b3;
}

.button {
background-color: var(–primary-color);
}
.button:hover {
background-color: var(–primary-hover);
}
.link {
color: var(–primary-color);
}

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

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

متغیرهای CSS (ویژگی‌های سفارشی) حفظ رنگ‌های ثابت را آسان‌تر می‌کنند و تغییر تم را فعال می‌کنند. آنها همچنین کد شما را قابل نگهداری تر می کنند و خطر ناهماهنگی را کاهش می دهند.

5. پرسش های رسانه ای: رویکرد اول موبایل

راه اشتباه:

/* Desktop-first approach */
.container {
width: 1200px;
}
@media (max-width: 768px) {
.container {
width: 100%;
}
}

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

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

راه بهتر:

/* Mobile-first approach */
.container {
width: 100%;
}
@media (min-width: 48em) {
.container {
width: 90%;
max-width: 75rem;
}
}

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

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

طراحی اول موبایل تضمین می‌کند که سبک‌های پایه شما برای دستگاه‌های کوچک‌تر کار می‌کنند، سپس به تدریج تجربه را برای نمایشگرهای بزرگ‌تر افزایش می‌دهند. این رویکرد معمولاً منجر به کد تمیزتر و قابل نگهداری تر می شود.

6. ویژگی: ساده نگه داشتن آن

راه اشتباه:

#header div.navigation ul li a.active {
color: blue;
}

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

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

راه بهتر:

.nav-link–active {
color: var(–primary-color);
}

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

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

ویژگی کمتر باعث می شود سبک ها نگهداری شوند و در صورت نیاز نادیده گرفته شوند. از قرارداد نامگذاری BEM یا روش های مشابه برای ایجاد کلاس های معنی دار و خاص بدون تودرتو عمیق استفاده کنید.

7. تایپوگرافی: اندازه فونت سیال

راه اشتباه:

h1 {
font-size: 32px;
}

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

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

راه بهتر:

h1 {
font-size: clamp(1.75rem, 5vw, 2.5rem);
line-height: 1.2;
}

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

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

با استفاده از clamp() تایپوگرافی پاسخگو را ایجاد می کند که به راحتی بین اندازه های حداقل و حداکثر مقیاس می شود. این نیاز به درخواست های چند رسانه ای را فقط برای اندازه فونت از بین می برد.

8. طرح بندی شبکه: سیستم های کارت مناسب

راه اشتباه:

.card {
width: calc(33.33% – 20px);
float: left;
margin: 10px;
}

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

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

راه بهتر:

.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
gap: 1.25rem;
}

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

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

شبکه CSS با auto-fit و minmax() طرح‌بندی‌های پاسخگو را ایجاد می‌کند که به طور خودکار با فضای موجود تنظیم می‌شوند. این رویکرد به کد کمتری نیاز دارد و موارد لبه را بهتر مدیریت می کند.

9. انیمیشن: بهینه سازی عملکرد

راه اشتباه:

.element {
transition: all 0.3s ease;
}

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

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

راه بهتر:

.element {
transition: transform 0.3s ease, opacity 0.3s ease;
will-change: transform;
}

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

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

به جای استفاده، ویژگی های دقیق را برای متحرک سازی مشخص کنید all، و استفاده کنید transform و opacity در صورت امکان زیرا برای عملکرد بهینه شده اند. استفاده کنید will-change کمتر برای عناصر متحرک اغلب.

10. ویژگی های سفارشی برای انواع کامپوننت

راه اشتباه:

.button-primary {
background: blue;
padding: 10px 20px;
}
.button-secondary {
background: gray;
padding: 10px 20px;
}

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

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

راه بهتر:

.button {
–button-bg: var(–primary-color);
–button-padding: 0.625rem 1.25rem;

background: var(–button-bg);
padding: var(–button-padding);
}

.button–secondary {
–button-bg: var(–secondary-color);
}

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

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

استفاده از ویژگی‌های سفارشی CSS برای انواع، تکرار کد را کاهش می‌دهد و کامپوننت‌ها را قابل نگهداری‌تر می‌کند. همچنین ایجاد تغییرات ثابت در سیستم طراحی شما را آسان تر می کند.

نتیجه گیری

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

.container {
    width: 1200px;
    font-size: 16px;
    margin: 20px;
}

.container {
    width: 90vw;
    max-width: 75rem;
    font-size: 1rem;
    margin: 1.25rem;
}

/* Starting without any reset, relying on browser defaults */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

.container {
    overflow: hidden;
}
.sidebar {
    float: left;
    width: 300px;
}
.main {
    margin-left: 320px;
}

.container {
    display: flex;
    gap: 1.25rem;
}
.sidebar {
    flex-basis: 18.75rem;
    flex-shrink: 0;
}
.main {
    flex-grow: 1;
}

.button {
    background-color: #007bff;
}
.link {
    color: #007bff;
}

:root {
    --primary-color: #007bff;
    --primary-hover: #0056b3;
}

.button {
    background-color: var(--primary-color);
}
.button:hover {
    background-color: var(--primary-hover);
}
.link {
    color: var(--primary-color);
}

/* Desktop-first approach */
.container {
    width: 1200px;
}
@media (max-width: 768px) {
    .container {
        width: 100%;
    }
}

/* Mobile-first approach */
.container {
    width: 100%;
}
@media (min-width: 48em) {
    .container {
        width: 90%;
        max-width: 75rem;
    }
}

#header div.navigation ul li a.active {
    color: blue;
}

.nav-link--active {
    color: var(--primary-color);
}

h1 {
    font-size: 32px;
}

h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    line-height: 1.2;
}

.card {
    width: calc(33.33% - 20px);
    float: left;
    margin: 10px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1.25rem;
}

.element {
    transition: all 0.3s ease;
}

.element {
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform;
}

.button-primary {
    background: blue;
    padding: 10px 20px;
}
.button-secondary {
    background: gray;
    padding: 10px 20px;
}

.button {
    --button-bg: var(--primary-color);
    --button-padding: 0.625rem 1.25rem;

    background: var(--button-bg);
    padding: var(--button-padding);
}

.button--secondary {
    --button-bg: var(--secondary-color);
}