فهم منهجيات الكتابة CSS

في هذا المنشور سنرى ما هي منهجيات كتابة CSS, بعض المنهجيات المعروفة جيدًا ، وكيف يمكن أن تكون مفيدة لنا في تحسين كود CSS الخاص بنا. دعنا نبدأ مع أبسط سؤال للحصول على الكرة المتداول. ما هي المنهجية؟?

منهجية هي نظام الطرق. فكر في طريقة ما ببساطة وسيلة لفعل شيء بطريقة منهجية ، بطريقة محددة مسبقًا لفعل الأشياء لتحقيق النتيجة التي نريدها.

للحصول على نتائج أفضل, نحسن أساليبنا من خلال التخطيط لها بشكل أفضل, تغيير النظام ، وتبسيط الخطوات - مهما كان ذلك ناجحًا بسرعة و اكثر فعالة.

منهجية CSS

الآن دعنا نتحدث عن منهجية CSS. تمامًا كما هو الحال مع كل شيء تقريبًا في الحياة ، لدينا طريقة لكتابة CSS أيضًا: بعض إعادة تعيين CSS أولاً ، وبعض أنماط تخطيط المكان أخيرًا ، والبعض الآخر يبدأ بفصلين إلى ثلاثة فصول لتصميم عنصر ، والبعض الآخر يكتب جميع رموز CSS في ملف واحد.

لقد تم إنشاء طرقنا المفضلة إما بمفردنا أو تأثرت بطرق أخرى أو مطلوبة في مكان عملنا أو بسبب كل ما سبق. ولكن مع مرور الوقت ، وضعت قدامى المحاربين CSS منهجيات كتابة CSS هذا أكثر مرنة ، محددة ، قابلة لإعادة الاستخدام ، مفهومة و التحكم.

سننظر في تلك المنهجيات التي صيغت ، والتي سوف تشمل:

1. OOCSS (كائن موجه CSS)
2. BEM (كتلة ، عنصر ، معدل)
3. ACSS (CSS الذرية)
4. SMACSS (بنية قابلة للتطوير ووحدات نمطية لـ CSS)

ملحوظة: يجب عدم الخلط بين أي من المفاهيم المذكورة أدناه مع أي إطار أو مكتبة أو أداة قد يكون لها نفس الاسم والمفهوم مثل هذه المنهجيات. هذا المنشور يتعلق فقط بمنهجيات كتابة CSS.

1. OOCSS

تم تطويره بواسطة نيكول سوليفان في عام 2008 ، وتشمل المفاهيم الأساسية لـ OOCSS (كائن موجه نحو CSS) CSS موضوع تحديد وفصل الهيكل والأنماط المرئية ، وتجنب الأساليب القائمة على الموقع.

في OOCSS ، أول خطوة تقترحها نيكول هي: تحديد الكائنات في CSS.

“في الأساس ، "كائن" CSS هو نمط مرئي متكرر ، يمكن استخلاصه في مقتطف مستقل من HTML و CSS وربما جافا سكريبت. يمكن بعد ذلك إعادة استخدام هذا الكائن عبر الموقع. - نيكول سوليفان ، جيثب (OOCSS)“

خذ على سبيل المثال هذا الهيكل من هذا الموقع. في ما يلي نقش مرئي متكرر وله HTML مستقل و / أو CSS مستقل:

لدينا هنا نوعان من الكائنات ، معاينة أكبر للعناوين التي سنسميها بعد المعاينة الابتدائية والشريط الجانبي مع العناوين التي سنقوم بتسمية بعد معاينة الثانوي.

نحتاج إلى هيكل منفصل والجلد (أي الأنماط التي تنشئ مظهر الكائنات). يحتوي النوعان من الكائنات على بنيات مختلفة ، أحدهما في مربع أكبر على الرغم من أنها تبدو متشابهة ، مع صور إلى اليسار وعناوين إلى اليمين.

دعنا نعطي الصور لكلا الكائنات فئة بعد معاينة صورة وأضف الكود الذي يضع الصورة على اليسار. هذا يمنعنا من الاضطرار إلى تكرار رمز وضع الصورة داخل الكائنات في CSS. إذا كان هناك أشياء أخرى مماثلة ، فإننا نعيد استخدامها بعد معاينة صورة بالنسبة لهم.

