חמשת כלי ה- CSS המובילים למפתחי ומעצבי אתרים

CSS עשתה דרך ארוכה, אך הכלי סביבו טרם התקיים.


אם אתה מרגיש שכתיבת CSS זה כמו להילחם במפלצות בבור זפת, אתה לא לבד. אמנם CSS היא אחת הטכנולוגיות הבסיסיות ביותר המפעילות את הרשת, אך זו אינה שפת תכנות או מסגרת ראויה כשלעצמה. כתוצאה מכך, ברגע שהפרוייקט שלך מתחיל להיות בולט יותר, כך גם הבלגן – נראה כי כללי הבורר בכל מקום, וקשה למצוא מה היכן; כשאתה מכיל גופנים, CSS חיצוניים, JS ונכסים אחרים בדפים שלך, נראה כי הגודל הסופי של הצרור גדל על הסף, ואתה תוהה לאן איבדו האידיאלים של חזיתות מהירות וידידותיות למשתמש..

אבל זה לא צריך להיות כזה. כיום הפיתוח סביב CSS התפתח לרמה שאפשר לאלף רק את זרימת העבודה אלא גם מהנה. במאמר זה אני הולך לדבר על חמישה כלי CSS כאלה שמצאתי בעלי ערך עצום בעבודתי. נמנעתי במודע, כולל כלים “צעצועים” כמו מחוללי CSS, מחוללי תפריט וכו ‘, מכיוון שהם יוצרים יותר בעיות ממה שהם פותרים.

רכבת CSS מגיעה! בוא נלך! �� ��

PostCSS

אם אתה אוהב JavaScript, תאהב את הרעיון שנוכל להוסיף ולשלוט ב- CSS באמצעות JavaScript. וזו בדיוק היכולת שזו PostCSS מספק.

עם זאת, זה לא רק סוכר תחביר מבוסס JavaScript על פני CSS. PostCSS עוטף כמה חבילות / תכונות עוצמתיות יחד, וכתוצאה מכך זרימת עבודה נעימה וקלה בהרבה בעת התמודדות עם CSS. לדוגמה:

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

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

div {
טור אבוד: 1/3
}

הופכת למערכת CSS מפוצצת עם כמעט כל מקרי הקצה המטופלים:

div {
רוחב: Calc (99.9% * 1/3 –
(30px – 30px * 1/3));
}
div: ילד בן (1n) {
לצוף: שמאל;
שוליים ימניים: 30 פיקסלים;
ברור: אין;
}
div: ילד אחרון {
שוליים ימניים: 0;
}
div: ילד בן (3n) {
שוליים ימניים: 0;
לצוף: מימין;
}
div: ילד בן (3n + 1) {
תנקה את שניהם;
}

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

PurgeCSS

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

למי שאולי לא יודע מה העניין הגדול: הנה סקירה מהירה. כשאתה בונה אפליקציות של עמוד בודד המשתמשות במסגרות חזיתיות כמו React, Angular, Vue וכו ‘, אתה עובר מה שמכונה “תהליך בנייה”. בעיקרו של דבר, אתה מקודד את כל ה- CSS, JS, SASS וכו ‘, בקבצים נפרדים (מארגן אותם כפי שנראה לך האינטואיטיבי ביותר), אך ברגע שתסיים, אתה אומר לבוראי “לבנות” את הדבר. מה שכן, זה לקרוא את כל קוד המקור שכתבת, להחיל עליו מסננים שונים (מיניפיון, ערפול / איגולציה וכו ‘), ולירוק את הפלט לקבצים בודדים, בדרך כלל “app.js” עבור כל ה- JavaScript, ו “App.css” לכל CSS. קבצים אלה יחד עם “index.html” רזה הוא כל מה שאתה צריך כדי להפעיל את הקצה הקדמי של היישום. החיסרון הוא שמכיוון שהכל נכלל בקבצים הסופיים הללו, גודלם לרוב משתרע מעבר למה שמותר לזמן תגובה מהיר; לדוגמה, זה לא נדיר לראות “app.js” שנמצא מעל 500 KB!

PurgeCSS מתווסף כחלק מזרימת העבודה לבנייתך ומונע התקבצות CSS שאינה בשימוש לפלט הסופי. מקרה שימוש טיפוסי הוא Bootstrap: זוהי ספריה בינונית עם מספר שיעורי ממשק משתמש עבור רכיבים שונים. אם היישום שלך משתמש, נניח, 10% משיעורי Bootstrap, שאר 90% הם הגלישה היחידה בקובץ ה- CSS הסופי שלך. אבל בזכות PurgeCSS, ניתן לזהות קבצי CSS שלא השתמשו כאלה ולמנוע מהם את תהליך הבנייה, וכתוצאה מכך קבצי CSS סופיים קטנים בהרבה (צמצום של פי 5-6 פעמים הוא די נורמלי).

אז קדימה, “לטהר” CSS מיותר עם PurgeCSS! ��

רוח גבית

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

שם משתמש

סיסמה

אנא בחר סיסמא.

להתחבר


