النهج (Approach)

بينما توفر صفحات "البدء" جولة تعريفية في المشروع وما يقدمه، يركز هذا المستند على سبب قيامنا بالأشياء التي نفعلها في الـ Bootstrap. فهو يشرح فلسفتنا في البناء على الويب حتى يتمكن الآخرون من التعلم منا، والمساهمة معنا، ومساعدتنا في التحسين.

هل ترى شيئاً لا يبدو صحيحاً، أو ربما يمكن القيام به بشكل أفضل؟ افتح قضية (issue)—نود مناقشة ذلك معك.

الملخص

سنتعمق في كل من هذه النقاط لاحقاً، ولكن على مستوى عالٍ، إليك ما يوجه نهجنا:

• يجب أن تكون المكونات متوافقة مع الشاشات (Responsive) وتعتمد مبدأ "الجوال أولاً" (mobile-first)
• يجب بناء المكونات باستخدام فئة (class) أساسية وتوسيعها عبر فئات (classes) معدلة
• يجب أن تخضع حالات المكونات لمقياس طبقات (z-index) مشترك
• كلما كان ذلك ممكناً، فضل تنفيذ HTML و CSS على الـ JavaScript
• كلما كان ذلك ممكناً، استخدم الأدوات المساعدة (utilities) بدلاً من الأنماط المخصصة
• كلما كان ذلك ممكناً، تجنب فرض متطلبات HTML صارمة (محددات الأبناء المباشرين)

المتوافق مع الشاشات (Responsive)

تم بناء أنماط الـ Bootstrap المتوافقة مع الشاشات لتكون متوافقة، وهو نهج يُشار إليه غالباً باسم mobile-first. نحن نستخدم هذا المصطلح في مستنداتنا ونوافق عليه إلى حد كبير، ولكن في بعض الأحيان قد يكون واسعاً جداً. ورغم أنه ليس من الضروري أن يكون كل مكون متوافقاً تماماً مع الشاشات في الـ Bootstrap، إلا أن هذا النهج المتوافق يهدف إلى تقليل عمليات تجاوز CSS من خلال دفعك إلى إضافة الأنماط كلما أصبحت نافذة العرض أكبر.

عبر الـ Bootstrap، سترى هذا بوضوح أكبر في استعلامات الوسائط (media queries). في معظم الحالات، نستخدم استعلامات min-width التي تبدأ في التطبيق عند نقطة توقف (breakpoint) محددة وتستمر عبر نقاط التوقف الأعلى. على سبيل المثال، يتم تطبيق .d-none من min-width: 0 إلى ما لا نهاية. ومن ناحية أخرى، يتم تطبيق .d-md-none من نقطة التوقف المتوسطة فما فوق.

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

الفئات (Classes)

بعيداً عن Reboot، وهي ورقة أنماط (stylesheet) لتوحيد المتصفحات، تهدف جميع أنماطنا إلى استخدام الفئات (classes) كمحددات. وهذا يعني الابتعاد عن محددات الأنواع (مثل input[type="text"]) وفئات الأبناء الزائدة (مثل .parent .child) التي تجعل الأنماط محددة للغاية بحيث يصعب تجاوزها بسهولة.

وبناءً على ذلك، يجب بناء المكونات باستخدام فئة (class) أساسية تحتوي على أزواج "خاصية-قيمة" شائعة ولا يجب تجاوزها. على سبيل المثال، .btn و .btn-primary. نحن نستخدم .btn لجميع الأنماط الشائعة مثل display، و padding، و border-width. ثم نستخدم المعدلات مثل .btn-primary لإضافة اللون، ولون الخلفية، ولون الحدود، وما إلى ذلك.

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

مقاييس الطبقات (z-index scales)

هناك مقياسان للطبقات (z-index) في الـ Bootstrap—العناصر داخل المكون ومكونات التراكب (overlay).

عناصر المكونات