ويمكن أيضا أن يتم فصل الجلد لأنماط أبسط مثل الحدود أو الخلفيات. إذا كان لديك كائنات متعددة لها نفس الحدود الزرقاء, خلق فئة منفصلة للحدود الزرقاء وإضافته إلى الأشياء سوف تقليل عدد مرات ترميز الحدود الزرقاء في المغلق.

نيكول يوحي أيضا ل ليس إضافة أنماط بناءا على الموقع, على سبيل المثال ، بدلاً من استهداف جميع الروابط داخل قسم معين لتمييزه ، أعط هذه الروابط أ الطبقة تمييز مع أنماط CSS المناسبة. بهذه الطريقة ، عندما تحتاج إلى تمييز رابط في جزء آخر من الصفحة ، يمكنك إعادة استخدام فئة التمييز.

إيجابيات OOCSS: رموز التصميم المرئية القابلة لإعادة الاستخدام ، رموز الموقع المرنة ، تقليل محددات التداخل العميق.

سلبيات من OOCSS: بدون وجود قدر لا بأس به من الأنماط المرئية المتكررة ، يبدو أن الفصل بين رموز الهيكل والأنماط المرئية غير ضروري.

2. BEM

تم تطوير المفاهيم الأساسية لـ BEM (Block ، Element ، Modifier) ​​التي تم تطويرها بواسطة المطورين في Yandex في عام 2009 ، وتشمل تحديد منع, جزء و التعديل وتسمية لهم وفقا لذلك.

ا “منع” هو أساسا نفس “موضوع”(من المثال السابق) ، “جزء” يشير إلى مكونات الكتلة (الصورة ، العنوان ، نص المعاينة في أعلاه معاينة آخر- شاء). ا “التعديل” يمكن استخدامها عندما تتغير حالة الكتلة أو العنصر ، على سبيل المثال ، عند إضافة فئة نشطة إلى عنصر قائمة لتمييزه ، يتصرف الفصل النشط كمعدل لديك.

بمجرد تحديد المكونات ، قم بتسميةها وفقًا لذلك. فمثلا:

• سوف كتلة القائمة لديها الطبقة قائمة طعام
• سوف عناصره لديها الصف عنصر القائمة (يتم فصل الكتلة والعنصر بواسطة الشرطة السفلية المزدوجة)
• يمكن أن يحتوي المعدل الخاص بالحالة المعطلة في القائمة على الفصل الدراسي menu_disabled (معدل محدد بشرطة سفلية واحدة)
• معدل للحالة المعوقين من عنصر القائمة يمكن أن يكون menu__item_disabled.

بالنسبة للمعدلات ، يمكننا أيضًا استخدام key_value شكل للتسمية. على سبيل المثال ، لتمييز أي عناصر قائمة مرتبطة بمقالات قديمة ، يمكننا منحهم الفصل menu__item_status_obsolete, ولتصميم أي عناصر قائمة تشير إلى المستندات المعلقة ، يمكن أن يكون اسم الفئة menu__item_status_pending.

يمكن تعديل التسمية إلى ما يصلح لك. والفكرة هي أن تكون قادرة على تحديد وكتل وعناصر ومعدلات من أسماء الفصل. تحقق من بعض نظام التسمية المدرجة في موقع BEM.

موقع BEM يسرد أيضا كيف يمكن أيضًا الفصل بين العنصر والعنصر والمعدل في نظام ملفات CSS. كتل مثل “وصفت” و “المدخلات” يمكن أن يكون لها مجلدات خاصة بها تتكون من الملفات (.css ، .js) المقترنة بتلك الكتل ، مما يجعل الأمور أسهل عندما نريد استيراد تلك الكتل في مشاريع أخرى.

إيجابيات BEM:سهولة استخدام أسماء الفصول وتقليل محددات CSS العميقة.

سلبيات BEM:للحفاظ على الأسماء ذات مظهر عاقل ، تنصح BEM بأن نحتفظ بمنع تعشيش العناصر الضحلة.

3. ACSS

