CSS模块组成

我有一个关于作文的问题,我希望有人可以帮助我.我正在使用react-css-modulesSass,我想知道为我们的一个基本底层组件编写东西的最佳方法.

这是我们的组件:

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 (
    
      {children}
    
  )
}

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,并且因为这两个可以为空,我们有6种可能的组合,使5类组成,除了基本建立.button.如果我们只添加一个prop,比如只是一个布尔值bold,我们现在必须添加一大堆新的组合类名:.button-bold, .button-left-bold, .button-right-bold, .button-primary-bold, .button-primary-left-bold, .button-primary-right-bold.

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

我想也许这个例子中存在各种各样的问题,这就是为什么它不符合"每个元素一个类"的规则.为每个元素规则强制执行一个类的原因之一是,我们可以轻松地更改元素状态的外观而不实际触及元素.(基本上是CSS本身的承诺,最终实现了.)如果元素上有多个类,则很难在不更改元素的情况下控制外观.如果使用外观(而不是语义)类,则尤其如此.

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

Click Me!

现在,Button组件的CSS模块可以担心按钮的类型.Button组件可以在任何地方使用,可以使用任何布局,而不仅仅是基于浮动的布局.

更好的是,浮动也可以被推入更加语义的组件中.也许是这样的:

  Cancel
  Save

ButtonBar可以有自己的CSS模块来完成布局.之后你可以换掉那个时髦的浮动布局,以获得时髦的flexbox布局.:-)

您的"粗体"修饰符示例肯定在Button组件中没有位置.最好考虑为什么某些东西是粗体,然后为它做一个组件或语义属性.否则,如果设计要求将这些"粗体"按钮更改为"斜体绿色"按钮,则必须改变一堆元素.

如果你这样做(交换语义组件的视觉/布局类并分解组件和CSS模块),你将有更少的"指数增加".如果最终确实需要将多个语义属性组合在一起,那么将这些状态拼写出来仍然有一些价值.一个很好的例子可能是"主要残疾人".由于几个原因,这比"主要残疾人"更好.首先,很容易查看CSS模块并查看列出的显式状态.其次,这些类没有模棱两可的用法和关系."主要残疾人"实际上是对这些课程的有效使用吗？只有有人使用的文件才能知道."disabled"类可能会覆盖"primary"类中的某些内容,这意味着存在隐式排序依赖项.在将来进行良好的编辑很容易打破事情,因为这些类之间的关系并不明显.通常情况下,选择一些隐含的东西来保存一些击键可能会导致细微的错误.支付那笔点击按键可以锁定内容,并明确哪些内容可行,哪些内容不起作用.

另一个小点可以为你节省一些按键:没有理由使用"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

文件名本身实际上是"按钮"前缀.