开始编写寄几的 CSS 基础库

前言

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

一个栗子

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

<div class=‘button‘>开始</div>

有人说,这有什么难的,不到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。

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

时间: 2024-10-14 06:22:53

开始编写寄几的 CSS 基础库的相关文章

因为业务需要,用nodejs写了一个css解析器,因为是基础库,想开源,不知道有没有人需要。

一般而言htmlparser的解析使用得比较多,node库中已经有了,npm install -g htmlparser2就可以安装. 这段时间要实现nodejs上的安全扫描,需要对html,css,js进行解析,css主要是限制一些绝对定位,浮层和url,防止产生钓鱼或攻击.所以写了一个css的解析器. 感觉 这些基础库应该公开出去,但是不知道有多少人有这个需求.

CSS基础教程 -- 媒体查询屏幕适配

响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件.媒体查询的大部分媒体特性都接受min和max用于表达"大于或等于"和"小与或等于".如:width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML

雷观(十二):构建基础库,提升研发效率

观点:IT之所以迅速普及,进入到每个人的生活.一方面是由于,IT相关技术产品,给每个人带来了丰富的虚拟世界和娱乐生活.另一方面,它大大提升了大部分行业的生产效率.社会生产力的发展方向,就是时代的发展方向.   程序员等IT技术人员,在IT届的地位,就像IT在社会生活中的地位:不可或缺.普遍存在.生产力的关键. 作为一名自学6年多的程序员,对技术的追求从未曾放弃.但我也终究意识到,纯粹的技术无法带我到达理想境界,而生产力的提高才可以把我从繁杂的基础工作中解脱出来,可以把我带向幸福美好的生活中. 与

〖前端开发〗HTML/CSS基础知识学习笔记

经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head

css基础总结一

最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总结 一.基础知识 1.前端基本概念以及常识 web应用,主要分为前端和后端,而前端的话,主要是想用户展示内容,后端的话主要是处理用户数据.前端内容呈现中,主要有几个问题:内容是什么?如何展示内容?如何展示页面的行为?内容是什么是通过html来标记的,内容如何呈现是通过css改变和调整的,页面的前端行

(转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)

欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也就是指您之前做过网页,会用表格布局.如果您刚开始学习网页制作,不知道什么是表格布局及html和css,建议您先去充电,否则学习本教程会非常吃力或者根本就听不懂. 由于时间关系,本教程只讲解一些基础知识,让您从原来的表格布局跨入到web标准(div+css)布局,会使用web标准制作出常见的页面,这也达到了本教

css基础系列教程:CSS基础语法1

css基础系列教程:CSS基础语法1 作者:www.divcss8.com 我们学习CSS要明白一个重要的问题,CSS主要是解决与实现表现(CSS)与结构(HTML)的分离.我们编写完HTML之后,如何通过CSS对HTML实现控制呢. 1.  行内样式 2.  内嵌样式 3.  链接样式 4.  导入样式 我们这一节课的示例就先从行内样式开始 行内样式:就是直接在HTML上写样式,就是HTML上加属性style=""这种形式.如 <p style="color:#f00

HTML&CSS基础学习笔记4-定义文档类型

定义HTML的文档类型 Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档. HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面.这就是 <!DOCTYPE> 的用处. <!DOCTYPE> 声明不是 HTML 标签,它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令.是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用置标语言解析器,它应该使用什么样的文档

CSS基础之清除浮动

CSS基础之清除浮动 本人前端菜鸟一枚,在学习 CSS 过程中发现网上流传的教程参差不齐,要么内容不够详细,要么方法就是错的.本文是在我参考了许多前辈经验的基础上编写的,如有错误的地方,请各位大牛不吝赐教.以下是我总结的三种行之有效而且比较简单实用的方法. 一.父级div定义伪类 :after 代码如下: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8&