طريقة كتابة CSS نظيف بدون تكرار أو فوضى
بعد أسابيع من العمل على مشروع ويب، تصبح ملفات CSS مليئة بتعريفات متكررة، أسماء طبقات طويلة يصعب فهمها، وسطور يصعب تتبع الغرض منها. هذه الفوضى لا تظهر فجأة، بل تتراكم مع كل تعديل صغير أو إضافة مؤقتة تتحول إلى دائمة.
لكن كتابة CSS لا يجب أن تكون عشوائية أو مرهقة. هناك أساليب بسيطة ومنهجيات مجربة تساعد على تنظيم الكود، تقليل التكرار، وتحسين قابلية التوسعة. باتباع بعض القواعد والممارسات، يمكن تحويل ملف CSS إلى شيء واضح، سهل الفهم، وسريع التحميل.
في هذا الدليل نشارك خطوات عملية تساعدك على كتابة CSS نظيف، من أول سطر حتى آخر تعديل.
منذ بداياتها في أواخر التسعينيات، توسّع نطاق CSS بشكل كبير. وهي الآن تقنية متطورة وقوية، مدعومة على نطاق واسع من متصفحات سطح المكتب والهواتف المحمولة، ولكن لا يزال هناك الكثير لتتعلمه. سواءً كنتَ متأخرًا عن التطورات الحديثة أو تتطلع إلى تعلم CSS لأول مرة، فإن هذه القائمة المرجعية ستساعدك، بما تحتويه من نصائح عملية وإرشادات عامة وموارد عالية الجودة.
1. تأكد من معرفتك بلغة HTML أولًا
أول ما يجب أن تعرفه قبل البدء بتعلم CSS هو HTML. قد يبدو هذا بديهيًا، ولكن هناك بعض المفاهيم المهمة التي يجب تعزيزها قبل التعمق في تنسيق محتواك.
ستُركز رحلة تعلمك على الفصل بين الدلالات (HTML) والأسلوب (CSS). تأكد من استخدام ترميز جيد وواضح، وتخلّص من أي وسوم HTML أسلوبية قد تكون معتادًا عليها.
توثيق HTML من Mozilla ممتاز (وكذلك جميع مواده التي تغطي منصة الويب)، لذا ابدأ من هناك إذا لم تكن واثقًا من قدرتك على HTML.
2. ابدأ بالأساسيات المطلقة لـ CSS
ابق على موقع Mozilla وتعمق في مقدمة CSS.
في هذه المرحلة، هناك أمران أساسيان يجب تعلمهما: كيفية كتابة CSS الأساسية وربطها بملفات HTML. تبدأ وثائق موزيلا بمقدمة بسيطة عن CSS باستخدام هذا المثال:
حتى لو لم تكن تجيد كتابة CSS، فربما يمكنك فهم وظيفة هذا المقتطف: فهو يجعل عناصر h1 حمراء ويحدد حجم خط معين.
تصف مقالة موزيلا “البدء باستخدام CSS” الجزء الثاني من اللغز، موضحةً كيفية تطبيق CSS، مثل ما سبق، على ملفات HTML. ربما تكون أوراق الأنماط الداخلية هي أسرع وأسهل طريقة للبدء، ولكن أوراق الأنماط الخارجية لها فوائد عديدة، لذا يُنصح بتجربة كليهما.
3. العب بعض الألعاب
على الرغم من وجود العديد من الألعاب الرائعة التي تساعدك على تعلم CSS، إلا أنها عادةً ما تغطي تقنيات أكثر تقدمًا مثل تخطيط الشبكة. يُعد CSS Diner مناسبًا أكثر للمبتدئين، ومن المفترض أن يساعدك على فهم محددات CSS التي تُحدد أجزاءً معينة من مستندك للتنسيق. يُظهر المثال أعلاه محدد “h1” بسيطًا، ولكنه قد يكون أكثر تعقيدًا.
a#selected > .icon,
.box h2 + p {
font-weight: bold;
}
يُعدّ اختبار CSS Speedrun اختبارًا جيدًا آخر لمهاراتك في استخدام المحددات، مع أنه – كما يوحي اسمه – قد يكون تجربة أكثر إرهاقًا!
4. استخدم أدوات مطوري Chrome/Safari/Firefox
بمجرد إتقان الأساسيات، ستكون جاهزًا تقريبًا لبدء كتابة أوراق الأنماط الخاصة بك. مع ذلك، يمكنك البدء بتجربة CSS مباشرةً في متصفحك، متجنبًا الحاجة إلى فتح محرر نصوص والبدء في تعديل الملفات.
على سبيل المثال، يتيح لك مفتش العناصر في أدوات مطوري Google عرض CSS الذي ينطبق على أي شيء في أي صفحة تنظر إليها:
علاوة على ذلك، يمكنك استخدام لوحة الأنماط لتعديل أي ملف CSS، أو حتى إنشاء أنماط جديدة، ومشاهدة النتائج فورًا.
تختلف هذه الأدوات قليلًا في كل متصفح، ولكن يُفترض أن تتمكن من استخدامها لتعزيز مهاراتك. يتميز متصفح Chrome بدعم ممتاز للإكمال التلقائي لاقتراح أسماء الخصائص والقيم المقبولة. من خلال التجربة، يمكنك التعرّف على خصائص مختلفة ومعرفة المزيد عنها عبر روابط مباشرة لوثائق شبكة مطوري موزيلا (MDN):
5. جرب محررًا عبر الإنترنت
قبل أن تستخدم محرر النصوص هذا، هناك طريقة أخرى يمكنك من خلالها تجربة مهاراتك في CSS دون التعامل مع الملفات المحلية. هناك العديد من تطبيقات الويب، مثل CodePen أو JSFiddle. تشبه هذه الأدوات بعض الألعاب التي شاهدتها سابقًا، باستثناء جزء اللعبة. فهي توفر مربعات نصية يمكنك استخدامها لتحرير HTML وCSS، مع معاينة تعرض النتيجة النهائية.
نصيحة
مع أن هذه الأدوات تتضمن عادةً قسمًا لجافا سكريبت لتطوير مهاراتك البرمجية، إلا أنه اختياري تمامًا. ما عليك سوى تجاهل أي أقسام “JS” أو “JavaScript” والتركيز على HTML وCSS.
تتضمن هذه المحررات ميزات مفيدة مثل تمييز بناء الجملة وتنسيق الكود. يتميز JSFiddle بتقارير أخطاء جيدة، حيث يلفت انتباهك إلى قيم CSS غير الصحيحة، على سبيل المثال. كما يتيح لك حفظ عملك لاستخدامه لاحقًا، ويمكنك دائمًا نسخ ولصق HTML أو CSS في ملف محلي إذا كنت ترغب في استخدامه في مشاريعك الخاصة.
6. استخدم أفضل المواد المرجعية
كما رأيت، تشير العديد من هذه الموارد إلى شبكة مطوري البرامج (MDN). هذا المصدر للمعلومات على منصة الويب ممتاز وشامل؛ يجب أن يكون ملاذك الأول عند الحاجة للبحث عن تفاصيل حول أي مشكلة في CSS.
تحذير
قد تصادف موقع W3Schools عند البحث عن مواضيع CSS، أو أي مواضيع أخرى متعلقة بالويب. يوحي اسم الموقع بأنه تابع لـ W3C، الجهة التي وضعت معايير تقنيات الويب. ولكنه ليس كذلك؛ فهو مجموعة من الوثائق من جهة خارجية. على الرغم من تحسن جودتها، إلا أنها لا تزال بعيدة عن الكمال، وشبكة MDN مصدر أكثر موثوقية بكثير.
تتوفر على MDN وفرة من مواد CSS، من الدروس التعليمية إلى الاختبارات التفاعلية. يغطي الموقع جميع جوانب CSS، بما في ذلك المحددات، ونموذج المربع، والألوان، وتصحيح الأخطاء. لكل خاصية CSS صفحة مرجعية مقابلة تُطلعك على كل ما تحتاج لمعرفته عنها تقريبًا.
تتضمن كل صفحة مرجعية للخصائص شرحًا لقيم مختلفة، وأمثلة على كيفية استخدامها، وجدول توافق المتصفحات. يُعدّ هذا الأخير ضروريًا للتمييز بين الخصائص المدعومة جيدًا والخصائص التجريبية التي قد تعمل فقط في بعض المتصفحات المحددة.
إذا كنت تبحث عن بديل جيد، فإن موارد CSS في W3C موثوقة. مع ذلك، انتبه، فهي ليست سهلة الاستخدام للمبتدئين، ويجب عليك الرجوع إليها فقط بعد استنفاد المعلومات الممتازة في MDN.
7. ابقَ على اطلاع دائم
على الرغم من أنها تقنية ناضجة ومستقرة، إلا أن CSS لا تزال في طور التغيير. يواصل أعضاء من منظمات مختلفة اقتراح تغييرات وإصلاحات وميزات جديدة.
كمصمم، غالبًا ما يتجاوز التحدي الذي تواجهه معرفة كيفية القيام بشيء ما، ويركز بدلاً من ذلك على ما يمكنك تحقيقه بالفعل. يمكنك تغيير لون النص، ولكن هل يمكنك تغيير مخططه؟ أو يمكنك استخدام تدرج لوني بدلاً من لون؟
للبقاء على اطلاع دائم بأحدث التطورات، والإجابة على هذه الأسئلة، عليك البحث عن مصدر جيد لأخبار CSS، سواءً كان بودكاست أو مدونة أو حسابًا متخصصًا على مواقع التواصل الاجتماعي.
يُعد CSS-Tricks أحد أفضل مصادر أخبار CSS المتطورة. فهو يضم مقالات تتناول جميع جوانب CSS، بالإضافة إلى مواد مرجعية ممتازة، خاصةً فيما يتعلق بميزات مثل Flexbox وgrid.
بودكاست CSS هو برنامج موسمي يُبث منذ خمس سنوات. يتميز مُقدّماه بتفاعلهما الشديد، مما يسمح لهما بالتعمق في تفاصيل CSS دون جعل الموضوع مُملاً أو مُعقّداً.
تنشر الدكتورة ليا فيرو، خبيرة هذا المجال، بانتظام على X حول CSS ومنصة الويب. تعمل جين سيمونز لدى Apple على متصفح Safari، وتنشر على Bluesky حول مشاكل CSS. حساب مجموعة عمل CSS رسمي للغاية. ينشر الحساب من حين لآخر فقط، للترويج لتحديثات المواصفات والمقالات الأخرى ذات الصلة من موقع w3.org، ولكن متابعته طريقة رائعة لمواكبة أحدث التطورات.
8. تحقق من صحة CSS
الآن بعد إنشاء عشرات أوراق الأنماط، من الحكمة التأكد من خلوها من الأخطاء. يمكن إخفاء أخطاء CSS بسهولة، ويصعب تصحيحها، لذا تأكد من حصولك على كل المساعدة الممكنة.
لطالما كان مُتحقق W3C هو المعيار الذهبي في فحص أخطاء CSS. يمكنك توفير عنوان URL أو ملف أو نسخة نصية من أنماطك للتحقق من صحتها.
إذا كانت أوراق الأنماط لديك خالية من الأخطاء، فسترى رسالة تهنئة ودية وشارة يمكنك استخدامها على صفحات الويب الخاصة بك للتأكيد على صحتها. لم يعد عرض هذه الرسائل ضروريًا، ولكن يمكنك القيام بذلك إذا كنت ترغب في إظهار مهاراتك على معرض أعمالك أو موقع شخصي.
من ناحية أخرى، إذا كانت هناك مشاكل في تنسيقك، فسيعرض لك المُحقق رسائل خطأ مفصلة تشرحها. ومثل معظم الأخطاء، قد يكون من الصعب فهمها إذا لم تكن على دراية بها، لذا راجع الكود المتأثر لتحديد المشكلة قبل محاولة إصلاحها.
9. تحقق من توافق المتصفحات
يُعد توافق المتصفحات جانبًا مهمًا آخر من جوانب صحة أوراق الأنماط. أصبحت هذه المشكلة أقل شيوعًا بكثير مما كانت عليه في السابق، ولكن التحديثات الأحدث لـ CSS – بما في ذلك الميزات التجريبية – لا تحظى دائمًا بدعم واسع النطاق. لحسن الحظ، سيخبرك Caniuse بدقة بخصائص CSS التي ستعمل في كل متصفح.
المعلومات هنا كثيفة، ولكنها مُقدمة بطريقة سهلة الفهم. ستحتاج إلى تحديد المتصفحات التي ترغب في دعمها، بما في ذلك متصفح Edge السابق كـ Internet Explorer، وميزة التوافق بينه وبين أجهزة الكمبيوتر. الخبر السار هو أن معظم CSS اختياري، ويمكنك تصميم صفحاتك بحيث تتدهور بشكل سلس عند عرضها على متصفحات غير داعمة.
10. إتقان طباعة CSS
تُعتبر الطباعة عنصرًا أساسيًا في أي تصميم، ولم تُؤخذ على محمل الجد على الويب حتى ظهور خطوط CSS. لطالما تميزت لغة CSS بالمرونة، حيث تدعم مجموعة خطوط تتيح لك اختيار ترتيب مفضل للخطوط للاستخدام، وفقًا لما هو متاح. لكن خطوط الويب الحقيقية تمنحك تحكمًا أكبر في التجربة، وتتيح لجميع المستخدمين رؤية خطك حتى لو لم يكونوا مُثبتين عليه.
تُعتبر خطوط جوجل من أفضل مزودي الخطوط المجانية، والخيارات المتاحة واسعة: ما يقرب من 2000 عائلة خطوط وقت كتابة هذا التقرير
تتوفر العديد من الخيارات والتكوينات، بدءًا من أوزان مختلفة ودعم لغات متعددة وخطوط أيقونات. بعد تخصيص الخط حسب رغبتك، انسخ كود التضمين وأضفه إلى ملف HTML. كما يمكنك تنزيل ملفات الخطوط واستضافتها محليًا إذا رغبت.
CSS المنظم لا يعني فقط مظهرًا أجمل في ملفات الكود، بل ينعكس أيضًا على الأداء وسرعة التطوير وسهولة التعاون مع الفريق. البدء بأسلوب كتابة واضح، واستخدام تسميات مفهومة، وتجنب التكرار، كلها خطوات تجعل الكود يعمل لصالحك بدلًا من أن يتحول إلى عبء.
كلما التزمت بمبدأ “اجعل CSS يخدم هدفك دون تعقيد”، كلما كان تعديل التصميم وتوسيعه لاحقًا أسهل وأسرع. ابدأ بهذه الخطوات البسيطة، وستجد أن CSS يمكن أن يكون ممتعًا ومنظمًا في نفس الوقت.