写 inline style 的时候遇到一个现实问题

#1

写在 style 里的优先级最高，有些情况下老板突然要求立即改样式，或者要求专门为某个场景添加一个新的样式，以前只需要再加一个 css 处理好覆盖就可以了，现在基本上都要写 :root:root:root 和 !important。

而且有的时候已经写了 style 就不另外加 class 了，结果要写一个很复杂而且很难维护的 selector。

大家有什么经验

#2

个人建议不要把样式以inline-style的方式写在组件里面。react提供inline style的方式，不是说就让你写inline style。正确的做法是把组件的样式分离出来。这里面有很多方法：

  1. 分离成css文件，然后采用webpack打包，通过postcss等手段加入新特性。‘
  2. 如果你熟悉less,sass这样的写法，可以分离成less,sass这样的文件，通过webpack打包，然后提取出来成一个样式文件。

总之，样式还是和组件分离的，不过通过webpack，把单个样式可以组合成一个。很方便。

#3

我是从 sass 过渡过来的，最近不是提倡 inline style 吗，就在小项目里面尝试了一下

#4

现在用inline style我觉得还是不方便啊，虽然都统一到js里面了，有一些带逻辑的好处理了（不过sass和less已经比较好的解决这些问题了），但是维度就只有一个了，以前可以有各种各样的维度，比如class、id，还有他们互相交叉又有不同的优先级。所以只用inline style肯定会没有以前方便，能用css还是用css吧

#5

谁说提倡inline style了？ 经过几年才把样式分离出来，写inline-style干嘛。 本质上inline-style的出现是因为组件化的出现，想把组件的样式和结构写在一起，这样好调试组件。采用inline-style封装组件很完整。但是不是让你把js逻辑和css和html写在一个js文件里面。组件应该是一个文件夹。里面包含了js文件（react），css文件（less,sass这样的），还可以包含图片啊，小图标之类的，组件用的资源。 其实组件就是把页面写成多个小的页面罢了。 一方面可以减少复杂度，二个可以复用。不是说组件就写出line-style的样式。 你可以看下我开源的react-workflow（基于react-starter），用的less作为样式，你可以换成sass等的，不过本质上还是思想是分离。

#6

拆不拆文件其实只是个形式，关键是最终你用 className 还是 style 插进去，你怎么看

#7

… 最终不是把css和js打包成一个文件的 不是用什么className 或者 style标签。而是分离成一个css文件。用link来链接的。

#8

可以用js实现比CSS的优先级机制更好用的逻辑啊

#9

inline-style目前看还是不太成熟，最近确实有关于这方面的提倡，但这是基于一个期望，就是组件不仅在web用，还要跨平台（比如react-native），这时候守着css那套就没办法保证跨平台的样式了，于是inline-style又被提了出来

使用inline-style的情况下，样式代码依然应该是分离的，只是后缀变成了.js，用js的逻辑组合代替css优先级。
我理解的伪代码大概如下：

//Button.jsx
import ButtonStyle form './ButtonStyle.js'
class Button extends Component{
  render(){
    return <button 
      style={object.assign({}, ButtonStyle.defaultStyle, this.props.style)} 
      />
  }
}

//ButtonStyle.js
import {font, themeColor, activeColor} from 'bootstrap-style-js';

const defaultStyle = {color: themeColor, font}
const activeStyle = object.assign({}, defaultStyle, {color: activeColor})
export default {
  defaultStyle,
  activeStyle
}

在实际项目中使用的话，除非对js的逻辑组合代替css非常有信心，不然还是不建议，因为style本身的优先级太高，一旦踩到坑几乎是没有什么回旋余地的。

#10

material UI是用主题来表示设计中的变量。

每个主题包含了配色和字体大小之类的设计信息，上层组件通过context向子组件传递主题，而子组件根据主题生成inline style。意思和楼上差不多只是更成熟一点。

感觉inline style对设计师的要求比较高。material UI使用了Google的material design，设计元素的变量和不变量有非常清晰的界限。如果设计师喜欢跟着感觉走，less这种快速又支持热加载的技术优势还是有的。