قليل من الناس يقومون الآن بتصميم موقع ويب من البداية - لماذا ، إذا كان هناك مجموعة كبيرة من أطر CSS الرائعة؟ الأكثر شعبية من بينها هو bootstrap. ومع ذلك ، يريد الجميع أن يبدو الموقع فريدًا ، وليس مثل المواقع الأخرى - ولهذا السبب غالبًا ما يتمسكوا (بأفضل قدراتهم) بنموذج مجاني أو مدفوع ، أو مجموعة أدوات واجهة المستخدم الخاصة بهم.
أريد أن أتحدث عن بعض المشكلات التي تحدث (للأسف) حتى في القوالب المدفوعة ، ناهيك عن حلولي. لا يدعي النص الوارد أدناه أنه فريد من نوعه ، ومن غير المرجح أن يكون ذا أهمية للمطورين ذوي الخبرة ، ولكنه قد يكون مفيدًا للمطورين المتقدمين للمبتدئين ومصممي التخطيط ومطوري الويب عريض القاعدة. لذا ، إذا كنت لا تزال مهتمًا ، مرحبًا!
لدينا تاريخيا ...
كقاعدة عامة ، إذا تم تطوير موقع لفترة طويلة ، فإن متطلبات مظهره تتغير بانتظام. إذا ، بالإضافة إلى ذلك ، يتغير المبرمجون عليه بانتظام ، فإن الكود (في حالتنا ، css) يتحول إلى فوضى. في مكان ما فئات التمهيد ، وأحيانا فئات القوالب ، يتم تخفيف كل هذا مع عكازات من عدة أجيال من مصممي التخطيط ومحنك مع أنماط مضمنة. محاولات لتغيير شيء ما أو إضافة واحدة جديدة تؤدي إلى ألعاب سحرية طويلة في "تخمين ما الطبقات التي تحتاج إلى وضعها في هذه كتلة HTML!". أريد التخلص من كل شيء وإعادة كتابته من نقطة الصفر. لكن هنا ، في الواقع ، لقد بحثت فقط لإضافة حقول جديدة بسرعة إلى النموذج ، ولديّ ما يكفي من المهام في النهاية الخلفية ... في الواقع ، سننظر في السبب الذي دفعني إلى كتابة هذه المقالة ، في المثال الأول.
حجم الإدخال
لذلك ، لدينا طريقة عرض قياسية لعناصر النموذج ، والتي نريد تغييرها قليلاً ، على سبيل المثال ، تقليل الارتفاع. ما هي طرق القيام بذلك بحيث تتوافق المدخلات مع حوت واجهة المستخدم؟
يمكنك إدراج أنماط مضمنة! سيكون الأمر ممتعًا للغاية - ثم انسخ كل قطعة القدم هذه في كل إدخال!شخص ما سوف يضحك ، لكنني أرى بانتظام مثل هذه القرارات. لحسن الحظ ليس في هذه الحالة ، لكنه يفعل. ماذا يحدث إذا فعلنا هذا؟ سيتعين عليك نسخ أوصاف النمط الطويلة في كل إدخال ، مما يؤدي إلى تضخيم القالب وجعله أقل قابلية للقراءة.
دعنا نكتب فصلنا الخاص ، الذي سنصف فيه إعدادات الارتفاع اللازمة ، وفي نفس الوقت نغير حجم الخط!نعم إنه هو. "H40_px-16." من اسم الفصل ، من الواضح على الفور ماذا يفعل؟ قابلت شيئًا كهذا عندما كنت أحاول أن أفهم لماذا تكون المدخلات الجديدة أكثر ثراءً من اللازم. نظرت إلى الكود في نفس القالب ووجدته. ما هي العواقب التي تنتظرنا في هذه الحالة؟ من حيث المبدأ ، لا شيء حرج. في كل فئة من عناصر النموذج ، بالإضافة إلى "التحكم في النموذج" ، سنضيف "h40_px-16". بحاجة إلى أن نتذكر ، أو وثيقة. وإذا كان هناك شرط للقيام بكل عناصر النموذج بخلفية خضراء؟ فقط أضف فصلًا آخر ، "b_g". ثم واحد آخر ...
تمديد الطبقات الحالية لعناصر النموذج؟من النادر جدًا رؤية هذا الحل ، رغم أنه يبدو لي أنه على السطح. وفي رأيي - الأصح. يتيح لنا ذلك حفظ عدد الفئات التي يجب تحديدها في العنصر ، ولكن الأهم من ذلك ، أنه يقلل من مقدار الحيرة بين المطورين الذين يحاولون العمل مع هذا الرمز. إذا كان التغيير المطلوب يؤثر على جميع عناصر هذا النوع ، فنحن ببساطة نضيف مجموعة قواعدنا الخاصة بـ "التحكم في النماذج" ، وكل المدخلات تغير طولها وخطها وخلفيتها وما إلى ذلك.
حل مخصص
وفقًا لمجموعة أدوات واجهة المستخدم ، تحتاج إلى إضافة حل مبتكر لم يسبق له مثيل من قبل على الموقع! ويكتب من الصفر. حقا؟ لا ، يمكنني السماح بذلك إذا كنت تستخدم pureCSS - إطار عمل جيد ولكن أضيق الحدود - وتحتاج إلى تنفيذ شيء غير مدرج فيه. ولكن إذا كنت تستخدم bootstrap - مع وجود احتمال كبير للغاية ، فأنت بحاجة فقط إلى إعادة قراءة الوثائق.
لنلقِ نظرة على حالة مهملة للغاية حيث يكون للموقع تطبيقه الخاص للشارات. مع bootstrap متصلة. وهكذا ، يحتاج أحد المطورين الذين لم يشاركوا في إنشاء هذه الشارات إلى إضافتهم في مكان ما على الموقع.
- أولاً ، ينظر إلى وثائق bootstrap ، وينسخ الحل من هناك.
- نظرًا لأن هذا بصريًا لا يتوافق مع حوت واجهة المستخدم ، فإنه يبحث عن وثائق حول الحل المبتكر المستخدم.
- إذا لم تكن هذه الوثائق (والأرجح أنها ليست كذلك) ، فإنه يبحث في التعليمات البرمجية للحصول على أمثلة حول كيفية تنفيذ ذلك.
- بعد نسخ فئة beijik المطلوبة ، يرى أن الشارة أصبحت صحيحة الآن ، ولكنها زرقاء ، ويحتاج إلى اللون الأحمر.
- بعد العثور على ملف css الذي يصف فئات واجهة المستخدم الخاصة بالحوت ، فإنه يكتشف أن اللون الأحمر لم يوضع ، ويضيف التنهد فئة "beijik-red"
الآن ، دعونا نقارن هذا بالموقف عندما تم إعادة تعريف فئة الشارة لتنفيذ الشارة الخاصة بها ، وتم وصف تطبيق اللون في الوثائق:
- أولاً ، ينظر إلى وثائق bootstrap ، وينسخ الحل من هناك.
- تجد الوثائق كيفية إضافة أحمر: شارة حمراء
لقد درسنا هنا مثالًا على ضرورة تغيير الحل الجاهزة فحسب ، بل وأيضًا لتوسيعه ، لأننا غير راضين عن الوظيفة خارج الصندوق (لا يكون للشارات في bootstrap3 لون مخصص). في هذه الحالة ، مع ذلك ، يبقى الحل الأفضل لتجاوز الفئة الموجودة ، وفقط بعد ذلك - أضف صفك الخاص.
بالطبع ، تم تحسين الأمثلة التي قدمتها تمامًا ، لكنني واجهت حقًا موقفًا حيث بحثت أولاً عن حل في وثائق bootstrap ، ثم في الوثائق الخاصة بالقالب المستخدم في الموقع (لحسن الحظ ، كانت هناك وثائق لذلك) ، ثم بحثت عن ملفات css حيث وكيف تم إعادة تعريف السلوك القياسي وكيف تم تطبيق التماثلية - لكن في النهاية كتبت أساليبي الخاصة من أجل إرجاع (!) الإمكانيات التي كانت في الأصل.
إذا كنت لا ترغب في إيذاء زملائك وتريد تسريع عمل الفريق ككل ، فعليك الالتزام بالقواعد التالية عند إنشاء أنماطك الخاصة للموقع:
- تحقق من كيفية تنفيذ الوظيفة الضرورية في الإطار المستخدم (تتذكر - على الأرجح أنها موجودة).
- ابحث عن الفئات التي تحتاج إلى إعادة تعريف من أجل إلقاء نظرة على المطلوب.
- إذا لم يتم تنفيذ الوظيفة ، أو لم يتم تنفيذها بالكامل - قم بالتنسيق مع الزملاء بطريقة ملائمة لتوسيع الوظيفة ، وحاول توثيقها للمستقبل.
- إذا كانت الوظيفة مطلوبة ليس في كل مكان ، ولكن فقط في صفحة معينة - ضعها في ملف منفصل وقم بتوصيلها / تجميعها (لا توجد أنماط مضمنة ، من فضلك)
خاتمة
كل ما سبق هو رأيي الشخصي. لست مطورًا محترفًا للواجهة الأمامية ، وعادةً ما أواجه أتش تي أم أل و css عندما أضيف بعض الوظائف الجديدة - إنه من المناسب بالنسبة لي أن أقوم بتكوين الواجهة الأمامية والخلفية على الفور ، ومن ثم أعطيها لتمشيط التصميم. إذا كان فريقك قد أنشأ عمليات ، ووصف قواعد الكود الجيد ، والإرشادات المترجمة لجميع المطورين ، وكل شيء يمر بمراجعة الكود - يمكنك أن تضحك فقط على هذا المقال ، فلن أمانع. إذا تبين أن المقال مفيد لشخص ما ، فليس من العبث أن أضع أفكاري المشوشة.