إدارة الحالة (State Management) بخفة: قوة متغيرات CSS في صفحات الهبوط
أكيد مريت بالموقف ده: بتبني صفحة هبوط (Landing Page) بسيطة، وبتحتاج تغير لون زرار أو تخفي عنصر بناءً على اختيار المستخدم. أول حاجة بتيجي في بالك هي إنك تستخدم مكتبة ضخمة زي Redux أو حتى Context API في React. بس لحظة، هو ده فعلاً اللي الصفحة محتاجاه؟ غالباً لأ. استخدام مكتبات تقيلة لمجرد تغيير بسيط بيخلي الكود بتاعك معقد (Over-engineering) وبيأثر على سرعة الصفحة.
النهاردة هنتكلم عن تكنيك عبقري وبسيط بيحول متغيرات الـ CSS Custom Properties (أو المعروفة بـ CSS Variables) لأداة قوية لإدارة الحالة (State Management) في صفحات الهبوط، من غير أي مكتبات خارجية.
Table of contents [Show]
ليه نستخدم CSS Custom Properties كـ State؟
الفكرة كلها إن المتغيرات في CSS مش مجرد قيم للألوان أو الخطوط، دي مساحة تخزين صغيرة وسريعة جداً داخل المتصفح. لما بتغير قيمة متغير CSS، المتصفح بيعمل إعادة رسم (Repaint) للعناصر اللي بتستخدم المتغير ده بشكل لحظي. ده معناه إنك لو ربطت الحالة (State) بمتغير CSS، كأنك عملت نظام تفاعلي خفيف جداً (Lightweight Interaction) بأقل مجهود برمجي.
إعداد المتغيرات في ملف الـ CSS
البداية دايماً من الـ Root. بنعرف المتغيرات اللي هنحتاجها كحالة افتراضية للتطبيق بتاعنا:
:root {
--primary-color: #3498db;
--button-padding: 10px 20px;
--display-mode: block;
}
.box {
background-color: var(--primary-color);
padding: var(--button-padding);
display: var(--display-mode);
}
تغيير الحالة بواسطة JavaScript بسطر واحد
السحر بيبدأ لما نحب نغير القيمة دي من خلال الـ JavaScript. بدل ما نعدل الـ Style الخاص بكل عنصر، إحنا بنعدل قيمة المتغير في الـ Root، وأي عنصر بيستخدم المتغير ده هيتحدث لوحده:
// تغيير الحالة بضغطة زر
document.documentElement.style.setProperty('--primary-color', '#e74c3c');
document.documentElement.style.setProperty('--display-mode', 'none');
تخيل حجم الكود اللي وفرته! بدلاً من كتابة Logic معقد عشان تمسك كل عنصر وتغير الـ Class أو الـ Style، إنت بتتحكم في "ثوابت" الصفحة كلها من مكان واحد. ده بيفيدك جداً في عمل الـ Dark Mode أو الـ Theming بشكل عام.
استخدامها في الـ UI/UX
تقدر تستخدم الطريقة دي في حاجات كتير زي:
- التحكم في سرعة الأنميشن (Animation Duration).
- تغيير أحجام الخطوط بناءً على تفضيلات المستخدم.
- إخفاء وإظهار الـ Modals أو الـ Popups.
- تبديل الألوان (Theming) بين نمطين مختلفين.
خاتمة ونصيحة من أخ
يا صديقي، البرمجة مش بس إنك تستخدم أحدث المكتبات، البرمجة هي إنك تختار الأداة المناسبة للمشكلة. الـ CSS Custom Properties أداة مظلومة ومسحور فيها، وبتخليك تكتب كود أنظف وأسرع. نصيحتي ليك: قبل ما تحمل مكتبة جديدة، اسأل نفسك "هل الـ CSS لوحده يقدر يحل المشكلة دي؟". غالباً الإجابة هتكون أيوة. اتعلم أساسيات الـ CSS كويس، لأنها هي اللي بتبني الأساس القوي لأي موقع ناجح.
اتمنى يكون الشرح بسيط وواضح، وجرب تستخدم التكنيك ده في مشروعك الجاي وقولي النتيجة!
