בוטסטראפ לא מכניס את העיצוב לHTML?

[MusiCode]

אני מציץ מלמעלה על בוטסטראפ, ואני רואה שאת עיקר העיצוב עושים בתוך הHTML בקלאסים.
זה לא מפר את הכלל שמפרידים בין הHTML לעיצוב בCSS?

ככה שוב נצטרך לרוץ בין הHTML לCSS כדי לעצב את המסמך?

[יוסף בן שמעון]

@MusiCode הכלל אומר לא לשים את הוראות העיצוב עצמם בתוך התגיות, אבל אם לא תשים קלאסים איך תעצב אותם ב CSS?

[avr416]

@MusiCode אמר בבוטסטראפ לא מכניס את העיצוב לHTML?:

אני מציץ מלמעלה על בוטסטראפ, ואני רואה שאת עיקר העיצוב עושים בתוך הHTML בקלאסים.
זה לא מפר את הכלל שמפרידים בין הHTML לעיצוב בCSS?

ככה שוב נצטרך לרוץ בין הHTML לCSS כדי לעצב את המסמך?

העיצוב בHTML נכתב בתוך תגית style ככה:

<div style="color:red;"> הכתב בצבע אדום</div>

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

מה שאתה רואה זה נקרא class, קלאס זה בעצם שם של מחלקה שכל מי שיש לו אותה מקבל את אותו עיצוב, כך אפשר להחיל הגדרות עיצוב (שאותם אתה מגדיר בקובץ הCSS), בהרבה מקומות שונים בHTML. ואם יש צורך לשנות משהו - אתה משנה במקום אחד בקובץ הCSS, וזה משפיע על כל חלקי הHTML שיש להם את אותו הקלאס.

למשל אם בHTML יש לך קוד כזה:

<div class="color-red"> הכתב בצבע אדום</div>

ובקובץ הCSS אתה מגדיר

.color-red{
color:red;
}

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

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

[MusiCode]

אתם מכירים את בוטסטראפ?

שם הקלאסים - הם הצורה לעצב את המסמך.
ע"י הפקודות בקלאסים, בעצם מעצבים את המסמך.

מאחורי הקלעים, הם הכינו את כל הווריאציות האפשריות...

[aaron]

@MusiCode אמר בבוטסטראפ לא מכניס את העיצוב לHTML?:

אתם מכירים את בוטסטראפ?

שם הקלאסים - הם הצורה לעצב את המסמך.
ע"י הפקודות בקלאסים, בעצם מעצבים את המסמך.

מאחורי הקלעים, הם הכינו את כל הווריאציות האפשריות...

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

אני אישית, מבין את הצד שלך, אבל שימוש בclass לא באמת מרגיש בעייתי כמו שימוש בCSS בקוד.
הרי כנראה שרוב הקלאסים שלך לא יהיו color-red, אלא קלאסים שיבואו להחיל אוסף כללי עיצוב קשורים כדי ליצור תבנית עיצוב ספציפית

[dovid]

Does bootstrap break separation of concerns and defeat the purpose of CSS?

פה יש את השאלה עם פתרון למי שבאמת אכפת לו
How to use Bootstrap whilst maintaining semantic HTML markup?

[avr416]

@MusiCode מכירים וגם משתמשים בה הרבה.
כמו ש@aaron כתב יש לבוסטראפ גם וגם, יש קלאסים שמגדירים דברים כמו alert tab dropdown וכן על זה הדרך. ויש כאלה שמגדירים את המבנה של העמוד כמו row col-1 והנקודות שבירה וכדו'.

עדיין אני ממש לא מבין מה הבעיה, וגם למיטב ידיעתי היום הגישה היא יותר לקרוא לקלאסים בשמות של העיצוב, וזה מונע הרבה צורך של כפילויות בהרבה מאד מקומות.
ודאי שעדיין צריך קלאס של item ו list-item וperson ודברים כאלה, אבל יש גם הרבה קלאסים משותפים כמו מרגין ופדינג וכו'.

לעצם הענין, אני לא מבין מה הבעיה, כי לעצם הנקודה שאי אפשר לעצב את קוד ההטמל בלא קלאסים, אני מקוה שאתה מסכים. כמו שכתב לך @יוסף-בן-שמעון.
כיון שבכל מקרה צריך לעשות קלאס הרבה יותר הגיוני לקרוא לו בשם של העיצוב (ברור שזה אמור כשמדובר בעיצוב שחוזר על עצמו), וכך ניתן במקום אחד בלבד לנהל את זה.
כמובן שכאשר כל האייטמים של הליסט יש להם אותו עיצוב - תקרא לקלאס item ולא תיתן לו עשר קלאסים של צבע ומרווח וכו', כי אז אנו חוזרים לבעיה הראשונית. וגם כאשר אתה נותן color לא תקרא לזה color-red אלא color-primary וכדו' שזה לא מתאר את הצבע עצמו, אלא את החשיבות שלו (למשל טקסט מרכזי, משני, אזהרה וכו').

[MusiCode]

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

btn btn-sm סתם חוזרים על עצמם.
ולימדוני "קוד שנמצא פעמיים, נמצא פעם אחת יותר מדי".

אי אפשר להגדיר את כל הקלאסים האלה בקובץ הcss?

@dovid אמר בבוטסטראפ לא מכניס את העיצוב לHTML?:

פה יש את השאלה עם פתרון למי שבאמת אכפת לו
How to use Bootstrap whilst maintaining semantic HTML markup?

זה לכאורה פיתרון.
אבל אין לי כוח להחיל ללמוד sass, ונראה שחייבים.

אז אין פיתרון לייבא קלאס לתוך קלאס אחר בcss?

משהו כזה:

[avr416]

@MusiCode שמת לב שגם על התגיות td a אתה חוזר כמה פעמים?

הכלל שלימדו אותך אומר אל תכתוב פעמיים את הקוד כדי לעשות אותו דבר, תכתוב אותו במקום אחד ותקרא לו מכל המקומות שאתה צריך. ואין לזה קשר לכאן, כי כאן אתה לא מצהיר על הקלאס הרבה פעמים אלא משתמש בו הרבה פעמים.
בדיוק כמו שאתה מגדיר פעם אחת פונקציה, ומשתמש בה הרבה פעמים.
למשל, אתה משתמש בפונקציה console.log() הרבה פעמים ואתה לא אומר שזה נמצא פעם אחת יותר מדי..

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

לגבי חיסכון בכתיב, אתה יכול לשים את הקלאסים המשותפים על ההורה המשותף, למשל על הtd, ובתגית a לשים רק את הקלאסים השונים.

אין חובה ללמוד sass, אבל זה מומלץ.
זה נותן לך כל מיני יכולות (קינון של css שחוסך כתיבה מסורבלת של css, שימוש במשתנים, פונקציות לולאות ועוד), אלא שאתה צריך בשביל זה קומפיילר (babel.js) שיקמפל את זה אח"כ לcss רגיל. אם אתה משתמש בפריימוורקים למיניהם בד"כ זה כבר כלול.