مع كل الحديث في الآونة الأخيرة عن إمكانية استخدام CSS Grid ، فقد جعلني أفكر: ما هي ميزات CSS المدهشة الأخرى التي يمكنني استخدامها الآن؟ متغيرات CSS هي تلك التي نشأت على الفور.
لقد مضى وقت طويل منذ أن سمعت أي شيء عن متغيرات CSS وتضيف مجموعة أدوات جديدة بالكامل وطريقة تفكير في تطوير الواجهة الأمامية التي تثير حماسي.
متغيرات CSS تتعقب منذ بضع سنوات الآن ولكن لا يبدو أنها تستخدم على نطاق واسع. مع شعبية المعالجات المسبقة مثل Sass ، خدش مطورو الواجهة الأمامية تلك الحكة المتغيرة منذ فترة طويلة.
كنت متحمسًا لأول مرة من قبل المتغيرات CSS في عام 2014 ومنذ ذلك الحين غطست داخل وخارج مجال اهتماماتي. أنا الآن فقط أفكر في الحصول عليها في مواقع الإنتاج وسأريكم مدى سهولة وسهولة استخدامها.
يعتبر الإعلان عن الملكية المخصصة أمرًا بسيطًا: نحن بحاجة إلى إنشاء الموقع الذي نريده فقط وإلحاق شرطيين إلى بدايته. يمكن الإعلان عن ذلك في أي مكان ولكن إضافته إلى: الجذر يبدو أنه نهج جيد في الوقت الحالي.
--my-reusable-value: 20px;استخدام الخاصية بسيطة جدا كذلك. نقوم بالوصول إليه من خلال الدالة var () ونستخدم الخاصية التي أعلناها أعلاه.
padding: var(--my-reusable-value);أليس هذا بسيط ومجد؟
متغيرات CSS سهلة الاستخدام وسهلة التذكر. التحدي الأكبر مع متغيرات CSS (كما هو الحال مع معظم CSS) هو معرفة الوقت والمكان المناسبين لاستخدامهما. إن رميهم عشوائياً هو طريقة إطلاق نار مؤكدة لخلق فوضى من ورقة الأنماط ، ومن المحتمل أن تصبح هذه المتغيرات في تصحيح الأخطاء أكثر صعوبة.
ينبغي النظر في حالات الاستخدام السليم والاستراتيجيات لاستخدامها ، وهذا هو المكان الذي ينبغي أن تركز عليه غالبية جهودك.
في المثال التالي ، سأوضح لك مثالًا أساسيًا عن كيفية إنشاء مكون استجابة في الوقت الحالي باستخدام متغيرات Sass. ثم سأوضح لك كيف يمكن تحسينه باستخدام متغيرات CSS بطريقة غير ممكنة باستخدام معالج ما قبل المعالج. هذه حالة استخدام محددة لا تنطبق على كل طريقة يتم فيها استخدام المتغيرات ولكنها توضح كيف يمكن استخدام متغيرات CSS بشكل مختلف.
انظر القلم متغيرات CSS - حالة استخدام متجاوبة بدون متغيرات CSS بقلم آدم هيوز ( @فقدت عقلي ) على CodePen .
عند استخدام Sass ، هناك عدد قليل من المنهجيات المختلفة التي جربتها. إن الانتقال إلى الإصدار الحالي هو وضع استعلامات الوسائط داخل كتل CSS التي أرغب في تغييرها. هنا يمكنني استخدام متغير أو CSS قياسي أو mixin أو امتداد لتعديل هذا العنصر دون تشتيت أنماط المكون في كل مكان.
مشكلة واحدة في هذا هو وجود استعلامات متعددة للوسائط والكثير من المتغيرات التي هي ذات صلة ولكن لا. يمكنني استخدام الخرائط للمتغيرات التي من شأنها أن تعطي المزيد من التنظيم ولكن أعتقد أن المشكلة الرئيسية هي أننا نستخدم متغيرات متعددة لتحديد خاصية واحدة. هذا فقط يشعر خطأ.
يتم استخدام متغيرات ساس في وقت مبكر مما يعني أننا يجب أن نخطط كل طريقة سوف نستخدمها. إنها تجعل التطوير أسهل ولكن من الناحية الفنية لا تزودنا بأي قوى خارقة جديدة.
انظر القلم متغيرات CSS - حالة استخدام متجاوبة بقلم آدم هيوز ( @فقدت عقلي ) على CodePen .
لا تحتاج متغيرات CSS إلى إعلان مقدمًا ، فهي ديناميكية. هذا مفيد بطريقة مختلفة جدا. يمكننا الآن تغيير المتغيرات بشكل مشروط من أي مكان وفي سياقات محددة مثل استعلامات الوسائط.
من خلال عرض أنماط استعلام الوسائط الخاصة بنا مباشرةً ، يمكننا تقليل كمية طلبات البحث عن الوسائط المنتشرة حول التصميم المتجاوب. كما أنه يوفر طريقة جميلة ونظيفة لرؤية تباعد عام وتصميم الطباعة عبر تنسيقات مختلفة.
أعتقد أن التصاميم سريعة الاستجابة والتطبيق هي حالتان ممتازتان للاستخدام لمتغيرات CSS ، لكن هناك العديد من الاحتمالات.
متغيرات ساس ومتغيرات CSS هما حيوانان مختلفان ، كل منهما لهما مؤثرات خاصة بهما.
نظرًا لشعبية Sass والطبيعة الأكثر برمجية لـ Sass ، فقد تطورت أنماط تنظيمية أكثر عمقًا بمرور الوقت. أنا أحب على وجه الخصوص خرائط ساس والجمع بين المتغيرات من النوع المماثل في الخرائط. يبدو أن الألوان والأحجام والاختصارات للمسارات هي خيارات شائعة لإدراجها في الخرائط.
بسبب الاستخدام الأصغر نسبيًا لمتغيرات CSS ، لم تتطور أفضل الممارسات حتى الآن. لا يمكن استخدام الخرائط والمصفوفات بنفس الطريقة في CSS ، لذلك فإن هذه الأنماط التنظيمية الجديدة يجب أن تكون مبتكرة وحل المشكلات بطريقة مختلفة عن Sass.
متغيرات CSS يتم التعامل معها ديناميكيًا من خلال المتصفح في وقت التشغيل ، بينما يتم استخدام متغيرات Sass عند تجميع CSS.
هذه هي نقطة البيع الأساسية لمتغيرات CSS بالنسبة لي. سيكون من المثير للاهتمام أن نرى كيف يستخدم الناس هذه الميزة مع مرور الوقت وما إذا كانت ستحقق قدرتها.
أنا شخصياً أعتقد أنه كلما زادت الأشياء التي يمكن أن نزيلها من Webpack ، و Gulp ، وأي إطار عمل جديد ، أصبح الآن أفضل. إن امتلاكك لميزات جديدة ومثيرة للمتصفح يعني أننا لا نحتاج إلى الاعتماد على مجموعات التجميع وجافا سكريبت للقيام بمهام يشعر بها المطورون. سأخاطر بتخمين أن نسبة عالية من مطوري الواجهة الأمامية يستخدمون متغيرات في CSS الخاصة بهم بطريقة أو بأخرى ، لذا فإن كل شخص يستخدم هذه الميزة الأساسية يبدو وكأنه شيء معقول للقيام به. إنه يعني شيئًا واحدًا أقل في خطوة البناء (التي أعتقد أننا نتفق جميعًا على أنها تصبح هائلة جدًا هذه الأيام) والمزيد من الاتساق عبر الويب.
يبدو الدعم رائعًا مع استثناء واحد صارخ: IE 11. معظم المتصفحات الحديثة تدعم متغيرات CSS التي تحتوي على عدد قليل من الخلل.
في 78.11 ٪ هذا أعلى من CSS الشبكة (في وقت كتابة هذا التقرير) ولكن دعم IE11 يمكن أن يكون مشكلة.
أعتقد أن الوقت قد حان الآن. لن يكون دعم IE11 أفضل ، ونعرف من الإصدارات السابقة من Windows أن الأمر يستغرق وقتًا طويلاً حتى يتمكن بعض الأشخاص من الترقية. لكن الدعم عبر المتصفحات الحديثة رائع مما يعني أننا يجب أن نبحث عن متغيرات CSS وتجربة الاحتمالات.
هذا لا يعني أنه لا ينبغي لنا أن ننسى مسؤوليتنا عن دعم المتصفح القديم. يجب النظر في نظام احتياطي أساسي باستخدام علامة دعم ، أو حتى polyfill ، للمتصفحات القديمة ، حتى أكثر إذا كان استخدام موقعك الفعلي أكثر انحرافًا إلى المتصفحات القديمة.
إنه وقت مثير لتطوير الواجهة الأمامية ، وأنا لا أستطيع الانتظار حتى تستخدم المزيد من هذه التقنيات في مواقع الإنتاج الخاصة بي.