• يتم بناء بعض المكونات في الـ Bootstrap بعناصر متداخلة لمنع الحدود المزدوجة دون تعديل خاصية border. على سبيل المثال، مجموعات الأزرار، ومجموعات الإدخال، والتنقل بين الصفحات (pagination).
• تشترك هذه المكونات في مقياس طبقات (z-index) قياسي من 0 إلى 3.
• 0 هو الافتراضي (initial)، و 1 هو :hover، و 2 هو :active/.active، و 3 هو :focus.
• يتوافق هذا النهج مع توقعاتنا لأعلى أولوية للمستخدم. إذا كان العنصر مركزاً (focused)، فإنه يكون في العرض وتحت انتباه المستخدم. العناصر النشطة (Active) تأتي في المرتبة الثانية لأنها تشير إلى الحالة. التحويم (Hover) يأتي في المرتبة الثالثة لأنه يشير إلى نية المستخدم، ولكن يمكن التحويم فوق أي شيء تقريباً.

مكونات التراكب (Overlay components)

يتضمن الـ Bootstrap عدة مكونات تعمل كنوع من التراكب. ويشمل ذلك، بترتيب تنازلي حسب قيمة الطبقات (z-index)، القوائم المنسدلة، وأشرطة التنقل الثابتة واللاصقة، والنوافذ المنبثقة (modals)، وتلميحات الأدوات (tooltips)، والـ popovers. تمتلك هذه المكونات مقياس طبقات (z-index) خاص بها يبدأ من 1000. تم اختيار هذا الرقم البدائي بشكل عشوائي ويعمل كمنطقة عازلة صغيرة بين أنماطنا وأنماط مشروعك المخصصة.

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

تعرف على المزيد حول هذا في صفحة تخطيط الطبقات (z-index).

HTML و CSS بدلاً من JS

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

هذا المبدأ هو واجهة برمجة تطبيقات JavaScript الأساسية لدينا باستخدام سمات data. لست بحاجة إلى كتابة أي JavaScript تقريباً لاستخدام إضافات (plugins) الـ JavaScript الخاصة بنا؛ بدلاً من ذلك، اكتب HTML. اقرأ المزيد عن هذا في صفحة نظرة عامة على JavaScript.

أخيراً، تعتمد أنماطنا على السلوكيات الأساسية لعناصر الويب الشائعة. كلما كان ذلك ممكناً، نفضل استخدام ما يوفره المتصفح. على سبيل المثال، يمكنك وضع فئة .btn على أي عنصر تقريباً، ولكن معظم العناصر لا توفر أي قيمة دلالية أو وظيفة للمتصفح. لذا بدلاً من ذلك، نستخدم عناصر <button> و <a>.

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

الأدوات المساعدة

تعد فئات الأدوات المساعدة (Utility classes)—والتي كانت تسمى سابقاً helpers في Bootstrap 3—حليفاً قوياً في مكافحة تضخم CSS وضعف أداء الصفحة. فئة الأدوات المساعدة هي عادةً زوج واحد غير قابل للتغيير من "خاصية-قيمة" يتم التعبير عنه كفئة (على سبيل المثال، .d-block تمثل display: block;). جاذبيتها الأساسية تكمن في سرعة الاستخدام أثناء كتابة HTML والحد من كمية CSS المخصصة التي يتعين عليك كتابتها.

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

HTML مرن

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

اتفاقيات الكود

يوثق دليل الكود (Code Guide) (من أحد مؤسسي Bootstrap، @mdo) كيفية كتابتنا لـ HTML و CSS عبر الـ Bootstrap. وهو يحدد إرشادات للتنسيق العام، والافتراضيات المنطقية، وترتيب الخصائص والسمات، وأكثر من ذلك.

نحن نستخدم Stylelint لفرض هذه المعايير وأكثر في Sass/CSS. إعداد Stylelint المخصص لدينا مفتوح المصدر ومتاح للآخرين لاستخدامه وتوسيع نطاقه.

نحن نستخدم vnu-jar لفرض HTML قياسي ودلالي، بالإضافة إلى اكتشاف الأخطاء الشائعة.