More than code
Welcome to the website

打造优秀的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

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

赞(0) 打赏
未经允许不得转载:李帅帅空间 » 打造优秀的CSS初始化文件(lss.base.css)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