您现在的位置是:首页 > web开发 > 开始编写寄几的 CSS 基础库

开始编写寄几的 CSS 基础库

web开发作者:dayu日期:6天前点击:0

有人说,这有什么难的,不到1分钟就能写好了:

.button {
    width: 100px;
    height: 40px;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    background-color: #337ab7;
    border-radius: 6px;
    cursor: pointer;
}

但如果这个项目中有50个大小不一的这样按钮怎么办?有人会说,那把 button 抽象成公共类名的不就好喽,就像下面这样:

<div class="button btn-begin"></div>

.button {
    font-size: 16px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    background-color: #337ab7;
    border-radius: 6px;
    cursor: pointer;
}

.btn-begin {
    width: 100px;
    height: 40px;
}

没错,这种确实是比较普遍的方法。但问题是,下一个项目风格改变,我们用不到 button 的公共样式了。所以这种方式不适合流水线作业,也不在本篇的讨论范畴中。

现在我们编写了一个 base.css,它也就是标题所说的我们寄几的基础 css 库,也是真正意义上的公共样式。假设 base.css 中已经定义好了以下几个样式类:

.f-16 {
    font-size: 16px;
}

.c-white {
    color: #fff;
}

.text-center {
    text-align: center;
}

.radius-6 {
    border-radius: 6px;
}

.cursor {
    cursor: pointer;
}

更改结构:

<div class="f-16 c-white text-center radius-6 cursor button">开始</div>

这样我们只需写少许 css 就能完成 button 的样式。

.button {
    width: 100px;
    height: 40px;
    line-height: 40px;
    background-color: #337ab7;
}

· 如上,当公共的样式定义的足够多时,可以极大的增加我们的开发效率,尤其是官网以及 CMS 这样较大的项目,效果更加明显。甚至某些结构只需要通过已有的样式类名进行组合就能完整实现,而不需要另外起名并单独编写 css。

· 在实际生产中,你还可以动态扩展 base.css,比如项目的设计刚到手上时,发现使用 #c9c9c9 颜色的字体比较多,就可以在 base.css 中加入 .c-c9 { color: #c9c9c9 }

· 市面上的 css 库数都数不清,为什么还要大家寄几编写呢。主要有以下几点:1. 有人可能会这样想:“我 CSS 基础这么好,让我用别人写的?闹呢!”;2. 别人的库可能有很多冗余的、自己用不到的样式,白白增加项目体积;3. 别人的库需要学习成本,自己写的不仅符合自己的 css 书写习惯,起的类名也是自己最好记的。

抛砖引玉

上面说了那么多,下面列举下我个人在平常用的比较多的公共样式,先付上源码。

内外边距初始化

html, body, div, h1, h2, h3, h4, h5, h6, p, span, img, input, textarea, ul, ol, li, hr {
    margin: 0;
    padding: 0;
}

用 * 的同学回炉重造哈,:)

去除 list 默认样式

ul, ol {
    list-style-type: none;
}

去除 a 标签默认样式

a {
    text-decoration: none;
}

左右浮动

.l {
    float: left;
}

.r {
    float: right;
}

两种常用背景图展示

.bg-img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.ic-img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

不同字号字体(实时扩展)

.f-13 {
    font-size: 13px;
}

.f-14 {
    font-size: 14px;
}

.f-16 {
    font-size: 16px;
}

.f-18 {
    font-size: 18px;
}

.f-20 {
    font-size: 20px;
}

字体粗细

.f-bold {
    font-weight: bold;
}

.f-bolder {
    font-weight: bolder;
}

字体颜色(实时扩展)

.c-white {
    color: #fff;
}

.c-black {
    color: #000;
}

行高(实时扩展)

.lh-100 {
    line-height: 100%;
}

.lh-130 {
    line-height: 130%;
}

.lh-150 {
    line-height: 150%;
}

.lh-170 {
    line-height: 170%;
}

.lh-200 {
    line-height: 200%;
}

元素类型

.inline {
    display: inline;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

box-sizing

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

清除浮动

.clear {
    clear: both;
}

超出隐藏

.overflow {
    overflow: hidden;
}

字符居左/中/右

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

字体超出隐藏,以省略号代替

.text-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

首行缩进2字符

.text-indent {
    text-indent: 2em;
}

强制文字换行

.text-wrap {
    word-wrap: break-word;
    word-break: normal;
}

常用的3种定位方式

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.fixed {
    position: fixed;
}

浮动光标改变

.cusor {
    cursor: pointer;
}

上面例举了一部分公共样式,希望能给大家一些启发。命名和抽象方式可以按照自己的喜好来,将平常工作中用到的样式慢慢积累,很快就会拥有自己专属的强大 css 基础库。祝大家都能做好自己业务的工程化,流水化,下一篇博文是跟大家分享寄几的公共 JS。

感谢你的浏览,希望能有所帮助

开始编写寄几的 CSS 基础库

原文地址:http://www.cnblogs.com/ghost-xyx/p/7229621.html


下一篇       上一篇