!如何组织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. Java学习步骤

    我们为什么选择Java 大多数人选择Java可能只是因为听说Java前景好.Java比较好找工作.Java语言在TIOBE排行榜上一直位于前三等等之类的原因,但是Java具体好在哪里,心里却是没有什么 ...

  2. ASP实现用年月日时分秒和两位随机数字来作为上传文件名的函数

    Public Function GetNewFileName() dim ranNum dim dtNow dtNow=Now() randomize ranNum=int(90*rnd)+10 Ge ...

  3. 在webservice中传递Hashtable

    webservice中不支持hashtable的数据类型,那么如何在webservice中传递hashtable呢?我们可以通过将hashtable转化为webservice中支持的数组的类型来进行传 ...

  4. 关于H5+css3的一些简单知识

    最近在一个群里看到,有人在探讨H5,也看到自己关注的大神使用过H5的画布(canvas),于是心血来潮,看了点教程,也算对的起自己吧. 一.H5的新特性: 1.用于绘画的canvas元素 2.用于媒介 ...

  5. SqLite 框架 GreenDAO

    GreenDAO: 会生成一个数据访问,不用我们书写访问数据库的代码: 核心原理图 生成代码 就是用生成器生成一个对应的java类的生成工厂 public static void main(Strin ...

  6. Linux下chkconfig命令详解即添加服务以及两种方式启动关闭系统服务

    The command chkconfig is no longer available in Ubuntu.The equivalent command to chkconfig is update ...

  7. ios Swift 动手写

    Swift语言概览 基本概念 注:这一节的代码源自The Swift Programming Language中的A Swift Tour. Hello, world 类似于脚本语言,下面的代码即是一 ...

  8. ###《More Effective C++》- 基础议题

    More Effective C++ #@author: gr #@date: 2015-05-11 #@email: forgerui@gmail.com 一.仔细区别pointers和refere ...

  9. InstallShield Custom Dialog

    InstallShield 2008 Screen Layout is designed as below. Use toolbox to edit screen layout. 1> Set ...

  10. FileInputStream 与 BufferedInputStream 效率对比

    我的技术博客经常被流氓网站恶意爬取转载.请移步原文:http://www.cnblogs.com/hamhog/p/3550158.html ,享受整齐的排版.有效的链接.正确的代码缩进.更好的阅读体 ...