Different Degrees Of Custom Property Usage

بازنشر افلاطون

دنبال: 0

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

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

تصور کنید کارتی مانند این دارید (البته برای نمایش ساده شده):

.card { background: hsl(200deg 15% 73%); border: 4px solid rgb(255 255 255 / 0.5); padding: 2rem; border-radius: 8px;
}
.card > h2 { margin: 0 0 1rem 0; border-bottom: 3px solid rgba(0 0 0 / 0.2);
}

پایان.

اما هنگامی که به ناچار تغییراتی در کارت ایجاد می کنید، به تنهایی می توانید این قوانین را نادیده بگیرید. یک رویکرد CSS Custom Property می تواند به صورت زیر باشد:

.card { --card-background: hsl(200deg 15% 73%); --card-border: 4px solid rgb(255 255 255 / 0.5); --card-padding: 2rem; --card-border-radius: 8px; --card-title-margin: 0 0 1rem 0; --card-title-border: 3px solid rgba(0 0 0 / 0.2); background: var(--card-background); border: var(--card-border); padding: var(--card-padding); border-radius: var(--card-border-radius);
}
.card > h2 { margin: var(--card-title-margin); border-bottom: var(--card-title-border);
}

در حال حاضر کمی پرمخاطب تر، اما ببینید وقتی می خواهیم یک تغییر انجام دهیم چه اتفاقی می افتد:

.card-variation { --card-background: purple; --card-padding-block: 2.5rem; --card-title-margin: 0 0 2rem 0;
}

در اینجا سه مزیت واضح وجود دارد:

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

کمتر پرمخاطب با بک گراند

به جای اینکه ویژگی های سفارشی را در بالا اعلام کنم و سپس از آنها درست در زیر استفاده کنم، می توانم هر دو را همزمان به این صورت انجام دهم:

.card { background: var(--card-background, hsl(200deg 15% 73%)); border: var(--card-border, 4px solid rgb(255 255 255 / 0.5)); padding: var(--card-padding, 2rem); border-radius: var(--card-border-radius, 8px);
}
.card > h2 { margin: var(--card-title-margin, 0 0 1rem 0); border-bottom: var(--card-title-border, 3px solid rgba(0 0 0 / 0.2));
}

حالا اگر چیزی شبیه به --card-background اتفاقاً تنظیم می شود، در اینجا مقدار بازگشتی را لغو می کند. من این را کاملاً دوست ندارم، زیرا به معنای عناصر است بالاتر .card می تواند آن را نادیده بگیرد. ممکن است این همان چیزی باشد که شما می خواهید، اما دقیقاً مشابه اعلام مقادیر در the نیست .card سطح برای شروع. در اینجا نظرات قوی وجود ندارد.

شکستن آن حتی بیشتر

یک مثال در اینجا این است که ممکن است بخواهید به صورت جداگانه padding را کنترل کنید.

.card { --card-padding-block: 2rem; --card-padding-inline: 2rem; --card-padding: var(--card-padding-block) var(--card-padding-inline); padding: var(--card-padding);
}

حالا اگر من بخواهم، یک تغییر می تواند فقط بخشی از بالشتک را کنترل کند:

.card-variation { --card-padding-inline: 3rem;
}

باید مواظب باشی با این حال، گوچا بزرگ. به این معنی که اگر همه اینها را در ریشه اعلام کنید، این کار نمی‌کند، زیرا آن ویژگی‌های تودرتو قبلاً حل شده‌اند. اما تا زمانی که برای اولین بار اعلام شده است .card، اینجا خوب میشی

خیلی دور؟

فرض کنید که می‌خواهید کنترلی فوق‌العاده بر هر بخش از یک ارزش داشته باشید. مثلا:

html { --color-1-h: 200deg; --color-1-s: 15%; --color-1-l: 73%; --color-1-hsl: var(--color-1-h) var(--color-1-s) var(--color-1-l); --color-1: hsl(var(--color-1-hsl));
}

که یک جور هایی تمیز است، اما به احتمال زیاد خیلی دور است. رنگ ها تقریباً به طور قطع در ریشه مشخص می شوند و به حال خود رها می شوند، بنابراین گوچا بزرگ نادیده گرفتن ویژگی های فرزند سطح پایین را غیرممکن می کند. علاوه بر این، اگر شما یک --color-1، احتمالاً یک 2-9 (یا بیشتر) نیز دارید که همه خوب و خوب است زیرا جادوی طراحی بسیار ظریف تری در سیستم رنگی نسبت به دستکاری های ساده ریاضی قطعات رنگ وجود دارد.

سیستم های طراحی قابل تحویل؟

شکی نیست که Tailwind از محبوبیت زیادی برخوردار بوده است. از یک رویکرد اتمی استفاده می کند که در آن مجموعه ای از کلاس های HTML هر کدام یک ویژگی را کنترل می کنند. من استدلال می کنم که بخشی از این محبوبیت به دلیل این واقعیت است که اگر از بین این کلاس های از پیش پیکربندی شده انتخاب کنید، طراحی نسبتاً خوب به پایان می رسد. شما نمی توانید از ریل خارج شوید. شما در حال انتخاب از میان مجموعه محدودی از مقادیری هستید که برای خوب به نظر رسیدن طراحی شده اند.

من تا آنجا پیش نمی روم که بگویم یک رویکرد سنگین مبتنی بر ویژگی های سفارشی برای یک ظاهر طراحی دقیقاً یکسان است. به عنوان مثال، شما همچنان باید به جای اعمال سبک مستقیم به عنصر HTML، به یک انتزاع نام کلاس فکر کنید. اما، ممکن است از برخی از همان محدودیت ها/محدودیت هایی برخوردار باشد که Tailwind و دیگر رویکردهای کلاس اتمی را مطلوب می کند. اگر فقط می توانید از یک مجموعه از پیش تعریف شده انتخاب کنید --spacing-x ارزش های، --color-x ارزش ها و --font-x ارزش‌ها، ممکن است به طراحی منسجم‌تری نسبت به آنچه در غیر این صورت می‌رسید دست پیدا کنید.

من شخصاً دریافته‌ام که گام برداشتن به سمت یک سیستم طراحی که بیشتر بر اساس ویژگی‌های سفارشی است، احساس خوبی دارد - اگر هیچ چیز دیگری برای مدیریت کردن تغییرات و نادیده گرفتن معقول‌تر باشد.

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

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

هزینه قابل درک

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

کد MY که از ویژگی های سفارشی CSS برای انتزاع چیزها استفاده می کند: کامل، خوب، خوانا

کد شما که از ویژگی های سفارشی CSS برای انتزاع چیزها استفاده می کند: آشفته، غیرممکن برای درک، من می میرم

- کریس کویر (@chriscoyier) فوریه 16، 2021