本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401616238&idx=1&sn=3c6e965283c632e9035875be43e6a305&scene=0#wechat_redirect

二维码:

一直觉得css是一个不被重视,或者说是重视不够的饭后甜点。因为它太“简单”,门槛低,不能彰显或提升广大闷骚程序猿的逼格。。。一直都想聊聊css相关的一些杂碎。正好借最近的一次项目实践来侃侃css。

玉伯曾发文章做过类似的比喻说:“css就像语文。大家都认识汉字,也都会写汉字,但是也只有那些牛逼的作家才能写出优秀的文章,而我们却不能”。也就是说css易学难用。一个项目随着页面的增多,css的代码数量也可能直线飙升。不仅加载起来比较慢,对维护的人来说,也不确定这些代码都有什么地方在用,轻易不敢动。。因此,css样式复用的重要性就可想而知了。而这个也是新手或对css不够重视的人欠缺的。。

上面这些,是不是很虚?不罗嗦了,先上页面设计图(一个答题页面),分析页面布局先:

从设计稿上看,最直观的就是页面中的每一个问题的样式是统一的,也就是可以把问题当作一个question模块进行开发。但是就布局而言,纵坐标上,这些问题的纵坐标好无规律。怎么确定这些问题在页面中的位置呢?私想了一个办法,看下一张图:

没错,就是把整个页面拆解成一个一个的格子。私是把每到题放到500*500的格子,这样,问题就在格子里相对于格子来进行定位,就简单多了。以上就是页面的布局。

然后是具体的代码了:

最开始当然是css reset了,

大家都知道,浏览器对于标签是有默认样式的。比如a标签默认是有下划线,li标签默认有一个小点等。然而不同的浏览器对于这些元素的默认值不尽相同,为了屏蔽浏览器对元素默认样式的差异,我们需要重置部分元素的样式。可能大家都看过reset.css。那里面重置的样式有好多,我觉得完全没有必要。我的css reset就上面只有上面这些就够了。我也并不是说别的版本的cssreset就不好。脱离的实际的业务单纯的谈论某个类库的好坏,高下都是不可取的。没有最好的框架,只有最适合自己业务的框架。。

然后是css原子类。所谓的css原子类,入下图:

为什么要有这些css原子类呢?一个大型的项目,一些常用的css规则,比如text-align,float,border,positon等有可能出现十几次,几十次。。加入我们已经在项目开始的时候就已经定义好了我们的css原子类,那么在需要左浮动的元素上只需要引入.fl的class就可以了。原来需要出现几十次的float:left现在只需要出现一次就可以了(理论上是这样)。从理论上讲,只要我们把每个css原子类都定义成一个原子类,那么我们就可以通过这些原子类的不同组合来完成我们的页面了。css原子类是跟具体的项目和业务无关的,定义好的css原子类可以应用到任何的项目当中。css样式分离的确实彻底,其可复用性就越高。就像这些原子类。但是,当一个元素引入的css原子类多起来的时候,那么这个元素的class的值也会快速膨胀起来。。。我在写页面的时候,所能接受的class值得最多的个数是4个。考虑到这个问题呢,就引入了下一个话题,css模块化。

通常一个项目一个站点,要考虑到站点整体的风格统一。正式因为风格统一,所以大部分的css样式都是可以复用的。比如我本次的项目来说,问题就可以看成是一个模块。问题的html如下

qh是标题,qa是三个选项。最外层的div就是格子,qwrapper相对于格子进行定位。然后定义统一的css样式。虽然页面上有十道题,我只需要写一次html和css.

对于每到题目的个性化的样式用过.question1, .question2等类来实现。说到这里,其实这个页面的css样式就差多多了。实际效果见第一张图。在开发中除了这种一个区块看作一个模块来处理之外,比如页面中的所有的buton,text也可以看成一个模块。在需要有button的地方,只需要引入.btn就可以了。就像bootstrap。。。这里需要注意,定义模块样式的时候,只能定义那些稳定的公共的样式。就文本框而言,有的地方的文本框的宽度是100,有的地方是80,这个时候我们就需要把width从样式中分离出去。想下面这样

.txt {

height: 30px;

line-height:30px;

backgroud:#fff;

font-size:14px

}

那么宽度为100的文本就可以写为:

<text class="txt w100"/>

宽度为80的就可以写为:

<text class="txt w80"/>

