تحليل المهمة حسب التصميم (sass ، الصلصال ، gulp ، bem)

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

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

ربما كان هذا أصعب شيء بالنسبة لي.



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



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

عن طريق الصدفة ، عن طريق الصدفة ... تجد المشكلة في ورقة أنماط متتالية ، أو بالأحرى ، في الطريقة التي يتم بها تطبيق الأنماط على العناصر. في بداية رحلتي إلى الويب ، قرأت بالتأكيد أن المحددات لها أولويات تطبيق مختلفة. باختصار ، ثم بالنسبة إلى محدد (div ، ul ، a ، p ، إلخ) محدد -1 نقطة ، للفئة 10 ، للمعرف 100.



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

قد يشمل ذلك بنية ملف css (sass). هناك كتلة "محفظة" ، لديها مجموعة من العناصر من النوع "محفظة __ *" ، ولكن هناك فئتان في هذا التعشيش لا لزوم لهما ، في رأيي.

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



ولكن هذا ، في رأيي ، هو مثال جيد على BEM

قرأت عن هذه المشكلة في أحد المقالات على BEM ، لكنني شخصياً واجهتها أولاً. انها تشبه الى حد بعيد مشاكل مع bootstrap ، كما كان ... هناك فئات طويلة. كيف يمكنني الحصول على أقل عدد ممكن من الفصول؟

هذا هو الافتراضي BTN.



وهذه هي أزرار المعدلة بالفعل ...

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

كان هناك 6 عناصر مماثلة على الصفحة. عند استعلامات الوسائط ، كان من الضروري إخفاء عدد معين من العناصر. بعد كل شيء ، لا تقم بإنشاء فئات جديدة لكل كائن. اضطررت لاستخدام فئة الزائفة () للطفل. في السابق ، كان يستخدم فقط بطريقة تم اقتصاصها (الطفل (1) ، الطفل (3) ، الطفل (4) ، وما إلى ذلك) ، والآن كانت هناك حاجة لإخفاء جميع العناصر باستثناء العنصرين الأولين. بعد أن أمضيت 5 دقائق في قراءة الوثائق ، استخدمت nth-child (n + 3) ، وبالتالي حصلت على النتيجة التي احتجتها.



مثال آخر على كيفية أخذ العنصر المرغوب فيه من خلال مجموعة من المحددات ، وعدم الخروج بفصل خاص لهذا العنصر.



انظر الصورة أدناه. سيحدد الإدخال التالي div.1> p الكائنات التي تحتوي على الفئة "2" فقط ، أما div.3> p فستتلقى بناءً على ذلك الكائنات التي تحتوي على الفئة "4". الصورة توضح كيف يعمل هذا. يتم تحديد أقرب العناصر أسفل التسلسل الهرمي.