CSS模块组合

Question

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

这是我们的组件：

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

现在，这很痛苦。我们添加的每一个可配置的支柱都会以指数方式增加我们必须提供的组合类的数量。我们目前可以配置align和type，因为两者都可以为null，因此我们有6个可能的组合，因此除了基本的.button之外，还要创建5个组合类。如果我们只添加了一个支柱，比如一个布尔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本身的承诺最终实现了。)如果元素上有多个类，那么在不更改元素的情况下很难控制外观。如果使用外观(而不是语义)类，则尤其如此。

像“按钮-主-左-粗体”这样的类有一些语义意义(“按钮-主”)，但它也有一些布局意义(“左”)和一些文本外观意义(“粗体”)。Button组件可能没有控制自己布局的业务。记住，你也可以组合反应组件！这样你就能得到更像：

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

现在，Button组件的CSS模块只需考虑按钮的类型。Button组件可以在任何地方使用，任何布局，而不仅仅是基于浮点的布局。

更好的是，浮点也可以被推入一个更语义的组件中。也许是这样的：

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

ButtonBar可以有自己的CSS模块来执行布局。之后，你可以把那个简陋的浮子布局换成一个时髦的柔性盒布局。:-)

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

如果您这样做(将可视化/布局类交换为语义组件，并拆分组件和CSS模块)，您的“指数增长”就会更少。如果您最终确实需要组合多个语义属性，那么仍然需要说明这些状态。一个很好的例子可能是“基本禁用”。这比“初级残疾人”要好，原因有几点。首先，很容易在CSS模块中查看并查看所列出的显式状态。其次，这些类没有模糊的用法和关系。“主要禁用”实际上是对这些类的有效使用吗？只有在有人使用文件的时候才能知道。“禁用”类可能覆盖“主”类中的某些内容，这意味着存在隐式排序依赖关系。将来一个善意的编辑很容易破坏事物，因为这些类之间的关系并不明显。就像通常的情况一样，选择一些隐式的东西来保存一些击键会导致一些微妙的错误。支付那一丁点击键税，就会锁定一些东西，并使人们清楚地看到，什么会起作用，什么不起作用。

另一个可以节省你几次按键的小问题是:没有理由使用“按钮-”前缀。这正是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

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

Answer 2

我想在这种情况下我会放弃写作，把你的课嵌套起来。下面是我的建议(如果我的jsx有点问题，请原谅)：

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

完全承认“左”和“主”可能与应用程序中的其他类名冲突。因此，想出一些稍微好一些(范围更广)的名称可能不是个坏主意。