.w100为上文中的原子类.w100 {width: 100px}

通过这种方式把项目中的可复用的区块进行模块化。后续开发的时候,只需要引入之前定义好的类库就行了。假设开发之前,我们已经认真的分析过设计稿。分析过那些组件式公共的,在页面中重复出现的。我们就可以开开发初期先开发这些公共的样式,便于后期复用。刚开始的时候,可能会慢一些,但是越到后期会越轻松。

当完成上面的这几步的时候,理论上一个项目的大部分的css样式就已经开发完成了。后续再写页面的时候,只需要引入我们定义好的类就行。仿佛就像是我们针对自己的项目开发了定制版的"bootstrap"...剩下的就是页面特有的页面级的css了。

考虑到时间和篇幅关系,就不往下写了。以上是我写css的套路。私以为,每个人都应该有自己的套路和模式。形成自己的风格。。。以上的都是个人观点,如果有不对的地方,或者有不同意见的欢迎交流讨论哈

记一次项目中的css样式复用的更多相关文章

  1. 聊一聊 React 中的 CSS 样式方案

    和 Angular,Vue 不同,React 并没有如何在 React 中书写样式的官方方案,依靠的是社区众多的方案.社区中提供的方案有很多,例如 CSS Modules,styled-compone ...

  2. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  3. html5 中的 css样式单 的 两种调用方式的区别

    在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有 ...

  4. HTML文档中应用css样式的方法总结

    在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表:2.使用style元素包含样式表:3.使用style属性,即内联样式 一.link标签链接外部样式表 先看一条较为标准的l ...

  5. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  6. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

  7. JQuery中操作Css样式

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  8. 在网页中插入CSS样式表的几种方法

    1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head> ...

  9. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

随机推荐

  1. [经验交流] 为 mesos framework 分配资源

    前段时间我在办公网搭建了一套mesos平台,用于docker 集群相关的调研和测试,mesos + marathon + docker 架构运行正常.但是在启用了chronos后,marathon无法 ...

  2. 线程让出实验【RT-Thread学习笔记 4】

    API: rt_thread_yield 线程函数中调用,本线程释放MCU.如果此时有别的相同优先级的任务整处于等待状态,将获得MCU使用权. 线程让出就是给OS增加一个任务调度的机会. 创建两个线程 ...

  3. asp.net中如何防止用户重复点击提交按钮

    asp.net中如何防止用户重复点击提交按钮   asp.net 中防止因为网速慢等影响交互的问题导致用户可能点击多次提交按钮,从而导致数据库中出现多条重复的记录,经过亲自验证在网上找的方法,找到两个 ...

  4. javascript bind

    bind的作用和apply,call类似都是改变函数的execute context,也就是runtime时this关键字的指向.但是使用方法略有不同.一个函数进行bind后可稍后执行. 定义: fu ...

  5. vue.js 2.0开发(3)

    组件化 Vue.component('todo-items',{ }); 定义组件,首先是标签的名字todo-items,然后里面还要配置一些选项,首先是我们的模板template,里面需要填入的内容 ...

  6. left join 取一条数据

    产品生产过程中要记录产品在制作过程中的不良历史,即使在一个工序,也可以产生多条不良历史记录,所有的不良信息保存在B表中.假设产品在打包工序,存放打包工序成品参数记录的表A,数据是唯一的.但在打包过程中 ...

  7. easyUI+mvc权限管理后台

    通过按钮和菜单,组合成基本的功能,菜单的功能可以编码修改,但浏览功能是菜单基本的入口,只有角色赋予了浏览功能,才能访问. 基本按钮表 菜单模块 菜单分配按钮 角色授权 下面是对一张表的基本操作 模型 ...

  8. Hololens开发笔记之连接PC实现资源共享

    官网原文介绍:https://developer.microsoft.com/en-us/windows/holographic/using_the_windows_device_portal Hol ...

  9. 在Ubuntu下进行MongoDB安装步骤

    一. 在Ubuntu下最傻瓜的步骤(以下都在root用户下进行操作): 1.运行"apt-get install mongo" 如果遇到找不到安装包的话运行"apt-ge ...

  10. ses_cations 值顺序

    16个位置的字符所代表的操作依次如下: 1. ALTER 2. AUDIT 3.COMMENT 4.DELETE 5.GRANT 6.INDEX 7.INSERT 8.LOCK 9.RENAME 10 ...