Wszystko, co musisz wiedzieć o CSS modules

Moduł CSS to po prostu plik CSS, który daje możliwość stylizowania komponentów. Najważniejszą zaletą modułów CSS jest to, że mają domyślnie zakres lokalny, ale co to właściwie oznacza?

CSS jest łatwy, prawda?

Rozpocząłem swoją przygodę jako frontend developer, a z czasem zacząłem zajmować się również backendem. Moi koledzy z zespołu backendowego śmiali się, że CSS to tylko język do ustawiania marginesów i kolorów.

Pamiętaj: jeśli robisz coś więcej niż dodawanie kolorów do nagłówków…

CSS nie jest łatwy.

Zapoznaj się z poniższą listą. Największe zagrożenia CSS zostały opisane tutaj:

1. Konflikty między regułami CSS
2. Nadpisania
3. Duży arkusz stylów CSS z nieużywanymi regułami
4. Efekty uboczne

Moduły CSS na ratunek

Dzięki temu, że moduły CSS mają zakres lokalny, problemy opisane powyżej znikają.

• koniec konfliktów
• brak efektów ubocznych
• brak zakresu globalnego

Przykładowy moduł CSS

Spójrz poniżej na prosty przykład modułu CSS w PWA Studio:

Moduł CSS (jest to po prostu plik CSS)

.section {
    padding: 15px;
}
 
.heading {
    font-size: 24px;
    font-weight: bold;
    margin: 15px 0;
}

Przykładowy komponent, który używa tych stylów:

import React from "react";
import classes from './sample-component.css';
 
const SampleComponent = () => {
    return (
        <div className={classes.section}>
            <h3 className={classes.heading}>This is the sample component tilte</h3>
            <p>This is the sample component paragraph</p>
 
            <h4 className={classes.heading}>This is the sample list:</h4>
            <ul>
                <li>Sample item A</li>
                <li>Sample item B</li>
                <li>Sample item C</li>
            </ul>
        </div>
    )
};
 
export default SampleComponent;

W trzecim wierszu zaimportowaliśmy moduł CSS o nazwie sample-component.css jako obiekt klasy. Teraz możemy używać klas z modułu CSS jako właściwości obiektu. Spójrz na linie 6, 7 i 10.

Tak właśnie działają moduły CSS – pozwalają one używać klas CSS jako właściwości obiektów w plikach JSX.

Jak to działa?

Dzięki Webpack i konfiguracji loaderów, klasy opisane w module CSS i zastosowane w komponencie React są renderowane jako unikalne klasy CSS dla każdego miejsca, w którym są używane.

1. Jest to miejsce, w którym klasa sekcji jest stosowana do węzła.
2. Jest to reguła CSS, która zawiera właściwości CSS.
3. Tutaj możesz zobaczyć unikalną nazwę klasy zastosowaną do węzła w skompilowanej aplikacji.
4. Jest ona kompilowana do unikalnej reguły CSS.

Konfiguracja Webpack

Spójrz na konfigurację webpacka. W PWA Studio można je znaleźć w pliku @magento / pwa-buildpack / lib / WebpackTools / configureWebpack / getModuleRules.js

getModuleRules.css = async ({ paths, hasFlag }) => ({
    test: /\.css$/,
    oneOf: [
        {
            test: [paths.src, ...hasFlag('cssModules')],
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        localIdentName: '[name]-[local]-[hash:base64:3]',
                        modules: true
                    }
                }
            ]
        },
        {
            include: /node_modules/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        modules: false
                    }
                }
            ]
        }
    ]
});

W linii 11 można zobaczyć, skąd pochodzą nazwy skompilowanych klas, a linia 12 to miejsce, w którym włączane są moduły CSS.

Composition

Moduły CSS umożliwiają tworzenie reguł z innych reguł:

.heading {
    font-size: 24px;
    font-weight: bold;
    margin: 15px 0;
}
 
.secondaryHeading {
    composes: heading;
}

Możliwe jest tworzenie wielu selektorów:

.section {
    padding: 15px;
}
 
.header {
    background-color: lightgray;
}
 
.heading {
    font-size: 24px;
    font-weight: bold;
    margin: 15px 0;
}
 
.secondaryHeading {
    composes: heading;
}
 
.sampleHeader {
    composes: section header heading;
}

Globalne reguły CSS

Lokalne skalowanie stylów jest piękne, ale czasami trzeba zdefiniować globalne reguły CSS, na przykład dla animacji (klatek kluczowych). Moduły CSS pozwalają nam tworzyć globalne reguły przy użyciu funkcji :global().

// global-styles.css
:global(.global-class-name) {
    color: red;
}

Po zaimportowaniu tego modułu CSS do aplikacji będzie można użyć globalnej reguły CSS, takiej jak ta:

// import stylesheet
import './global-styles.css'
...
// example of using global CSS rule
<p className="global-class-name">This is paragraph with global styles appiled</p>

Komponowanie z poziomu globalnego

Czasami konieczne jest skompilowanie reguły globalnej do lokalnej, co można zrobić w następujący sposób:

.redHeading {
    composes: global-class-name from global
}

Konwencje nazewnictwa

Zaleca się stosowanie konwencji nazewnictwa camel case, ponieważ używanie klas w JS jest w tym przypadku najłatwiejsze. Gdy nazwa klasy wygląda na przykład tak: .my-sample-class, można zastosować tę klasę do elementu w następujący sposób:

<ul className={classes['my-sample-class']}>

Łączenie i zastępowanie klas

W PWA Studio można przekazywać klasy jako props do komponentu i nadpisywać domyślne klasy komponentu klasami z rekwizytów. Zobacz:

import { mergeClasses } from '@magento/venia-ui/lib/classify';
import defaultClasses from '@magento/venia-ui/lib/components/Main/main.css';
 
const Main = props => {
   const classes = mergeClasses(defaultClasses, props.classes);
}

Jeśli przekazujesz klasy jako props, możesz je zweryfikować za pomocą PropTypes:

Main.propTypes = {
    classes: shape({
        page: string,
        page_masked: string,
        root: string,
        root_masked: string
    })
};

Podsumowanie

Moim zdaniem lokalny CSS rozwiązuje wiele problemów i jest naprawdę fajnym, nowoczesnym podejściem do zarządzania stylami. Być może dla wielu Frontend Developerów jest to kontrowersyjne podejście i jest to w porządku, ponieważ jest ono zupełnie inne od powszechnie stosowanego.

Może masz doświadczenie z modułami CSS? Daj mi znać w komentarzach!

Dziękujemy za przeczytanie. Wszystkie polubienia, udostępnienia i komentarze są naprawdę mile widziane.

Repozytorium Github

Przykłady kodu do tego artykułu można znaleźć na moim Githubie.Oto repozytorium.

Źródła

https://magento.github.io/pwa-studio/technologies/basic-concepts/css-modules/

https://github.com/css-modules/css-modules

https://webpack.js.org/loaders/css-loader/#modules

https://x-team.com/blog/css-modules-a-new-way-to-css/

https://glenmaddern.com/articles/css-modules