3

次のシナリオを処理するモジュール式の方法は何ですか: アプリには、すべての見出しタグ (h1、h2、h3 など) の一般的なスタイルがあります。特定のコンポーネントである Widget.jsx は、これらの見出しのいずれかを使用できますが、h1 タグには特別なスタイルが設定されています。CSS の「昔」の時代には、これは (おそらく) 単一のスタイルシートの継承によって処理されていました。例えば

.h1 { font-size: 3rem; /* more styles */ }
.h2 { font-size: 2.5rem; /* more styles */ }
...
.Widget--h1 { font-size: 1.5rem; }

明らかに、上記は CSS へのモジュラー アプローチには適合しませんが、上記のシナリオをモジュールで実現する方法がわかりません。以下は、問題を解決するための私の最初の試みです。

Widget.jsx

import React from "react";
import CSSModules from "react-css-modules";
import styles from "./_widget.less";

@CSSModules( styles )
export default class Widget extends React.Component {

    render () {
        return (
            <div>
                <h1 styleName="h1">Chewbacca</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam blanditiis, explicabo illo dignissimos vitae voluptatibus est itaque fuga tenetur, architecto recusandae dicta dolorem. Velit quidem, quos dignissimos unde, iste amet?</p>
                <h2 styleName="h2">The "Walking Carpet"</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        );
    }

}

_widget.less

.h1 {
    composes: h1 from "atoms/text/_text.less";
    font-family: "Comic Sans MS", cursive, sans-serif;
}

原子/テキスト/_text.less

@import (reference) "~styles/variables/_fonts.less";

/* Headings
   ============================= */
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: normal;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
}
.h1 { font-family: @primary-font; }
.h2 { font-family: @primary-font; }
.h3 { font-family: @primary-font; }
.h4 { font-family: @primary-font; }
.h5 { font-family: @primary-font; }
.h6 { font-family: @primary-font; }

これは、変更されていない一般的なクラス ( .h2) の 1 つを使用するところまで機能します。明らかに、問題は で.h2定義されておらず_widget.less、これらのクラスの「グローバルな」定義がないことです (モジュラー CSS のベスト プラクティスに従って) が、他の見出しクラスを.h2, .h3, .h4 ...クラスに明示的に構成することは、どちらかで答える。例えば

_widget.less

.h1 {
    composes: h1 from "atoms/text/_text.less";
    font-family: "Comic Sans MS", cursive, sans-serif;
}
.h2 { composes: h2 from "atoms/text/_text.less"; }
.h3 { composes: h3 from "atoms/text/_text.less"; }
...

別の潜在的な解決策は@import、一般的な見出しスタイルを_widget.lessファイルに追加することです。

_widget.less

@import @import "~atoms/text/_text.less";
.h1 {
    composes: h1 from "atoms/text/_text.less";
    font-family: "Comic Sans MS", cursive, sans-serif;
}

_text.lessこのソリューションの問題点は、スタイルを利用して成果物コードを肥大化させるたびに、それらのスタイルが複製されることです。

この種の問題を解決する最善の方法について何か考えはありますか? 私はモジュラーCSSの概念に非常に慣れていません。

4

1 に答える 1

1

このようなケースで、クラスのデフォルト セットをカスタマイズでオーバーレイしたい場合、それを行う 1 つの方法は次のObject.assignとおりです。

import defaultStyles from "atoms/text/_text.less"
import widgetStyles from "./_widget.less"

const styles = Object.assign({}, defaultStyles, widgetStyles)

そのstylesため、あらゆる種類の見出しのトークンが含まれるようになり、利用可能な場合は常にウィジェットのオーバーライドを使用します。

于 2016-03-18T04:57:54.660 に答える