סשה גרייף תהה בגלוי אם CSS הפך להיות, אתה יודע, גדול מדי. עם כל הדברים הטובים שנשלחו בדפדפנים בשנתיים האחרונות - שאילתות מכולה! תחביר צבע יחסי! שכבות אשד! מאפיינים לוגיים! טווחים בשאילתות מדיה! טרנספורמציות בודדות! :has() בורר! - וכל מה שנמצא באופק האפשרי - CSS משתנה! קינון! ערבוב צבעים! אנימציות מקושרות לגלילה! סגנונות בהיקף! - אין ספק שיש עקומת למידה שונה עבור CSS בימים אלה עבור פרונט-אנדרים חדשים וותיקים כאחד.
ייתכן שהייתה תקופה שבה ניתן היה לדעת את רוב מאפייני ה-CSS וכיצד הם פועלים. הימים האלה חלפו מזמן, לפחות עבור יד ותיקה כמוני. אבל זה סוג של מעלה את השאלה: איזה CSS אתה בהחלט צריך לדעת?
וינקאס סטוניס לאחרונה דקר ברשימה. כריס להרכיב אחד מבוסס על תכונות שפורסמו מאז CSS3. סביר להניח שיש לך מושג מה תכלול ברשימה. אם הייתי צריך להרכיב 5 מובילים ולהגביל את עצמי לנכסים ולבוררים בלבד, זה עלול להיראות בערך כך...
writing-mode
אני לא יכול להגיד מספיק על writing-mode תכונה. מה שהופך את זה לחשוב - במיוחד מנקודת מבט של למידה - הוא שהוא מכין אותך לעקרונות כוללניים המתייחסים ליצירת פריסות, ללא קשר לשפת המשתמש. הבנה טובה של writing-mode הולך להוביל להבנה של מאפיינים וערכים לוגיים, ואלה, בתורם, מכינים את הבמה להבנת זרימת מסמכים וחשיבה במונחים של block, inline, start, ו end ולא כיוונים פיזיים.
display
אני מתקשה להאמין שכל אחד יכול לכתוב CSS טוב בלי שיהיה לי אחיזה איתנה ב display תכונה. זה גם נכס וגם מסגרת ליצירת פריסות. אין Flexbox או CSS Grid בלעדיו, מה שהופך אותו לסוג של שומר סף להבנת התכונות החשובות הללו.
בנוסף, ה- display נכס משלים בצורה מושלמת writing-mode. זה בדיוק מה שאתה צריך פעם אחת writing-mode חשף אותך לזרימת מסמכים ולכיוונים לוגיים. תזדקק למאפיין כדי לשנות את הזרימה הרגילה של אלמנט (כמו שינוי אלמנט בלוק לרכיב מוטבע) או להתחיל לפרוס דברים (כמו יצירת הקשר של פריסה גמישה) וזה המקום display נכנס לשחק.
margin / padding / border
אוף, אני לגמרי בוגד כאן אבל תחשוב ללמוד margin, padding, ו border ביחד זה די בלתי נמנע. כולם חלקים של דגם הקופסה, כולם עוזרים במרווחים ובסטיילינג, וכולם דורשים היכרות יחידות אורך CSS. לדעת מה המאפיינים האלה נועדו לעשות וכיצד הם תורמים לגודל המחושב של אלמנט בהחלט נותן לך הרבה יותר שליטה בסטיילינג, ומפיג כל בלבול בנוגע למה אלמנט הוא בגודל שהוא - כאב ראש CSS נפוץ!
::before ו ::after
עוד אחד שבו אני קצת בוגד. כן, ::before ו ::after הם שני פסאודו-אלמנטים בודדים, אבל שוב, אני לא יכול לדמיין ללמוד על אחד בלי השני. זה דו-פר!
אני זוכר כמה מדהים זה היה בשבילי ללמוד שאלו היו קיימים ואפשר להשתמש בהם כדי ליצור מהם הכל אפקטים מגניבים של ממשק משתמש כדי להשלים איורים יחידים. זה פותח אפשרויות חדשות ומספק הצצה ראשונה עד כמה ה-CSS באמת חזק.
@media
אוף, אני כבר בפריט החמישי והאחרון שלי ברשימה ומרגישה שעדיין יש כל כך הרבה טוב CSS ששייך לכאן. אבל אם אני צריך לבחור דבר אחרון, זה יהיה שאילתות מדיה. למה? כי זה מרכיב חשוב ליצירת פריסות זורמות וגמישות והקשרי צפייה שונים. שאילתות מיכל אולי יגמר את זה מהרשימה שלי כשהיא מתבגרת, אבל לעת עתה, @media הוא פריימר נהדר לעיצוב רספונסיבי.
מעבר לכך, @media הוא צעד ראשון נחמד לאיכויות המותנות של CSS. בין אם אנו כותבים שאילתה על סמך סוג המכשיר שבו נעשה שימוש (למשל, screen or print) או כאשר שדה התצוגה של הדפדפן עומד בקריטריונים מסוימים (למשל, width >= 768px,) @media תחביר שימושי להפליא ליצירת פריסות המותאמות לתנאים שונים.
אה, ואפילו לא נגענו באיך @media מתייחס לנגישות, הודות ליכולתו להחיל סגנונות על סמך העדפות המשתמש (לְמָשָׁל, prefers-reduced-motion). לכן, בנוסף ליצירת פריסות מותנות, שאילתות מדיה הן הצעד הבא נחמד לקראת הבנת עיצוב כולל.
אזכורים מכובדים
קשה לזקק את ה-CSS לרשימה של חמישה מאפיינים וסלקטורים שחובה להכיר, במיוחד עכשיו כשה-CSS חזק יותר היום ממה שהיה, למשל, אפילו לפני חמש שנים. יש עוד מספר פריטים שבאמת רציתי לכלול, כמו (ללא סדר מסוים):
calc()has()colorfontoverflowposition(במיוחד זה)z-index
אבל אני עומד על הבחירות שלי. לימוד CSS חשוב יותר משינון רשימה של מאפיינים. זה מסע ואני חושב שהחמישה שבחרתי חוצבים נתיב למידה קטן ונחמד שיוצר את הבמה לכתיבת חוקי סגנון טובים ולשלבים הבאים לצלילה עמוקה יותר לתוך CSS.
בסדר, ספר לי את שלך!
לא מסכים עם הרשימה שלי? אתה צריך! אני בטוח שיש לך כמה דעות חכמות ואני רוצה לראות איך היית מסדרת רשימת 5 המובילים.