أصبحت مشهورة بواسطة Yahoo ، في مكان ما بالقرب من نهاية الأول عقد من 21^شارع منذ قرن من الزمان ، تتكون المفاهيم الأساسية لـ ACSS من إنشاء فئات لأعلى مستوى ذري من التصميم ، أي زوج قيمة العقار ، ثم استخدامه في HTML حسب الحاجة.

من الصعب تحديد متى تم تطوير ACSS (Atomic CSS) لأول مرة منذ أن تم استخدام المفهوم لفترة من الوقت الآن. وقد تم استخدام مطورين الطبقات مثل .clearfix overflow: hidden لمدة طويلة. الفكرة في ACSS هي لديك فئة لكل زوج قيمة الممتلكات غير قابلة لإعادة الاستخدام ذات الصلة إلى حد كبير سنحتاج في موقعنا ، وإضافة تلك الفئات عند الحاجة إلى عناصر HTML.

في ما يلي مثال للفئات المستندة إلى ACSS وكيفية استخدامها في HTML.

 .mr-8 margin-right: 8px؛ .fl-r float: right؛ 
 

كما ترون ، فإن عدد الفصول سوف يرتفع مع هذه الطريقة وسيتم مزج HTML في كل هذه الفئات. هذه الطريقة ليست فعالة بنسبة 100 ٪ ولكن يمكن أن تكون مفيدة إذا أردت. ياهو يستخدم هذا بعد كل شيء.

إيجابيات ACSS:تصميم HTML دون ترك HTML.

سلبيات ACSS:الكثير من الفصول ، ليس أنيقًا جدًا وقد تكرهها.

4. SMACSS

تم تطويره في عام 2011 من قبل جوناثان سنوك SMACSS (بنية قابلة للتطوير ووحدات نمطية لـ CSS) عن طريق تحديد الأنواع الخمسة المختلفة لقواعد النمط. يتم إنشاء أسماء الفئات ونظام الملفات بناءً على هذه.

“SMACSS هي طريقة لفحص عملية التصميم الخاصة بك وكطريقة لتناسب تلك الأطر الصلبة في عملية تفكير مرنة. - جوناثان سنوك”

SMACSS يحدد 5 أنواع من قواعد النمط وهي قاعدة ، تخطيط ، وحدة ، الدولة, و موضوع.

• الأنماط الأساسية هي الأنماط الافتراضية الموجهة إلى علامات HTML الأساسية مثل

  , .

• أنماط التخطيط هي أنماط تستخدم لتحديد تخطيط الصفحة ، مثل الترميز حيث ستذهب قوائم الرأس والتذييل والقوائم الجانبية.
• تعد أنماط الوحدات الخاصة بوحدة نمطية مثل المعرض أو عرض الشرائح.
• أنماط الحالة مخصصة لتمييز العناصر ذات الحالات المتغيرة مثل المخفي أو المعطل.
• يتم استخدام السمة لتغيير المخطط البصري للصفحة.

يمكن تحديد قواعد الأنماط المختلفة باستخدام بادئة في اسم الفئة على سبيل المثال ، رأس l (للتخطيط) أو رأس t (للسمة). يمكننا أيضًا تنظيم هذه الأنواع المختلفة من القواعد عن طريق وضعها في ملفات ومجلدات منفصلة.

إيجابيات SMACSS:أفضل رمز المنظمة.

سلبيات SMACSS: لا شيء يمكنني التفكير فيه.

هناك كتاب مجاني على الإنترنت يمكنك قراءته حول SMACSS ، أو يمكنك شراء إصدار الكتاب الإلكتروني لدراسته أكثر.

استنتاج

سوف تمنحك منهجيات CSS أعلاه نظامًا إدارة وتحسين رموز CSS الخاصة بك. يمكن دمجها معًا ، مثل OOCSS-SMACSS أو OOCSS-BEM أو BEM-SAMCSS لتناسب احتياجاتك.

هناك أيضًا أطر عمل ومكتبات إذا كنت تريد نظامًا تلقائيًا لتنفيذ منهجيات CSS مثل:

• إطار OOCSS
• أدوات BEM
• إطار CSS العضوي (يتبع المفهوم الذري).