大家都知道规范灵活的代码布局对提升程序员开发和后期维护效率至关重要,因为css同一元素可能被不同偏重度的选择器命中,相同元素不同的选择器表达式的样式冲突导致的显示异常,再加上不规范的代码,经常让前端代码开发、维护和调试变得苦不堪言,以下是笔者短暂前端开发工作中总结的一些CSS代码规划心得。

  个人认为规范的CSS样式文件可以分为三部分,依次如下:

1、CSS重置代码,即/*css reset*/这部分代码主要是用于解决各大主流浏览器默认css属性不一致的。因为CSS的标签元素众多且在chrome,safary等浏览器中的默认属性样式多样,这一部分主要是通过统一定义他们的默认样式以产生统一的显示效果;
 
2、中间部分是/*global css*/即通常所说的页面公用样式,通常是一个网站中不同页面或者说模块间相同的可以共用的样式,例如统一的页面头部和尾部;
 
3、第三部分就是各个模块或者说页面自己的个性样式。
 
以上三部分既可以独立为三个文件也可以置于一个css文件的不同部分,笔者通常更倾向于前者。

  

CSS学习笔记之样式规划的更多相关文章

  1. CSS学习笔记之样式声明

    目录 1.背景 2.文本 3.字体 4.列表 5.表格 6.轮廓 在这篇文章中你能看到有关于 CSS 样式设置的常用属性,文章的目录如下: 1.背景 (1)背景颜色 可以使用 background-c ...

  2. CSS学习笔记之基本介绍

    1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...

  3. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  4. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  5. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  6. HTML+CSS学习笔记(3)- 认识标签(2)

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  7. HTML+CSS学习笔记(2) - 认识标签(1)

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  8. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

  9. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

随机推荐

  1. 前端VUE框架-es6

    EMCAScript 6 又叫 es2015 1.常量和变量 常量: const a = "hello" 常量不能修改和重复定义 变量: let:定义一个块级作用域的变量 需要先定 ...

  2. python-flask-session和scoped_session区别

    scoped_session from sqlalchemy.orm import sessionmaker from sqlalchemy import create_engine from sql ...

  3. python-day91--JS实现的ajax

    一.AJAX核心(XMLHttpRequest) 其实AJAX就是在Javascript中多添加了一个对象:XMLHttpRequest对象.所有的异步交互都是使用XMLHttpServlet对象完成 ...

  4. 1.11 UML 类图(多看多用就熟悉了)(节选自:《大话设计模式》)

    类:用矩形框表示(类图分三层) 第一层显示类的名称:(如果是抽象类,就用斜体显示) 第二层是类的特性,通常就是字段和属性: 第三层是类的操作,通常是方法或行为. (注意前面的符号,“+” 表示 pub ...

  5. PostgreSQL CPU占用100%性能分析及慢sql优化

    查看连接数变化 CPU利用率到达100%,首先怀疑,是不是业务高峰活跃连接陡增,而数据库预留的资源不足造成的结果.我们需要查看下,问题发生时,活跃的连接数是否比平时多很多.对于RDS for PG,数 ...

  6. TLS 改变密码标准协议(Change Cipher Spec Protocol) 就是加密传输中每隔一段时间必须改变其加解密参数的协议

    SSL修改密文协议的设计目的是为了保障SSL传输过程的安全性,因为SSL协议要求客户端或服务器端每隔一段时间必须改变其加解密参数.当某一方要改变其加解密参数时,就发送一个简单的消息通知对方下一个要传送 ...

  7. globals() 和 locals() 函数

    globals() 和 locals() 函数 根据调用地方的不同,globals() 和 locals() 函数可被用来返回全局和局部命名空间里的名字. 如果在函数内部调用 locals(),返回的 ...

  8. hashlib 库

    hashlib 库 hash 是一种算法,用来接收一系列数据,经过计算后得到一个hash值 hash值的三大特征: 1. 如果传入的数据一样,得到的hash值一样 2. 只要采用的hash算法固定,无 ...

  9. Win10怎么设置打开文件的默认程序

  10. Java IO流01-总叙

     Java IO包体系结构图: 1.流式部分――IO的主体部分: 2.非流式部分——主要包含一些辅助流式部分的类,如:File类.RandomAccessFile类和FileDescriptor等类: ...