إذن متى لا يزال من الممكن استخدام! هام؟

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

كيف يعمل!

في CSS ، نستخدم آلية الخصوصية لتحديد أولويات الأنماط. نكتب شلالات أو محددات معقدة ، ونزيد من وزن المحدد ، وبالتالي نوضح للمتصفح أولوية بعض الأنماط على الآخرين.

على سبيل المثال:

.content .title { color: red; } .title { color: blue; } 

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

لذلك ، باستخدام نفس المثال ، ولكن مع! هام ، اكتشفنا فجأة أنه لا يهتم بخصوصياتك.

 .content .title { color: red; } .title { color: blue !important; } 

سوف يكون العنوان أزرق! تنتهك هذه الخاصية التدفق الطبيعي للقواعد التي كتبناها وتعطي الأولوية القصوى للأنماط.

حسنا ، رغم ذلك ، كيف "يبصقون" ... ليس حقا ، ويبصقون. لنقم بإضافة مستورد آخر.

 .content .title { color: red !important; } .title { color: blue !important; } 

والعنوان أحمر مرة أخرى. لأن لدينا اثنين! صراعات مهمة ، ويتم حل هذا الصراع من خلال مقارنة أوزان المحددات.

المستورد سيء عندما يكون:

 .title { color: red; } 

"حسنًا ، كتبت باللون الأحمر ، لماذا ليس عنواني أحمر؟ وإذا كان الأمر كذلك؟ "

 .title { color: red !important; } 

"! ممتاز الأحمر! " ولكن هل هو جيد حقا؟

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

أداة للإصلاح

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

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

ماذا يعني سريع؟ هل من الصعب وطويل للغاية معرفة الوزن الضروري للمُعاد المحدد لإعادة التعريف؟ نحن نستخدم DevTools بنشاط كبير في التطوير ، ولدينا الإجابة هناك لحل هذه المشكلة.

نحن نتفحص العنصر الذي نريد تغييره. لونه الحالي أسود. نحن ننظر إلى ما محدد تم تعيين هذا اللون ل؟



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



هل هي طويلة؟ يبدو لي أن هذا يختلف قليلاً في الوقت المناسب عن الكتابة! مهم ، لكنه أكثر صحة وأكثر أمانًا.

حلول الطرف الثالث ورمز شخص آخر

الإجابة الثانية الأكثر شيوعًا على سؤال حول الحاجة إلى استخدام المستوردين: "أنا أستخدم! مهم عند إعادة تحديد أنماط مكتبات الإضافات والإضافات أو CMS-ok . "

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

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



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

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

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

مهم للخير

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

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

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

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

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

المساعدين

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

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

 .warning { color: red; } 

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

عندما لا يزال ذلك ممكنا

هذا صحيح وطبيعي للاستخدام! مهم عندما تحتاج إلى تجاوز الأنماط المضمنة أو غيرها! هام.

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

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

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

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