هناك العديد من منهجيات CSS، وأنا أكرهها جميعًا. بعضها أكثر (الرياح الخلفية وآخرون) وبعضها أقل (BEM، OOCSS، وما إلى ذلك). لكن في نهاية المطاف، جميعهم لديهم عيوب.

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

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

العناصر المضمنة

كقاعدة عامة، أحاول استخدام أنواع العناصر المضمنة قدر الإمكان، وبأقل قدر ممكن من الزغب الإضافي.

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

يجب أن يتحول div.btton إلى زر

العناصر المخصصة

ليست كل عناصر التصميم لها مكافئ HTML مناسب لغويًا، وفي هذه الحالات، عادةً ما ألجأ إلى العناصر المخصصة.

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

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

يجب أن يتحول div.vsep إلى فاصل عمودي

فصول

يجب أن تعمل الفئات كمعدلات لاسم العقدة الموجودة، بدلاً من أنواع العناصر الجديدة تمامًا، وغالبًا ما يكون لها تأثيرات متشابهة ولكن مختلفة على أنواع العناصر المختلفة.

زر خطير هو زر.خطر

صفات

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

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

بالنسبة لأولئك منا الذين ما زال لديهم أمل في أن تشق الدالة attr() طريقها يومًا ما إلى CSS لأكثر من مجرد محتوى، فهذه أيضًا طبقة إضافية من التدقيق المستقبلي.

معرفات

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

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

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

مضمنة CSS

سيحتوي أي تطبيق في العالم الحقيقي في مرحلة ما على عناصر تتطلب ببساطة التغيير والتبديل الفردي لجعلها أكثر جمالية في السياق الذي تظهر فيه.

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

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

ببساطة، width: 100px له معنى محدد عالميًا، في حين أن .width-100 يمكن أن يعني أي شيء.

فئات المنفعة

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

في هذه الحالات، تكون الفئات المساعدة هي الخيار الوحيد، حتى لو كانت قبيحة.

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

تعجبني فكرة إضافة بادئة للفئات المساعدة بـ a لتمثيل أنها تضيف نوعًا من الوظائف إلى العنصر، على عكس الفئات العادية، التي تحدد نوع العنصر.

الزر العائم الأحمر

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

ما هي أفكارك؟ هل تكره ذلك؟ هل تعتقد أنه من المنطقي؟ اسمحوا لي أن أعرف في تعليق؟