关于css优化个人的一些见解

CSS预处理器

首先我们需要用到scss,less这种css预处理器,它里面的变量、嵌套、混合、继承、函数能很好的帮助我们减少代码量的开发,让书写更加有趣和程式化.

分类

通过CSS预处理器,我们能将一些样式进行分类,比如font-size,margin/margin-left/margin-right/margin-top/margin-bottom,这样我们在用到时只需要填上相应的class就行.
同时可以将一些公共的样式进行封装,如:

// margin
.margin(@i) when(@i <= 60) {
  .mt-@{i} {
    margin-top: @i + 0px;
  }
  .mr-@{i} {
    margin-right: @i + 0px;
  }
  .mb-@{i} {
    margin-bottom: @i + 0px;
  }
  .ml-@{i} {
    margin-left: @i + 0px;
  }
  .mv-@{i} {
    margin-top: @i + 0px;
    margin-bottom: @i + 0px;
  }
  .mh-@{i} {
    margin-left: @i + 0px;
    margin-right: @i + 0px;
  }
  .margin((@i + 2));
}
.margin(2);

// 相当于
.mh-20 {
  margin-left: 20px;
  margin-right: 20px;
}

这样就不用在css中书写多余的样式.

class越细化越好还是将其放入一个class?

仁者见仁,我觉得不是越细化越好,要看具体的情况.比如一个样式有很多地方是相同的,只有个别的不一样,这个时候可以将不同的地方进行细化,相同的部分封装成一个class,这样既减少了class的代码,同时css部分的代码也不会很多.

注: 最好不要超过四个class

代码规范化

采用BEM的命名规范,BEM是块(Block)、元素(Element)、修饰符(Modifier)的简写.
-中划线: 仅做为连字符使用,表示某个块或者某个子元素的多单词之间的连接符号
_双下划线: 双下划线用来连接块与块的子元素 单下划线: 单下划线用来描述一个块或者块的子元素的一种状态

以上只是个人的一些见解,仅供参考.