CSS! هام: ما هو ومتى يتم استخدامه

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

ما هو CSS المهم؟

تشير الخاصية المهمة! في CSS إلى أن أي قاعدة يتم إرفاقها بها لها الأسبقية على القواعد الأخرى. إنه يمثل الأولوية القصوى للعنصر والمحدد الذي يستخدم معه ، وبالتالي يتيح للمطورين والمصممين تحكمًا محددًا في تصميم الأجزاء الفردية من الموقع. في معظم الحالات ، يعني ذلك تجاوز التصميم الافتراضي للموقع المضمن في styles.css أو custom.css .

كل مثيل لـ! المهم ينطبق فقط على السطر المحدد الذي يظهر عليه . لذا يمكنك استخدام الخاصية في بعض أجزاء المقتطف وليس كلها. يبدو رمز CSS لـ ! هامًا كما يلي:

.example-class {
	color:#fff!important;
}

الشيء الأساسي الذي يجب تذكره مع ! المهم هو ذو شقين:

1. يجب أن تكون الكلمة " مهمة" مسبوقة دائمًا بعلامة تعجب (!)
2. يجب أن تكون الفاصلة المنقوطة دائمًا في نهاية السطر ، بعد! التصريح المهم

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

سيعمل كل مصمم في وقت ما أو آخر عبر علامة CSS المهمة وعليه اتخاذ قرار. هل هذا يستحق تجاوز التصميم الافتراضي للموقع؟

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

متى تستخدم CSS هام

الاستخدام الأساسي (والأكثر قبولًا على نطاق واسع) لـ ! المهم هو عندما تريد تصميم فصل يتفاعل مع محدد أساسي بشكل مختلف. ربما تريد أن يكون عنوان العنوان والمعلومات الوصفية على مدوناتك خطًا ولونًا مختلفين عن باقي موقعك. يتم توريث التصميم الافتراضي لهذه العناصر من محددات h1 و p في ملفات CSS. سيتم عرض كل ما قمت بتعيينه لإعدادات الموقع الافتراضية في ملفات .css أو أداة تخصيص سمة WordPress.

p {
	font-weight: 400;
	font-size: 1.1rem;
	line-height: 1.7;
	color: #111;
	font-family:'Roboto';
}

h1 {
	margin-top: 30px;
	margin-bottom: 15px;
	color: #000;
	font-family:'Lato';
}

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

h1.entry-title, p.post-meta {
	color: white!important;
	font-family:'Poppins'!important;
}

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

هذا النوع من التخصيص الفردي هو الاستخدام الأساسي لـ ! مهم . لكن ليس الوحيد.

استخدم CSS هام لحماية الفئات والمعرفات والعناصر

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

ما عليك سوى تسمية العنصر بفئة أو معرّف ، ثم ضع ! مهم في كل سطر.

.youtube-embed {
	font-family:'Exo'!important;
	font-weight: 700!important;
	line-height:1.4rem!important;
	margin-top:25px!important;
	margin-left:auto!important;
	margin-right:auto!important
	color:#449928!important;
	padding:11px!important;
	background:#998899;
}

هاهو! مُثبت في المستقبل من التغييرات المنتظمة في أوراق الأنماط الخاصة بك.

استخدام الأنماط المضمنة

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

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now!</p>
</div>

هذا مهم لعدة أسباب. الأول هو أنه يمكنك التحكم في أي سطر من التعليمات البرمجية في صفحتك على وجه التحديد باستخدام style = ”x: y! important؛” والثاني هو أنه يمكنك تجاوز أي CSS تم تطبيقه بالفعل على تلك الصفحة. حتى لو كانت هذه القيمة مهمة أيضًا. على سبيل المثال:

<style> 
	p { 
	    color:#313373!important;
	    font-size:2rem; 
	} 

    </style> 

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now, even though there's another !important tag
		applied to the paragraph selector on this page!</p>
</div>

حتى إذا كان هناك نمط HTML مضمن باستخدام <style> </style> يستخدم ! المهم في نفس المحدد ، فإن CSS المضمنة التي تستهدف الفقرة المحددة ستكون هي التي يتم عرضها.

احذر من تكديس العلامات المهمة

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

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

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

تغليف

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

ما هو شعورك حيال استخدام CSS! المهم في مشاريعك؟

المادة مميزة صورة من wan wei / shutterstock.com