שכחת את הסיסמא?

© 2019 Acme Corp. כל הזכויות שמורות.

“האם זו בדיחה או מה ?! מה כל השיעורים הקטנים והמעצבנים האלה? בבדיקה מקרוב, מדוע לעזאזל אני מגדיר את השוליים, הריפוד והצבע ישירות יחד עם ה- HTML? האם זה 2019 או מה? “

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

לפני שנמשיך הלאה, שקלו את השאלות הבאות:

  • נמאס לכם לשנן שיעורי מסגרת סטנדרטיים ואת הפונקציות שלהם כך שתוכלו להתאים אישית את העיצובים שלכם לפי רצונכם? דוגמה טובה היא שינוי המראה וההתנהגות של סרגל הניווט של Bootstrap.
  • האם אתה חושב שמסגרות פופולריות כמו Bootstrap הן יתר על המידה ומנסות לעשות הרבה יותר ממה שהן צריכות?
  • האם אתה מוצא את עצמך מערבב מסגרות כי אתה רוצה את הטוב מכל העולמות?
  • האם אתה רוצה לקבל שליטה רבה יותר על העיצובים שלך ובכל זאת למצוא את חוויית CSS וניל מהממת?

אם התשובה לכל אחד מאלה היא “כן”, אתה זקוק קשה לרוח הזנב. עכשיו נראה מה זה טיילוונד ומה הוא עושה.

רוח גבית היא מה שמכונה CSS-tool-first, ששונה ממה שאנחנו עושים בזרימות העבודה היומיומיות שלנו: CSS סמנטי. ההבדל בין CSS סמנטי ל- CSS של כלי השירות הוא שהראשון מנסה לקבץ אלמנטים בסגנון לפי שם הקטעים הוויזואליים המופיעים בדף. אז אם יש לכם תפריט ניווט, כרטיסים, קרוסלה וכו ‘, בדף, הדרך הסמנטית לעשות דברים תהיה לקבץ כללי סגנון של CSS תחת שיעורים כמו .nav, .card, .carousel וכו’, אשר חלקי המשנה שלהם מסומנים בהתאם (לדוגמה,. card-body, .card-footer, וכו ‘). זו ללא ספק הגישה הנפוצה ביותר ל- CSS, וכולנו מכירים אותה דרך מסגרות כמו Bootstrap, Foundation, Bulma, UI Kit, וכו ‘..

מצד שני, סגנון “השירות” של כתיבת שמות CSS בשמות מדויקים בהתאם לפונקציה שלהם: מחלקה השולטת בשולי הצדדים העליונים והתחתונים, תיקרא בשם .margin-y-medium וניתן ליישם בכל מקום ב- HTML סימון היכן שצריך מרווח זה. אמנם זה מציג מעט זחילה של שם כיתה (פשוט עיין במהירות בקוד ששיתפתי קודם או בתמונת המסך – כל כך הרבה שיעורים!), הכוונה של CSS היא ברורה כשמש: אין צורך לקפוץ הלוך ושוב בין התיעוד, ה- CSS וה- HTML שלך כדי להבין את השמות הנכונים ואת האפקט הנכון.

זו דרך מאוד משחררת, אבל יש גם תפיסה: עליכם לבסס את היסודות של CSS בצורה תקינה (כולל מושגים מודרניים כמו ה- Flexbox). הסיבה לכך היא כי Tailwind אינה מציעה סגנונות שאינם מהקופסה עבור רכיבים כלשהם בדף שלך, וזה תלוי בך לבנות את הסגנונות מאבני הבניין הנתונות. בעיה נוספת היא זו של ההתקנה: Tailwind מאפשרת לקבץ כמה שיעורי CSS ביחד למה שנקרא רכיבים, אך הדבר נעשה באמצעות JavaScript ודורש מטעין ו bundler כמו Webpack..

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

סאס

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

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

כאשר אנו כותבים HTML אנו מקנים אלמנטים בתוך אלמנטים אחרים. אבל כשאתה כותב CSS, עלינו לכתוב היררכיה שטוחה של חוקים, שמקשה על “להתאים” נפשית את ה- CSS ל- HTML. בעזרת Sass אתה יכול לחקות את מבנה העמודים בתוך קבצי הסגנון שלך:

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

CSS Linters

מכיוון שמעצבי אתרים (ומפתחי ממשק משתמש – אם כי אני תוהה כיצד שני המונחים האלה שונים ��) משתמשים בעורכי טקסט פשוטים – או כפי שקורה בימינו, קוד היישר מכלי ה- Chrome dev – הם לעיתים רחוקות זוכים לשמוע על או ליהנות מ- מרקם. מצד שני, מתכנתים המשתמשים בעורכי טקסט טובים כמו קוד VS, טקסט נשגב או IDEs אחרים מכירים את הכלי הזה היטב מכיוון שזהו הטבע השני. בכל אופן, העניין הוא שאם אתה אחד מאותם מפתחי CSS שמטביעים ב- CSS מבולגן, אתה יכול להפיק תועלת מרקם.

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

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

סיכום

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

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map