כפתורים וקישורים

משך זמן קריאה: 3 דקות

כן, כן, אני יודעת שאנחנו כבר בשנת 2020 ואין שום שינוי בסמנטיקה של כפתורים או של קישורים. אז מה כל כך מעניין בהם פתאום? האמת, לא ברור, אבל שני פוסטים שפורסמו בחודש האחרון ועוסקים בנושא הביאו אותי לכתוב את הפוסט הזה 🙂

נתחיל עם ההבדל המהותי בין כפתורים לקישורים: כפתור – מבצע פעולה בעמוד, ולעומת זאת קישור – משנה את כתובת ה-url. מעבר לזה, לפעמים העיצוב שלהם עשוי להיות זהה (תלוי במי שעיצב.ה), ולכן בכתיבת ה-css עדיף להמנע  מטירגוט של האלמנטים <button> או <a>, ובמקום זה כדאי לתת להם קלאס. כך אפשר לשמור על דינאמיות, למקרה שכפתור פתאום הופך לקישור או להפך. ל-Smashing-Magazine יש פוסט נחמד על הנושא 🙂 (ותודה ללאה כהן על הלינק).

פוסט השוואה של CSS Tricks

CSS Tricks הוציאו פוסט מאוד מפורט שמשווה בין כפתורים וקישורים. בפוסט עוברים ומפרטים את המאפיינים השונים שיש לכל אחד מהאלמנטים, וההשוואה נעשית צד מול צד (כמו שרואים בתמונה למעלה). אני אישית מאוד אוהבת את הפוסטים האלה שמפרטים הכול בצורה של השוואה. שווה קריאה 🙂

פוסט שני שהביא אותי לכתוב את הפוסט הזה הוא של Ahmad Shadeed שכתב פוסט על עיצוב כפתורים (ב-css כמובן). הפוסט מאוד מפורט (יש לו אפילו תוכן עניינים!) ונעים לקריאה. לכאורה מתאים למי שלא מכיר את אלמנט הכפתור אבל למעשה מתאים גם לכל מי שכבר עיצב כפתור או שניים בחייו. פוסט של לגזור ולשמור 🙂

CSS של כפתורים

כשמדובר בכפתורים (או קישורים, אבל בעיקר כפתורים) יש קונבנציות שונות לשמות וקלאסים. למשל השיטה של BEM בה יש קלאס ראשי של כפתור כמו למשל btn, וכדי להרחיב את העיצוב לוואריאציות השונות של כפתור מוסיפים עוד קלאס כמו למשל –btn--primary בנוסף על btn הראשון.

See the Pen
BEM Buttons by Nika Zawila (@nikazawila)
on CodePen.

לעומת השיטה הזאת, יש את השיטה של אלעד שכטר שמסתמך על class attribute המכיל מילה או צמד מילים של שם הכפתור. ניקח לדוגמה כפתור מרכזי שנקרא לו  common-button. כפתורים אחרים יקבלו שם שמכיל את השם של הקלאס הראשון, כמו למשל common-button-1. הכפתור ה"גנרי" שלנו (common-button) יקבל את העיצוב שלו מתוך הסטיילים ששמנו תחת [class*=common-button] ושאר הכפתורים יקבלו גם הם את הסטיילים האלו, ובנוסף אפשר יהיה להוסיף לכפתור common-button-1 מאפיינים נוספים, או לדרוס מאפיינים שהוגדרו.

כדי ליצור מצבים שמתארים את ההתנהגות של הכפתור עצמו, מעבר למצבי focus או  hover, מוסיפים קלאס של מצב (state class) כמו למשל: is-full-line. באופן הזה, ה-css מספר את הסיפור של הכפתור, הקריאוּת של הקלאסים ברורה, אין צורך בשימוש ב-extend או mixin שמשכפלים קוד, הקוד פשוט וברור יותר ואין הרבה קלאסים על כפתור.

<button class="common-button is-full-line">I'm a button</button>
<a class="common-link" href="https://www.rachelbt.co.il/">I'm a link</a>

[class*=common-button]{
    display:inline-flex; justify-content:center; align-items:center; height:32px;
    color:$main-color; background-color:$main-color-lighten;
    more style....
    /*variations:*/
    &.is-full-line{width:100%;}
}
.common-button-1{
    /*inherit all styles from [class*=common-button]*/
    color:$common-color-1; background-color:$white; border-color:$border-color;
    &:hover,
    &:focus{color:$main-color-darker;}
}

זה נכון שמבחינת ביצועים כתיבה כזאת פחות מוצלחת ודורשת יותר משאבי דפדפן לקריאה של ה-css (למי שמתעניין יותר בפירוט אפשר לשמוע את ההרצאה של אביתר רוזנר, או לקרוא פה), אבל זה המקום היחיד בו אנחנו משתמשים בשיטה הזאת, כשהמטרה ההיא לשמור על נקיון הקוד והקלאסים.

ואסיים בשני פוסטים שלא יצאו עכשיו אבל מרשימים בזכות עצמם:

כתיבת תגובה

האימייל לא יוצג באתר.