السلام عليكم، كيف الحال؟ عساكم بألف خير وعافية.

قبل مدة طويلة تخصصت بمجالي كمصمم مشاريع رقمية ومطور واجهات أمامية، كان لزاماً علي الإهتمام والتعمق بكتابة شفرات CSS والإهتمام بهيكلتها لجعلها منظمة، قابلة للتعديل والتطوير ومقروئيّتها أيضاً! ..

خصوصاً إذا كان المشروع كبيراً ويحتاج لتحسين مستمر حتى تستطيع المبرمجة معي داخل الفريق كذلك قِراءتها وتطويرها دون مشاكل.

ما سأتكلم عنه الآن هو Naming convention -إصطلاح التسميات- (ترجمة تحتاج لضبط) وكما تعلم أن لكل لغة برمجة موجودة لديها (دليل أسلوب كتابة - Style Guide) ويختلف من شخص لآخر إلا أنه في الآونة الأخيرة تطورت لغة الترميز CSS وأنشئ لها العديد من الدلائل ومعايير مثل SMACSS ،OOCSS و BEM.

أثناء تجربتي لهم لم تعجبني أيّ واحدة منها، صحيح أن لكل منهم إيجابيات وسلبيات، لكن بحثت عن أقرب نمط يساعدني وأحسّه مريحاً فوجدت نمطاً جميلا لمكتبة تدعى (SUITCSS) حيث يستخدمون إصلاحاً معدلاً وبسيطاً.

لنشرح الأمر من البداية، كيف تم إنشاء المعايير وما أهميتها

لنفترض أنّ لديك مشروعاً يحوي مكوّنا ما (Component) يحتوي على صندوق(Box) داخله [صورة الكاتب، إسمه، بلد الإقامة، زر التفضيل أو متابعة] كالتالي:

لو أردنا تقسيم هذا الصندوق وجعله مكوّنا عبر الكود البرمجي فإننا نقوم بتقسيمه هكذا:

ليصبح لدينا التالي:

  • المكوّن الرئيسي (Card) -الذي يجمع كل شئ-

  • الصورة الشخصية (Picture)

  • المكان (Location)

  • أيقونة المتابعة (Follow) - في حال قام المستخدم بعمل متابعة سيتغير لون الأيقونة إلى اللون الأحمر.

الآن كل شئ جاهز، لكن علينا أن نتعرف على القواعد الأربع لكتابة كود الترميز لـ CSS لكل من المناهج الثلاثة الشهيرة SMACSS ،OOCSS و BEM وهي:

  • المكونات (Components)

  • المتغيرات (Variants)

  • العناصر المتداخلة (Nested Elements) -التي ضمن المكوّن-

  • المتحوّل أو الحالة (Modifiers / State)

لنحوّل التصميم السابق الى كود CSS -سأستعمل Scss-

نلاحظ أننا إستعملنا هذه الكتابة الدلالية التالية:

[<namespace>-]<ComponentName>[-descendentName][--modifierName]

بحيث:

  • namespace (اختيارية -غير الزامية):

بحيث نعرّف إسم ثابت لكل مكّون، كمثال: twt-Button | twt-Tabs فهنا كلمة twt تعتبر prefixed.

  • ComponentName (إسم المكوّن):

يتم كتابة بحرف كبير بصيغة (PascalCase).

  • ComponentName--modifierName (الحالة المتغيرة):

يتم الفصل بينهم بمطّتين (--) للتعبير على أن هذا الكلاس modifier.

  • ComponentName-descendentName (المكوّن الإبن):

بحيث يكون هناك class رئيسي يلحقه class إبن أو ثانوي، كمثال هناك Tweet يلحقه Tweet-header آخر أسفله.

  • ComponentName.is-stateOfComponent (الحالة):

يستعمل للتعبير عن حالة Class المتغيّر في حالة كان متغيراً، وأقرب مثال له لو دخلنا على موقع رفع ملفات ما، عند إختيار للملف الذي تود تحميله ستضغط على [تحميل] في تلك اللحظة عندما يبدأ التحميل تجد اللون قد تغير وظهرت معها أيقونة التحميل التي تدور إلى حين إنتهاء التحميل فتعود الأيقونة بلون أخضر [قد تم تحميل ملفك] ثم تعود كما كانت من قبل.

أتمنى أن كان الشرح بسيطاً، صحيح بساطة الأمر، لكنك ستكون بحاجة إلى استعمال أسلوب ما عندما تجد نفسك تكتب أكثر من 1000 سطر، تتخله أسماء طويلة وملتوية، لو أردت التعديل على Box1 المشابه للـ Box2 فستبقى تجرّب أيهما الأسبق بينهما! للإستفادة من خبرات الآخرين إطلع على مكتبات css معروفة كبوستراب و bulma وتعلم من سياقها!


كتبه: عبدالهادي جعفر | الجزائر | 30 مارس 2020.