打造优秀的CSS初始化文件（lss.base.css）

一、前言

css初始化的出现是为了考虑浏览器的兼容问题，不同浏览器对有些标签的默认样式是不同的，如果没有css初始化往往会出现浏览器之间的页面差异。当然，初始化样式对SEO有一定的影响，但鱼和熊掌不可兼得，力求在 影响最小的情况下初始化。

二、lss.base.css诞生

观察了雅虎、腾讯、淘宝、新浪、网易等各大网站的css初始化方式，发现并不完全适合自己使用。从最初的CSS reset到现在的Normalize.css，打造通用的css初始化文件可能不符合逻辑，基于不同的项目使用不同的初始化，可能是最好的解决方案。

lss.base.css是借鉴各种初始化文件的基础上打造的适用于PC端和移动端的css初始化文件，里面加入了左浮动、右浮动、清除浮动等类名，方便使用。

lss.base.css会不断更新，不断优化。

三、它有什么作用

• 保留有用的默认值，与许多CSS重置不同。
• 为各种元素规范样式。
• 更正错误和常见的浏览器不一致。
• 通过微妙修改提高可用性。
• 增加常用左浮动、右浮动、清除浮动等类名。

四、浏览器支持

• Chrome (last two)
• Edge (last two)
• Firefox (last two)
• Firefox ESR
• Internet Explorer 8+
• iOS Safari (last two)
• Opera (last two)
• Safari 6+

五、基本规范

• 清除移动端点击背景色

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

• 设置或检索对象的盒模型组成模式为box-sizing，方便布局。

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

• 默认字体

body {
    font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
}

六、常用功能

• 左浮动，在对应元素添加类名.l

.l {
    float: left
}

• 右浮动，在对应元素添加类名.r

.r {
    float: right
}

• 清除浮动，在对应元素添加类名.clearfix

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}

.clearfix {
    *zoom: 1
}

七、使用

NPM安装

npm install lss.base.css

更多源码请访问github地址：https://github.com/li-shuaishuai/lss.base.css

欢迎点星收藏、提出宝贵意见。