reactjs - CSS模块组成

Question

我有一个关于作文的问题，希望有人能帮助我。我正在将 react-css-modules 与 Sass 结合使用，我想知道为我们的基本底层组件之一编写内容的最佳方法。

这是我们的组件:

import React, {PropTypes} from 'react'
import cssModules from 'react-css-modules'
import styles from './style.sass'

const Button = ({children = 'Submit', ...props}) => {
  const align = props.align ? `-${props.align}` : ''
  const type = props.type ? `-${props.type}` : ''
  const styleName = `button${type}${align}`

  return (
    <button onClick={props.onClick} {...props} styleName={styleName}>
      {children}
    </button>
  )
}

Button.propTypes = {
  align: PropTypes.string,
  onClick: PropTypes.func.isRequired,
  type: PropTypes.string,
}

export default cssModules(Button, styles)

这是到目前为止的样式表:

@import "~components/styles/variables"

.button
  color: $button-default
  background-color: transparent
  font-family: $font-family
  font-size: $default-font-size
  font-weight: $font-regular
  line-height: $default-button-height
  margin: 0 $pad 0 0
  outline: none
  padding: 0 $pad*2

.left
  float: left

.right
  float: right

.primary
  color: $background-interaction
  background-color: $button-default

.button-left
  composes: button, left

.button-right
  composes: button, right

.button-primary
  composes: button, primary

.button-primary-left
  composes: button, primary, left

.button-primary-right
  composes: button, primary, right

现在真的很痛苦。我们添加的每个可配置 Prop 都会以指数方式增加我们必须提供的组合类的数量。我们当前可以配置 align 和 type，并且由于两者都可以为 null，因此我们有 6 种可能的组合，因此除了基本 .button 之外还需要创建 5 个组合类。如果我们再添加一个属性，比如一个 bool bold，我们现在必须添加一大堆新的组合类名:.button-bold、.button-left-bold、 .button-right-bold、.button-primary-bold、.button-primary-left-bold、.button-primary-right-bold。

我知道使用 react-css-modules 我们可以启用 allowMultiple 设置来允许我们指定多个模块来应用于一个元素，但我的理解是违反最佳实践。我觉得我们必须在这里遗漏了一些东西。我们做错了什么？

Answer 1

我认为示例中可能存在多种问题，这就是为什么它不符合“每个元素一个类”规则的原因。强制每个元素一个类规则的原因之一是，我们可以轻松地更改元素状态的外观，而无需实际接触该元素。 (基本上 CSS 本身的 promise 终于实现了。)如果一个元素上有多个类，则很难在不更改元素的情况下控制外观。如果您使用外观(而不是语义)类，则尤其如此。

像“button-primary-left-bold”这样的类具有一些语义含义(“button-primary”)，但它也具有一些布局含义(“left”)和一些文本外观含义(“bold”)。 Button 组件可能没有控制其自身布局的业务。请记住，您也可以编写 React 组件!所以你可以有更多类似的东西:

<Left><Button type="primary">Click Me!</Button></Left>

现在 Button 组件的 CSS 模块可以只关心按钮的类型。而且 Button 组件可以在任何地方、任何布局中使用，而不仅仅是基于 float 的布局。

更好的是， float 也可以被插入更具语义的组件中。也许是这样的:

<ButtonBar>
  <Button>Cancel</Button>
  <Button type="primary">Save</Button>
</ButtonBar>

ButtonBar 可以有自己的 CSS 模块来进行布局。稍后您可以将那个笨拙的 float 布局替换为时髦的弹性盒布局。 :-)

您的“粗体”修饰符示例在 Button 组件中肯定没有位置。最好考虑为什么某些内容是粗体，然后为其创建一个组件或语义属性。否则，如果设计要求将这些“粗体”按钮更改为“斜体绿色”按钮，则您必须四处更改一堆元素。

如果你这样做(用语义组件交换视觉/布局类并分解码件和 CSS 模块)，你将获得更少的“指数增长”。如果您最终确实需要组合多个语义属性，那么阐明这些状态仍然有一定的值(value)。一个很好的例子可能是“主要残疾”。出于以下几个原因，这比“主要残疾”要好。首先，很容易查看 CSS 模块并查看列出的显式状态。其次，这些类的用途和关系没有含糊不清。 “主要禁用”实际上是这些类的有效使用吗？只有有人记录了使用情况才能知道这一点。 “禁用”类可能会覆盖“主”类中的某些内容，这意味着存在隐式排序依赖性。将来善意的编辑很容易破坏事情，因为这些类之间的关系并不明显。通常情况下，选择隐式的东西来保存一些击键可能会导致微妙的错误。支付一点击键税可以锁定一切，并让什么有效、什么无效变得显而易见。

另一个可以节省你敲击键盘次数的小点:实际上没有理由使用“button-”前缀。这正是 CSS 模块的用途。改为这样做:

.normal
  color: $button-default
  background-color: transparent
  font-family: $font-family
  font-size: $default-font-size
  font-weight: $font-regular
  line-height: $default-button-height
  margin: 0 $pad 0 0
  outline: none
  padding: 0 $pad*2

.primary
  composes: normal
  color: $background-interaction
  background-color: $button-default

文件名本身本质上是“按钮”前缀。