模块化 CSS 和 App-wide 样式

Question

处理以下场景的模块化方式是什么：应用程序具有所有标题标签（h1、h2、h3 等）的通用样式。特定组件 Widget.jsx 可以使用这些标题中的任何一个，但 h1 标签具有特殊样式。在 CSS 的 "olden" 天里，我本来可以通过（可能）单个样式表中的继承来处理这个问题。例如

.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;
}

atoms/text/_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)。显然，问题是 .h2 没有在 _widget.less 中定义，并且类没有 "global" 定义（与模块化 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.

Answer 1

在这种情况下，如果您想用自定义覆盖一组默认的类，一种方法是使用 Object.assign:

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

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

现在 styles 包含各种标题的标记，并在可用时使用小部件覆盖。

模块化 CSS 和 App-wide 样式

Modular CSS and App-wide Styles

css

reactjs

css-modules

react-css-modules