模块化 CSS 和应用程序范围的样式

Question

什么是处理以下场景的模块化方式：一个应用程序具有所有标题标签（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)。显然，问题在于.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 的概念非常陌生。

Answer 1

在这种情况下，您希望通过自定义覆盖一组默认类，一种方法是使用Object.assign：

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

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

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