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

现在，很痛苦。我们添加的每个可配置道具都会成倍地增加我们必须提供的组合 classes 的数量。我们目前可以配置 align 和 type，因为两者都可以为 null，所以我们有 6 种可能的组合，所以除了基础 .button 之外，还要创建 5 个组成的 classes。如果我们再添加一个属性，比如说一个布尔值 bold，我们现在必须添加一大堆新的组合 class 名称：.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

我想在这种情况下我会放弃撰写并嵌套您的 classes。这是我的建议（如果我的 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)

和 SASS:

@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

完全承认 "left" 和 "primary" 可能会与您应用中的其他 class 名称发生冲突。所以想出一些稍微好一点（范围更大）的名字可能不是一个坏主意。

Answer 2

我认为示例中可能存在多种问题，这就是它不符合 "one class per element" 规则的原因。强制每个元素一个 class 规则的原因之一是，我们可以轻松更改元素状态的外观，而无需实际接触元素。（基本上是CSS本身的承诺，终于实现了。）如果你在一个元素上有多个class，那么在不改变元素的情况下很难控制外观。如果您使用外观（而不是语义）classes.

，则尤其如此。

像"button-primary-left-bold"这样的class有一些语义意义（"button-primary"），但它也有一些布局意义（"left"）和一些文本外观意义（"bold"). Button 组件可能没有控制其自身布局的业务。请记住，您也可以编写 React 组件！所以你可以有更多的东西：

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

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

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

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

ButtonBar 可以有自己的 CSS 模块来进行布局。稍后您可以将那个简陋的浮动布局换成时髦的 flexbox 布局。 :-)

您的 "bold" 修饰符示例在 Button 组件中肯定没有位置。最好考虑 为什么 某些东西是粗体，然后为此制作一个组件或语义属性。否则，如果设计要求将那些 "bold" 按钮更改为 "italic green" 按钮，则您必须四处更改一堆元素。

如果您这样做（将 visual/layout classes 交换为语义组件并分解组件和 CSS 模块），您将拥有更少的 "exponential increases"。如果您确实遇到了确实需要组合多个语义属性的情况，那么将这些状态拼写出来仍然有一定的价值。一个很好的例子可能是 "primary-disabled"。由于几个原因，这比 "primary disabled" 更好。首先，很容易查看 CSS 模块并查看列出的显式状态。其次，这些 class 的用途和关系没有歧义。 "primary disabled" 实际上是对那些 class 的有效使用吗？这只有在有人使用文件时才能知道。 "disabled" class 可能会覆盖 "primary" class 中的某些内容，这意味着存在隐式排序依赖性。以后的 well-meaning 编辑很容易破坏内容，因为这些 class 之间的关系并不明显。通常情况下，选择一些隐式的东西来保存一些击键可能会导致细微的错误。支付那一点击键税会锁定事情并使什么有效什么无效变得显而易见。

还有一点可以让您少敲几下键盘："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

文件名本身就是 "button" 前缀。

CSS 模块组成

CSS Module composition

reactjs

sass

css-modules