מדריך CSS מספר 24 - החשיבות של important!

במידה ומשתמשים ביותר מכלל אחד לעיצובו של אלמנט, הכלל האחרון הוא שקובע. לדוגמה:

p {background-color: red;}
p {background-color: yellow;}

צבע הרקע יהיה צהוב ולא אדום, בגלל שהכלל האחרון הוא צבע רקע צהוב.  

אם אנחנו רוצים שהכלל של צבע רקע אדום יהיה הקובע, נצטרך להוסיף לערך הצהרת important!. בדוגמה שלנו:

p {background-color: red !important;}
p {background-color: yellow;}

עכשיו צבע הרקע יהיה אדום ולא לבן.

באילו מקרים נשקול להשתמש ב- "important!"?

במדריך קודם הסברתי שה-CSS הקרוב ביותר לעיצוב הוא שקובע, ובהתאם ה-CSS בתוך תגית html הוא שייקבע, גם אם לאלמנט יש CSS בגיליון עיצוב חיצוני. לדוגמה, אם משתמשים בעורך טקסט עשיר באתר, ואחד הגולשים בחר סגנון שחורג מעיצוב האתר. זה מצב שקשה לאתרו ולתקנו, אבל אפשר לפתור את הבעיה על ידי הוספת הצהרת important! לכלל בגיליון העיצוב החיצוני כדי שהוא זה שייקבע.

אם אנחנו עובדים עם מספר גיליונות עיצוב, ולא מצליחים לגרום שהכלל שאנחנו מעוניינים בו יבוא לידי ביטוי, יש סיכוי סביר שזה מפני ש-CSS מגיליון עיצוב אחר "דורס את הכלל שלנו", ואז important! עשוי לפתור את הבעיה.

איך נדע האם הבעיה היא בעיה של דריסה?

לשם כך נוכל להשתמש בכלי מפתחים. דוגמת כלי המפתחים של Chrome או Firefox. ב-Chrome לחיצה ימנית עם העכבר על האלמנט שמעניין אותנו בדפדפן, תפתח את האפשרות "בדוק מרכיב", ובתחתית הדפדפן נראה עמודת Styles, שאם נגלול אותה נוכל לראות את הקוד הדרוס כשעובר דרכו קו, ואת המקור של הקוד.

מוטב לנסות ולטפל בבעיה על ידי הפיכת הסלקטורים לספציפיים יותר, לדוגמה על ידי שימוש באלמנטים מקוננים, אבל זה לא תמיד אפשרי.

כמה מילות הבהרה ואזהרה

השימוש בהצהרת important! צריך להיעשות במידה המועטה ביותר האפשרית בגלל שהיא מפריעה לזרימה הטבעית של ה-CSS מאלמנטים מוקדמים לאלמנטים מאוחרים, וכתוצאה מכך עלולה להיווצר בעיה בפיתוח עתידי של ה-CSS באתר. לפיכך, נשתמש ב-important! רק בהעדר פתרון מוצלח יותר.

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים