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

1. מה זה CSS Modules

קחו לדוגמא את ה CSS הבא:

.bigpicture {
    width: 200px;
    height: 200px;
    background: url(../style/img/kitten.jpg) no-repeat center center;
    background-size: cover;
}

אם אתם בטוחים שמשתמשים בקלאס bigpicture רק במקום אחד אין בעיה לשנות את הגודל. אבל מה אם מישהו בדף אחר שבכלל לא חשבתם עליו משתמש בקלאס זה? יותר גרוע- מה אם אתם מוסיפים קלאס חדש במקום אחר ובמקרה קוראים לו גם bigpicture?

CSS Modules מאפשרים לנו לכתוב ב JavaScript קוד שנראה בערך כך (קוד הדוגמא ב React):

import css from 'main.css';

const App = function (props) {
  return (
    <p className={css.container}>
      Hello World
      <div className={css.bigpicture}></div>
    </p>
  );
};

מה שיגרום לשינוי אוטומטי של שם הקלאס גם ב CSS וגם ב JSX כך שייבחר שם קלאס ייחודי במקום bigpicture.

בצורה כזאת הקובץ main.css נקרא CSS Module. קובץ זה מתאים לקובץ JSX והוא מתאר עיצוב עבור פקד. לכל קובץ JSX יהיה קובץ CSS מתאים לו. שמות הקלאסים נבחרים באופן אוטומטי בצורה ייחודית ומעודכנים גם ב JSX וגם ב CSS.

2. למה כן

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

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

3. למה לא

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

4. קוד

החלק המרכזי ב webpack.config.js שהיה דרוש כדי לגרום לזה לעבוד נראה כך:

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]&url=false',
        })
      },
    ],
  },

חלק זה מייצר קובץ style.css בתיקיה dist שמכיל חיבור של כל קבצי ה CSS לאחר שינוי שמות הקלאסים. במקרה שלי הקובץ נראה כך:

.main__container___2nNNx {
  background: orange;
}

.main__bigpicture___W5Oam {
  width: 200px;
  height: 200px;
  background: url(../style/img/kitten.jpg) no-repeat center center;
  background-size: cover;
}

העליתי פרויקט לדוגמא שמשתמש ב CSS Modules לגיטהאב. מוזמנים להסתכל על מבנה התיקיות וקבצי ההגדרות המלא:
https://github.com/ynonp/css-modules-demo/tree/master