طريقة واحدة للعمل معها خصائص مخصصة هو اعتبارها رموزًا مميزة للتصميم. الألوان والمسافات والخطوط وما إلى ذلك. يمكنك تعيينها في جذر الصفحة واستخدامها في 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 المخصصة مثل:
.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 يمكن تجاوزه. قد يكون هذا هو ما تريده ، لكنه لا يماثل تمامًا إعلان القيم في .card المستوى لتبدأ به. لا توجد آراء قوية هنا.
كسرها أكثر
مثال هنا هو أنك قد ترغب في التحكم في المساحة المتروكة بشكل فردي.
.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 في خاصية واحدة لكل منها. أود أن أزعم أن بعض هذه الشعبية مدفوعة بحقيقة أنه إذا اخترت من هذه الفئات المعدة مسبقًا ، فإن التصميم ينتهي به الأمر إلى حد ما. لا يمكنك الخروج عن القضبان. أنت تختار من بين مجموعة محدودة من القيم التي تم تصميمها لتبدو جيدة.
لن أذهب إلى حد القول إن أسلوب Custom Properties الثقيل في التصميم هو نفسه تمامًا. على سبيل المثال ، ستظل بحاجة إلى التفكير في تجريد اسم فئة بدلاً من تطبيق النمط مباشرة على عنصر HTML. ولكن ، قد تتمتع ببعض القيود / القيود نفسها التي تجعل Tailwind ومقاربات الفئة الذرية الأخرى مرغوبة. إذا كان يمكنك فقط الاختيار من بين مجموعة محددة مسبقًا من --spacing-x القيم، --color-x القيم و --font-x القيم ، قد تحقق تصميمًا أكثر تماسكًا مما كنت ستحصل عليه بخلاف ذلك.
شخصيًا ، وجدت أن نظام التصميم الذي يعتمد بشكل أكبر على الخصائص المخصصة يبدو جيدًا - إذا لم يكن هناك شيء آخر لجعل الاختلافات والتجاوزات أكثر منطقية للإدارة.
ماذا عن أنظمة تصميم الطرف الثالث التي تقدم ما يقدمونه على أنه ... لا شيء سوى مجموعة كبيرة من الخصائص المخصصة لاستخدامها في وقت فراغك؟
لا يجب أن تكون مخرجات الطرف الثالث هي حوض المطبخ بالكامل مثل هذا. على سبيل المثال ، آدم أرجيل الانتقال يوفر "Hackpack" هذه ليست سوى خصائص مخصصة لمساعدي الرسوم المتحركة الانتقالية.
تكلفة الفهم
أحد النكسات التي سمعتها ضد هذا النهج الشامل في الخصائص المخصصة هو فهم الوافدين الجدد. إذا لصحتك! كتب النظام ، ربما يكون منطقيًا تمامًا بالنسبة لك. لكنه تجريد إضافي فوق CSS. يتم مشاركة معرفة CSS من قبل الجميع ، ولا يتم مشاركة معرفة الأنظمة المفصلة إلا من قبل الأشخاص الذين يعملون بنشاط عليها.
إن الانتقال إلى نظام جديد باستخدام الخصائص المخصصة بشكل كبير سيكون له منحنى تعليمي.
مقاطع فيديو
المصدر: https://css-tricks.com/different-degrees-of-custom-property-usage/
