أساسيات CSS ذات التوجه الموجه (OOCSS)
يتحرك تطوير Frontend بسرعة مع إضافة العديد من التقنيات الجديدة كل عام. يمكن أن يكون الكفاح للمطورين لمواكبة كل شيء. بين Sass و PostCSS ، من السهل أن تضيع في بحر أدوات التطوير.
وأحدث التقنيات هي CSS ذات التوجه الموجه ، وتسمى أيضًا OOCSS للاختصار. هذه ليست أداة ، بل هي منهجية كتابة CSS تهدف إلى جعل CSS وحدات والقائم على الكائن.
في هذا المنشور ، أود تقديم أساسيات OOCSS الأساسية, و كيف يمكن تطبيق هذه الأفكار على الواجهة الأمامية لعمل الويب. قد لا تتمكن هذه التقنية من متابعة كل مطور ، لكن الأمر يستحق فهم المفاهيم الجديدة لتقرير ما إذا كان سير عملك سيستفيد منها.
ما الذي يجعل CSS وجوه المنحى?
البرمجة الموجهة للكائنات (OOP) هي نموذج برمجة يركز على خلق كائنات قابلة لإعادة الاستخدام و إقامة العلاقات بينهما ، على عكس البرمجة الإجرائية التي تنظم الكود في إجراءات (إجراءات ، روتين فرعي ، أو وظائف).
أصبح OOP يستخدم على نطاق واسع في كليهما جافا سكريبت واللغات الخلفية في السنوات القليلة الماضية ، ولكن تنظيم CSS وفقًا لمبادئه لا يزال مفهومًا جديدًا.
ال “موضوع” في OOCSS يشير إلى عنصر HTML أو أي شيء مرتبط به (مثل فئات CSS أو طرق JavaScript). على سبيل المثال ، قد يكون لديك عنصر واجهة مستخدم لشريط جانبي يمكن نسخه في أغراض مختلفة (الاشتراك في الرسائل الإخبارية ، المجموعات الإعلانية ، النشرات الحديثة ، إلخ). يمكن المغلق استهداف هذه الكائنات بشكل جماعي مما يجعل تحجيم نسيم.
لتلخيص إدخال GitHub لـ OOCSS ، قد يتكون كائن CSS من أربعة أشياء:
- عقدة (عقدة) HTML للنطاق DOM
- تصريحات CSS حول أسلوب تلك العقد
- مكونات مثل صور الخلفية
- جافا سكريبت السلوكيات ، المستمعين ، أو الأساليب المرتبطة كائن
بشكل عام ، يكون CSS موجهاً للكائنات عندما ينظر إليها الطبقات التي يمكن إعادة استخدامها و قابل للاستهداف لعناصر الصفحة المتعددة.
قد يقول العديد من المطورين إن مشاركة OOCSS أسهل مع الآخرين وأسهل في الانتقاء بعد أشهر (أو سنوات) من التطوير غير النشط. يقارن هذا مع الأساليب المعيارية الأخرى مثل SMACSS التي لديها قواعد أكثر صرامة لتصنيف الكائنات في CSS.
تحتوي صفحة الأسئلة الشائعة حول OOCSS على مجموعة من المعلومات إذا كنت مهتمًا بمعرفة المزيد. وغالبا ما يتحدث المبدع نيكول سوليفان عن OOCSS وكيف يرتبط بتطور الويب الحديث.
هيكل منفصل عن الاسلوب
جزء كبير من OOCSS هو كتابة التعليمات البرمجية التي تفصل بنية الصفحة (العرض ، الارتفاع ، الهوامش ، الحشو) عن المظهر (الخطوط ، الألوان ، الرسوم المتحركة). هذا يسمح السلخ مخصص ليتم تطبيقها على عناصر صفحة متعددة دون التأثير على الهيكل.
هذا مفيد أيضًا لتصميم المكونات التي يمكن أن تكون تحركت في جميع أنحاء التخطيط بسهولة. على سبيل المثال ، “المشاركات الاخيرة” يجب أن تكون القطعة في الشريط الجانبي قابلة للنقل في تذييل الصفحة أو أعلى المحتوى مع الحفاظ على أنماط مماثلة.
هنا مثال على OOCSS ل “المشاركات الاخيرة” القطعة التي في هذه الحالة هو كائن CSS لدينا:
/ * Structure * / .side-widget width: 100٪؛ الحشو: 10px 5px. / * Skinning * / .recent-posts font-family: Helvetica، Arial، sans-serif؛ اللون: # 2b2b2b ؛ FONT-SIZE: 1.45em؛
لاحظ أن نسق تدار مع .جنبا إلى القطعة الطبقة التي يمكن تطبيقها على عناصر الشريط الجانبي متعددة كذلك ، في حين مظهر خارجي تدار مع .المشاركات الاخيرة الطبقة التي يمكن أن تستخدم أيضا للجلد الحاجيات الأخرى. على سبيل المثال ، إذا كان .المشاركات الاخيرة تم نقل عنصر واجهة المستخدم إلى تذييل الصفحة ، فقد لا يستغرق الأمر نفس الموضع ، ولكن قد يكون له نفس الشكل والمظهر.
انظر أيضًا إلى مثال الشريط الجانبي هذا من CodePen. يستخدم فصلًا متميزًا للفئات للعوامات ومحاذاة النص بحيث لن يتطلب النسخ المتماثل رمز CSS إضافي.
حاوية منفصلة من المحتوى
فصل المحتوى عن عنصر الحاوية الخاص به هو مبدأ آخر مهم من OOCSS.
بعبارات أبسط ، هذا يعني فقط أنه يجب عليك تجنب استخدام المحددات الفرعية كلما كان ذلك ممكنًا. عند تخصيص أي عناصر صفحة فريدة مثل روابط الربط أو الرؤوس أو قوائم الحظر أو القوائم غير المرتبة ، يجب أن تمنحهم فئات فريدة بدلاً من محددات السليل.
إليك مثال بسيط:
/ * OOCSS * / .sidebar / * محتويات الشريط الجانبي * / h2.sidebar-title / * أنماط عنصر h2 الخاصة * / / * Non-OOCSS * / .sidebar / * محتويات الشريط الجانبي * / .sidebar h2 / * يضيف خصوصية أكثر مما هو مطلوب * /
على الرغم من أنه ليس من المروع استخدام تنسيق الرمز الثاني ، إلا أنه يوصى بشدة باتباع التنسيق الأول إذا كنت تريد كتابة OOCSS نظيفًا.
إرشادات التطوير
من الصعب تحديد المواصفات الدقيقة لأن المطورين يناقشون باستمرار هدف OOCSS. لكن هنا بعض الاقتراحات التي يمكن أن تساعدك على كتابة رمز OOCSS أنظف:
- يعمل مع الطبقات بدلا من معرفات للتصميم.
- حاول الامتناع عن خصوصية فئة سليل متعدد المستويات إلا إذا لزم الأمر.
- حدد أنماط فريدة من نوعها مع الطبقات القابلة للتكرار (مثل العوامات ، clearfix ، مجموعات الخطوط الفريدة).
- تمديد العناصر مع الطبقات المستهدفة بدلا من الطبقات الأم.
- تنظيم ورقة الأنماط الخاصة بك إلى أقسام, النظر في إضافة جدول المحتويات.
لاحظ أنه لا يزال يتعين على المطورين استخدام المعرفات لاستهداف جافا سكريبت ، لكنهم غير مطالبين باستخدام CSS لأن انهم محددة جدا. إذا كان أحد الكائنات يستخدم معرفًا لتصميم CSS ، فلن يكون من الممكن إجراء نسخة متماثلة منه لأن المعرفات هي معرفات فريدة. إذا كنت تستخدم الطبقات فقط للتصميم بعد ذلك الميراث يصبح أسهل بكثير للتنبؤ.
علاوة على ذلك ، يمكن ربط الدروس معًا للحصول على ميزات إضافية. يمكن أن يحتوي عنصر واحد على 10+ فصول متصلة به. على الرغم من أن أكثر من 10 فئات على عنصر واحد ليس شيئًا أوصي به شخصيًا ، إلا أنه يسمح للمطورين بتجميع مكتبة من الأنماط القابلة لإعادة الاستخدام لعناصر الصفحة غير المحدودة.
أسماء الفئات داخل OOCSS مثيرة للجدل إلى حد ما ، ولا يتم وضعها في الحجر. يفضل العديد من المطورين الحفاظ على فصول الدراسة قصيرة.
قضية الجمل تحظى بشعبية كبيرة ، على سبيل المثال .errorBox بدلا من .خطأ مربع. إذا نظرت إلى تسمية الفصل في وثائق OOCSS ، فستلاحظ أن حالة الإبل هي الحالة “الرسمية” توصية. لا يوجد خطأ في الشرطات ولكن كقاعدة عامة ، من الأفضل اتباع إرشادات OOCSS.
OOCSS + ساس
معظم مطوري الويب يحبون Sass بالفعل وقد تخطوا بسرعة مجتمع الواجهة الأمامية. إذا لم تكن قد جربت Sass بالفعل ، فإن الأمر يستحق إعطائها فرصة. يتيح لك كتابة التعليمات البرمجية مع المتغيرات والوظائف وطرق التعشيش والتجميع مثل الدوال الرياضية.
في الأيدي المختصة ، يمكن أن يكون ساس و OOCSS مباراة مصنوعة في الجنة. ستجد كتابة ممتازة حول هذا الموضوع على مدونة The Sass Way.
على سبيل المثال ، باستخدام ساس @تمديد توجيه يمكنك تطبيق خصائص فئة واحدة على فصل آخر. لا يتم تكرار الخصائص ولكن بدلاً من ذلك ، يتم دمج الفئتين مع محدد فاصلة. بهذه الطريقة يمكنك تحديث خصائص CSS في مكان واحد.
إذا كنت تكتب باستمرار أوراق أنماط ، فسيوفر ذلك ساعات من الكتابة و مساعدة أتمتة عملية OOCSS.
تذكر أيضًا ذلك صيانة الكود هي جزء كبير من OOCSS. باستخدام Sass ، يصبح عملك أسهل مع المتغيرات والخلطات وأدوات الفحص المتقدمة المرتبطة بسير العمل.
السمة الرئيسية لرمز OOCSS الكبير هو القدرة على مشاركتها مع أي شخص, حتى نفسك في وقت لاحق ، وتكون قادرة على التقاطها بسهولة.
اعتبارات الأداء
المقصود OOCSS للعمل بسلاسة ودون الكثير من الالتباس. المطورون نبذل قصارى جهدهم ليس لتكرار أنفسهم في كل منعطف ، في الواقع هذا هو الفرضية وراء تطوير DRY. بمرور الوقت ، يمكن أن تؤدي تقنية OOCSS إلى مئات فئات CSS مع خصائص فردية تطبق عشرات المرات في وثيقة معينة.
نظرًا لأن OOCSS لا يزال موضوعًا جديدًا ، فمن الصعب الجدال حول موضوع النفاخ. ينتهي العديد من ملفات CSS بالنفاذ القليل من البنية ، في حين أن OOCSS يوفر بنية صلبة وقليلة الانتفاخ. سيكون أكبر مشكلة في الأداء في HTML حيث قد تتراكم بعض العناصر حفنة من الفئات المختلفة لهيكل التخطيط والتصميم.
ستجد مناقشات مثيرة للاهتمام حول هذا الموضوع على مواقع مثل Stack Overflow و CSS-Tricks.
توصيتي هي محاولة بناء مشروع نموذج ، ومعرفة كيف ستسير الامور. إذا وقعت في غرام OOCSS ، فقد يغير هذا بشكل جذري كيفية ترميز مواقع الويب. بدلاً من ذلك ، إذا كنت تكرهها ، فأنت لا تزال تتعلم تقنية جديدة وتفكر بشكل نقدي حول كيفية عملها. انه الفوز بغض النظر عن ما.
الحصول على مشغول الكتابة OOCSS
أفضل طريقة لتعلم أي شيء في تطوير الويب هي الممارسة. إذا كنت قد فهمت بالفعل أساسيات CSS ، فأنت في طريقك!
نظرًا لأن OOCSS لا يتطلب معالجة مسبقة ، يمكنك تجربتها باستخدام IDE عبر الإنترنت ، مثل CodePen. المشاريع البسيطة هي الأفضل للبدء ، وتحسين معرفتك من هناك.
ألقِ نظرة على هذه الموارد لتعزيز بحثك في مجال OOCSS المتطور.
- موقع OOCSS الرسمي
- وجوه المنحى المغلق: ماذا وكيف ولماذا
- OOCSS + Sass = أفضل طريقة إلى CSS
- مقدمة للكائن الموجه CSS
