HTML5技术

开始编写寄几的 CSS 基础库 - Daryl

字号+ 作者:H5之家 来源:H5之家 2017-07-25 12:01 我要评论( )

前言 在现在的互联网业务中,前端开发人员往往需要支持比较多的项目数量。很多公司只有 1-2 名前端开发人员,这其中还不乏规模比较大的公司。这时前端同学就需要独挡一面支持整个公司上下的前端业务,项目如流水一般从手里流过,此时更需要前端开发人员将工

前言

在现在的互联网业务中,前端开发人员往往需要支持比较多的项目数量。很多公司只有 1-2 名前端开发人员,这其中还不乏规模比较大的公司。这时前端同学就需要独挡一面支持整个公司上下的前端业务,项目如流水一般从手里流过,此时更需要前端开发人员将工作工程化、流水线化。

 

本博文在发布之后有些争议,有人认为如此书写 css 并不规范。这点我认同,但不少框架也采用了这种方式,提升的开发效率也是明显的。希望大家对这种思想去其糟粕,取其精华,过度使用必然导致可维护性下降,但绝对使用单一类名也不现实。最后祝大家工作顺利。

 

一个栗子

现在需要编写页面中的一个按钮,结构与样式如下:

开始

有人说,这有什么难的,不到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 抽象成公共类名的不就好喽,就像下面这样:

 

.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; }

更改结构:

开始

这样我们只需写少许 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; }

  

行高(实时扩展)

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML 基础学习笔记 - gdwkong

    HTML 基础学习笔记 - gdwkong

    2017-07-23 09:01

  • canvas一周一练 -- canvas基础学习 - 张不丢

    canvas一周一练 -- canvas基础学习 - 张不丢

    2017-07-15 12:00

  • 【干货】移动端基础知识技巧总结 - 丿Kiss丶小波

    【干货】移动端基础知识技巧总结 - 丿Kiss丶小波

    2017-07-12 18:00

  • HTML5 基础内容(元素/属性/格式化) 001 - 挥舞着键盘征服世界

    HTML5 基础内容(元素/属性/格式化) 001 - 挥舞着键盘征服世界

    2017-07-03 17:03

网友点评
r