!如何组织css
一:css的API
  属于基础部分,这部分的能力用“对”和“错”来评判。
  比如说把文字设置为红色,只能用color:red;这种写法是对的,其他任何写法都是错的。

二:css框架
  不能用“对”和“错”来评判,我们会用“好”、“比较好”、“很烂”、“非常棒”这样的字眼来评判。
  按功能划分:控制字体的css集中在font.css文件里。
  控制颜色的css集中在coloor.css文件里。
  控制布局的css集中在layout.css文件里。
  按区块划分:将头部的css放在head.css中。
  将底部放在foot.css中。
  将侧边栏放在sidebar.css中。
  将主体放在main.css中。

!!不同角度的组织方法都有自己的道理,也有自己的缺点和优点。

笔者最喜欢的一种组织css的方法:base.css+common.css+page.css。
base(具有高度可移植性)
  (base是三者的最底层,提供CSS reset功能和粒度最小的通用类——元子类。这一层会被所有页面引用,
是页面样式所需依赖的最底层。无论何种风格的设计都可以引用它,所以base层要力求精简和通用。
¥¥房子的地基。¥¥)
即按照智能分成:base、common、page。注意的是,这三者不是并列结构,而是层叠结构。
common(可移植性一般)
  (bommon位于三者的中间,我们可以将页面内的元素拆分成一小块一小块功能和样式相对独立的小“模块”,
这些“模块”有些是会大量重复的,我们可以将大量重复的“模块”视为一个组件。从页面里尽可能
多的将组件提取出来,放在common层。网站中高度重用的模块视为组件,放在common层。
¥¥房子的门窗。¥¥
一个网站只有一个common层。common层是放在一个common.css文件里,还是按照功能划分放在
诸如common_form.css、common_imagelist.css的多个文件里,需要根据网站规模来
决定。)

page(几乎无移植性)
  (page位于三者最高层,提供页面级的样式。¥¥房间内的装饰画。¥¥有page层的代码放在一个page.css文件里
,根据页面配上注释,分块书写,便于维护。如:
/*首页*/
.test1{}
.test2{}
/*关于我们*/
.test3{}
.test4{}
/*联系我们*/
.test5{}
.test6{}
!!page.css还是应当越精简越好,能用base层和common层的css解决的,就尽量不要用到page层。)

如何组织css,写出高质量的css代码的更多相关文章

  1. 如何写出高质量的JavaScript代码

    优秀的Stoyan Stefanov在他的新书中(<Javascript Patterns>)介绍了很多编写高质量代码的技巧,比如避免使用全局变量,使用单一的var关键字,循环式预存长度等 ...

  2. 如何写出高质量的Python代码--做好优化--改进算法点滴做起

    小伙伴你的程序还是停留在糊墙吗?优化代码可以显示程序员的素质欧! 普及一下基础了欧: 一层for简写:y = [1,2,3,4,5,6],[(i*2) for i in y ]       会输出  ...

  3. 如何写出高质量的技术博客 这边文章出自http://www.jianshu.com/p/ae9ab21a5730 觉得不错直接拿过来了 好东西要大家分享嘛

        如何写出高质量的技术博客?答案是:如果你想,就一定能写出高质量的技术博客.看起来很唯心,但这就是事实.有足够愿力去做一件目标明确,有良好反馈系统的事情往往很简单.就是不停地训练,慢慢地,你自己 ...

  4. Mysql写出高质量的sql语句的几点建议

    CleverCode在实际的工作也写过一些低效率的sql语句.这些语句会给数据库带来非常大的压力.最基本的表现就是sql语句执行慢,后来逐渐的去优化和尝试. 总结了一些高质量的sql语句的写法.这里C ...

  5. 如何快速写出高质量的 Go 代码?

    前言 团队协作开发中,必然存在着不同的代码风格,并且诸如 http body close,unhandled error 等低级错误不能完全避免.通过使用 ci lint 能够及早的发现并修复问题,提 ...

  6. 用css写出下拉框(代码转自wq群)

    做网易云音乐首页时遇到的问题,鼠标指在右上角头像时出现下拉框. <style>/* css*/ #body{ float: left; } #xialakuang{ background- ...

  7. 如何编写高质量的js代码--底层原理

    转自: 如何编写高质量的 JS 函数(1) -- 敲山震虎篇   本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm ...

  8. css写出0.5px边框(一)

    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...

  9. [转]如何写出高效能TSQL -深入浅出SQL Server Relational Engine (含 SQL 2014 in-memory Engine)

    [转]如何写出高效能TSQL -深入浅出SQL Server Relational Engine (含 SQL 2014 in-memory Engine) http://blogs.technet. ...

随机推荐

  1. 转:Oracle R12 多组织访问的控制 - MOAC(Multi-Org Access Control)

    什么是MOAC MOAC(Multi-Org Access Control)为多组织访问控制,是Oracle EBS R12的重要新功能,它可以实现在一个Responsibility下对多个Opera ...

  2. CORS 跨域

    跨域请求一直是网页编程中的一个难题,在过去,绝大多数人都倾向于使用JSONP来解决这一问题.不过现在,我们可以考虑一下W3C中一项新的特性——CORS(Cross-Origin Resource Sh ...

  3. Response.Redirect("");Server.Transfer("")跳转页面的区别

      Response.Redirect("") Server.Transfer("") 转向其他站点 能 不能(只能站内转向) 是否可带QueryString参 ...

  4. 使用PHP连接、操纵Memcached的原理和教程

    http://www.crazyant.net/1014.html Memcahced开源分布式内存对象缓存系统通过减少数据库的负担,从而能够加速你的web应用.在本文中我将解释怎样实现一个基于Mem ...

  5. Java的内存泄漏_与C/C++对比(转载总结)

    原文网址:http://developer.51cto.com/art/201111/302465.htm Java内存泄露的理解与解决(1)   一般来说内存泄漏有两种情况.一种情况如在C/C++ ...

  6. IOS 高级开发 KVC(二)

    前一篇博客最后介绍了KVC 再json 转模型时遇到一些问题.今天接着来介绍KVC 的其他用法.其实我们在一开始的时候就一直再强调命名的重要性.命名规范是KVC 存活的基础.如果没有这个条件支撑,那么 ...

  7. Linux用户级线程和内核级线程区别

    1.内核级线程: (1)线程的创建.撤销和切换等,都需要内核直接实现,即内核了解每一个作为可调度实体的线程.(2)这些线程可以在全系统内进行资源的竞争.(3)内核空间内为每一个内核支持线程设置了一个线 ...

  8. OpenJudge / Poj 2141 Message Decowding

    1.链接地址: http://poj.org/problem?id=2141 http://bailian.openjudge.cn/practice/2141/ 2.题目: Message Deco ...

  9. MySQL基础学习之触发器

    查看触发器 SHOW TRIGGER\G 创建触发器 CREATE TRIGGER 触发器名字 BEFORE/AFTER DELETE ON 表名 FOR EACH ROW INSERT INTO 表 ...

  10. GCC交叉编译链命名

    命名格式: arch[-vendor][-os]-abi arch:CPU的架构 vendor:工具链的供应商 os: 目标上运行的操作系统,不同的操作系统对应着不同的C库,例如 newlib.gli ...