כיצד להשתמש ב-PostCSS כדי לנקות את עיצוב האתר שלך

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

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

הגדרת הפרויקט

נווט לתוך תיקיה ריקה, צור קובץ בשם index.html והוסף את סימון ה-HTML הבא בקובץ:

html>
<htmllang="he">
<רֹאשׁ>
<קישורrel="גיליון סגנונות"href="src/styles.css">
רֹאשׁ>
<גוּף>
<ע>פסקהע>
<div>Divdiv>
גוּף>
html>

מסמך HTML זה מעבד פסקה ו אֵלֵמֶנט. זה גם מייבא קובץ גיליון סגנונות בשם styles.css שזה בתוך ה src תיקייה. צור את הקובץ ב- src תיקייה וכלול את הכללים הבאים בסגנון CSS:

גוּףע {
צֶבַע: תפוז;
}
גוּףdiv {
צֶבַע: כְּחוֹל;
}
גוּף {
לְהַצִיג: רֶשֶׁת;
}

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

יצירת פרויקט Node.js והתקנת PostCSS

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

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

כדי להשתמש ב-PostCSS, הדבר הראשון שעליך לעשות הוא לאתחל פרויקט Node.js חדש:

npm init -y

פקודה זו תיצור קובץ package.json המכיל את ערכי ברירת המחדל עבור האפליקציה שלך.

לאחר מכן, התקן גם את PostCSS וגם את PostCSS CLI. החבילה השנייה מאפשרת לך להריץ את PostCSS משורת הפקודה:

npm i --save-dev postcss postcss-cli

ה --save-dev הדגל מתקין את שניהם חבילות npm כתלות במפתחים; אתה הולך להשתמש רק ב-PostCSS ובפלאגינים שלו כדי לעבד את קוד ה-CSS במהלך הפיתוח.

כדי להתחיל להשתמש ב-PostCSS דרך ממשק שורת הפקודה, היכנס לתוך שלך package.json קובץ וצור את הפשוט לבנות: css פקודה להעברה עם PostCSS:

"תסריטים": {
"בנה: css": "postcss src/styles.css --dir dest -w"
}

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

כשאתה מייבא את ה-CSS שלך ל-HTML, ודא שאתה מייבא מתיקיית היעד שבה אתה מרכיב את ה-CSS שלך, ולא מתיקיית המקור שממנה PostCSS מקפיד. זה, במקרה שלנו, הוא dist תיקיה, לא ה src תיקייה.

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

שימוש ב-PostCSS Plugins

יש מאות תוספים של PostCSS להוספת קידומות, מוך, תמיכה בתחביר חדש ועשרות תכונות אחרות ל-PostCSS. לאחר התקנת תוסף PostCSS, אתה מפעיל אותו בתוך postcss.config.js file — קובץ JavaScript שבו אתה יכול להשתמש כדי להגדיר את כל התצורות עבור PostCSS.

התקן את cssnano תוסף PostCSS עם הפקודה הבאה:

npm i --save-dev cssnano

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

כדי להשתמש בתוסף cssnano שהותקן לאחרונה, עליך להוסיף את הקוד הבא בתוך postcss.config.js קוֹבֶץ:

const cssnano = לִדרוֹשׁ("cssnano")
מודול‎.exports = {
 תוספים: [
 cssnano({
 מוגדר מראש: 'ברירות מחדל'
 })
 ]
}

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

שימוש בתכונות מודרניות כמו קינון

נניח שאתה רוצה להשתמש בתחביר הקינון בגיליון הסגנונות שלך, אז אתה מחליף את בלוק הפסקה ב src/styles.css עם זה:

גוּף {
 & ע {
צֶבַע: תפוז;
 }
}

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

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

כברירת מחדל, present-env משתמש בתכונות שלב 2 (שסביר להניח שיהפכו אותו ל-CSS). אבל אתה יכול לשנות את השלב למה שאתה רוצה בקובץ התצורה.

כדי להתקין את התוסף, הפעל את הפקודה הבאה:

npm i --save-dev postcss-preset-env

ואז אצלך postcss.config.js קובץ, עליך לייבא את הפלאגין ולרשום אותו:

const cssnano = לִדרוֹשׁ("cssnano")
const postcssPresetEnv = לִדרוֹשׁ("postcss-preset-env")
מודול‎.exports = {
 תוספים: [
 cssnano({
 מוגדר מראש: 'ברירות מחדל'
 }),
 postcssPresetEnv({ שלב: 1})
 ]
}

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

שימוש ב-PostCSS עם Frameworks

קביעת התצורה של PostCSS ידנית יכולה להיות קצת כאב. זו הסיבה שכמעט כל המסגרות המודרניות מגיעות עם כלי צרור (למשל, Vite, Snowpack ו-Parcel), ולכלים הללו תהיה תמיכה מובנית ב-PostCSS. וגם אם לא, התהליך של הוספת תמיכת PostCSS הוא קל להפליא.

זכור תמיד ש-Vite ורוב המצרפים האחרים משתמשים מערכת מודול ES6, לא CommonJS. כדי לעקוף את זה, אתה צריך להשתמש ב- יְבוּא הצהרה במקום לִדרוֹשׁ() אצלך postcssconfig.js קוֹבֶץ:

יְבוּא cssnano מ"cssnano"
// קוד התצורה נכנס לכאן

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

למידע נוסף על SaSS

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

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