Summary of problems encountered in normal times

问题一：react中， style为什么要加两个大括号?，如：style={{width: this.props.width}}

解释一：如何在JSX中如何使用样式大部分的时候我们都是把样式写到css文件内，但是有时候我们也可以将样式写到JSX中，在JSX中使用样式和真实的样式也很类似，也是通过style属性来定义的，但是和真实DOM不同的是，属性值不能是字符串，而一定要是对象，比如如下： <div style={{color: '#ff0000', fontSize: '14px'}}>Hello World.</div> 我们可以看到JSX中使用的双大括号，其实第一个大括号的含义是JSX的语法，第二个大括号的含义是一个对象；我们也可以如下写：

var Hello = React.createClass({
    render:function(  ){
           var  styleObj={
                    color;'red'
           };
           return <div  style={ styleObj }>hello Kitty</div> ;
   }
});

react.render(<Hello/>, document.getElementById( 'container' )
);

document.getElementById('container').style.paddingLeft='1024px';

解释二： react中style只能是对象不能写字符串形式，这就变成一个普通属性赋值的逻辑了{width:this.props.width}就是一个对象值，也可以写成style={this.props.style}

问题二：到底如何理解 css 类名的语义化如果一个很通用的模板页要放什么内容都不是很明确的话这种时候该怎么命名才是合理的语义化命名~

所谓语义化就是让看你代码的人或爬虫知道，这“是什么”，或者是“干什么的”。

拿css命名来讲，一般有两种命名体系：1. 描述用途或特征，2. 描述具体内容。

第一种，常见的名字有：wraper、container、panel、row、col这类用作容器的，以及.bluebg、redtext、.default-icon这类表述特征的。

第二种，则跟页面的具体内容相关，比如.username、.avator、.article-list、.news-detail.

事实上，很多搞css整站架构的都推崇第一种方式。原因就是为了适应变化。举个例子，有一个评分的功能，像淘宝上打星星的那种。如果你将元素命名为.star，某天PM心血来潮想把图标改成心形，难道你还得把css类名改成.heart不成？如果不改，一个叫.star的元素里面放着，岂不别扭。所以按照用途来命名就更好，如：.score-item.

如果是做通用模板，那么按照第一种，用途或特征的命名方式，则是最好的。

ps:关于css的预处理器，预处理器通过函数，mixin等实现复用，但是编译后的代码却跟我们传统架构相去甚远。考虑重用的过程其实就是搞抽象层次，抽象考虑的就是层级和粒度，根据项目的具体情况把握一个度就行，在项目的范畴内做到灵活就够了。

问题三：css权重规则

层叠顺序为（升序）：用户代理声明用户常规声明编写者常规声明编写者重要声明用户重要声明若层叠顺序在同一级根据规则的特殊性赋值，特殊性值x计算如下（降序）： style行内样式数量a， id数量b，属性和伪类的数量c，元素名和伪元素数量d， x=a1000+b100+c*10+d 选择x值最高的应用规则

该讲解版权：吕师兄的小密圈

Seasons123 / blog-FE