css模块化(一)

第一篇,讲讲模块化的概念吧。

模块化css就是把页面样式进行划分整理,最终实现灵活拆装各种页面的需求。

模块化的css,网上的认识无非两种,我只推荐正确的这种,可以参考就职于腾讯的鬼哥的css森林 中的模块化系列文章:

http://www.cssforest.org/blog/index.php?id=134

http://www.cssforest.org/blog/index.php?id=161

http://www.cssforest.org/blog/index.php?id=162

http://www.cssforest.org/blog/index.php?id=165

http://www.cssforest.org/blog/index.php?id=167

http://www.cssforest.org/blog/index.php?id=168

哇,好难。先讲点铺垫的知识。

就css而言,存在这么几个概念:

  • 继承:指子标签继承了父标签的一些样式属性
  • 扩展:指在原有的样式属性基础上增加新的样式属性
  • 重写:指对原有的某些样式属性进行覆盖

参考:http://www.lav.so/vskill.php?id=113

先讲讲继承。css中,大部分的属性都是可继承的,包括:font,line-height,color等属性。

当然,也有的标签并没有继承这些常见的属性,只是继承了部分,比如表单中的元素。demo:http://jsfiddle.net/xmlovecss/LgE5P/

扩展,常见的扩展方式分为两种:

  • 直接在标签上进行样式类的添加
  • 样式中对标签的样式进行扩展

demo:http://jsfiddle.net/xmlovecss/nafgB/

重写,重写其实可以算作扩展的特例。因此也分为两种,同上。

但是,从语义化的角度去看,我个人是不赞成“直接在标签上进行类的添加以实现样式的覆盖”。

原文地址:https://www.cnblogs.com/my_front_research/p/2861673.html