מתוך וובינר די מוצלח על Vue שהעברתי היום, קצת יותר מדי זמן התבזבז על בעיית CSS לא צפויה. בדוגמה המקורית בוובינר כתבנו סליידר תמונות אבל אני חושב שאפשר לראות את הבעיה בקלות גם עם דוגמה יותר פשוטה, למשל קומפוננטת ה Vue הבאה שכוללת כותרת בצבע כחול:
<script setup>
</script>
<template>
<div>
<h1>Hello World</h1>
</div>
</template>
<style scoped>
h1 {
color: blue;
}
</style>
למרות שמבחינת רשימת כללי העיצוב כל מה שיש ל h1 הוא הצבע הכחול, בפועל אנחנו יודעים שהוא יקבל גם את כל כללי העיצוב שמוגדרים על אלמנטי h1 במקומות אחרים במערכת, כי ככה עובד CSS. אבל יותר מזה, יש גם אוסף די גדול של מאפייני CSS אותם ה h1 שלנו יקבל בירושה מהאלמנטים שמעליו.
הבעיה עם Vue ופיתוח קומפוננטות באופן כללי היא שבזמן כתיבת הקומפוננטה אנחנו לא יודעים איפה היא הולכת להיות במסך ולכן אותה קומפוננטה, כשמופיעה במקומות שונים יכולה לקבל כללי עיצוב שונים. בדוגמה של הכותרת הכחולה שלי, אם אני שם אותה בתוך קומפוננטת App.vue שנראית כך:
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
אז נכון שהצבע הכחול של הקומפוננטה ידרוס את הצבע של #app, אבל הכותרת תקבל מ #app את הגופן והיישור למרכז.
אם נסתכל בכלי הפיתוח של הדפדפן ב Inspect Element על ה h1 אנחנו נראה ברשימת כל כללי העיצוב שחלים עליו את הבלוק של #app עם כל הכללים הרלוונטיים:
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
כאשר color מסומן בקו מחוק ו margin מופיע בטקסט חצי שקוף. הקו המחוק מסמן לנו שיש הגדרה אחרת יותר חשובה שמשנה את הצבע, והטקסט החצי שקוף מסמן לנו שמאפיין זה לא עובר בירושה.
ולכן שימו לב- כשאתם לוקחים קומפוננטה (בויו, או בכל פריימוורק אחר) ומגדירים לה רק כללי עיצוב מסוימים, חשוב לוודא בכלי הפיתוח של הדפדפן אם היא לא קיבלה בטעות כללי עיצוב אחרים שלא חשבתם עליהם ועלולים לקלקל לכם את כל העיצוב.
מאפייני CSS הבאים עוברים בירושה ולכן יכולים להגיע לקומפוננטה שלכם גם בלי שהתכוונתם:
- border-collapse
- border-spacing
- caption-side
- color
- cursor
- direction
- empty-cells
- font-family
- font-size
- font-style
- font-variant
- font-weight
- font-size-adjust
- font-stretch
- font
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- orphans
- quotes
- tab-size
- text-align
- text-align-last
- text-decoration-color
- text-indent
- text-justify
- text-shadow
- text-transform
- visibility
- white-space
- widows
- word-break
- word-spacing
- word-wrap
