!如何组织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层。)

最新文章

  1. win7(x64)下安装cocos2d并编译安卓项目
  2. java.lang.NumberFormatException: For input string: "1608020001 " 错误
  3. 关于内存数据与 JSON
  4. 冒泡算法应用(坐标Y值降序X值升序)
  5. 忍者无敌-实例讲解Cocos2d-x瓦片地图
  6. 运行ORB-SLAM笔记_使用篇(二)
  7. log4j的终极封装
  8. leetCode(62)-Reverse Integer
  9. 浅谈css3有意思的属性pointer-events: none;
  10. 兼容IphoneX
  11. Verilog实现模长等于六十的二进制编码计数器
  12. 开源框架.netCore DncZeus学习(五)下拉树的实现
  13. 安卓开发helloworld
  14. SVG2PNG(前台和后台将SVG转换为PNG)--amcharts导出png
  15. PHP微信公共号H5页面跳转小程序。
  16. python基础知识回顾之元组
  17. 玩转树莓派:OpenHAB的入门(一)
  18. MySQL: 查看一次SQL的执行时间都花在哪些环节上
  19. e1086. if/else语句
  20. JDBC——释放资源的代码

热门文章

  1. c数组和指针的理解
  2. .Net 组件技术概述
  3. ubuntu修改grub背景
  4. 第二十四篇、iOS 10版本适配
  5. iOS开发——手机号,密码,邮箱,身份证号,中文判断
  6. C#5.0之后推荐使用TPL(Task Parallel Libray 任务并行库) 和PLINQ(Parallel LINQ, 并行Linq). 其次是TAP(Task-based Asynchronous Pattern, 基于任务的异步模式)
  7. 关于Encoding.GetEncoding("utf-8")和Encoding.GetEncoding("GB2312")及Encoding.Default
  8. 使用FreeMarker生成静态HTML
  9. virtual析构函数的作用
  10. [Guava官方文档翻译] 1.Guava简介 (Introduction)