大家都知道规范灵活的代码布局对提升程序员开发和后期维护效率至关重要,因为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. linux中用composer安装yii框架

    我的服务器是安装的是lanmp环境 如果环境版本比较低的话,建议升级一下版本 升级版本命令:./lanmp.sh cus 全都选择最高的.完成之后: curl -sS https://getcompo ...

  2. session一二事

    Session即回话,指一种持续性的.双向的连接.Session和Cookie在本质上没有什么区别,都是针对HTTP协议的局限性而提出的一种保持客户端和服务器间保持会话连接状态的机制. Session ...

  3. 6月5 Smarty自定义函数

    自定义函数:<{方法名称}> 在html页面是可以直接赋值的:(没啥作用只是知道即可) <{$a = "hello"}><div><{$a ...

  4. 【Java】【5】List随机取值

    //shuffle 打乱顺序 Collections.shuffle(list); //随机抽取1个值 System.out.println(list.get(0)); //随机抽取N个值 Syste ...

  5. gleez框架获得时间控件

    1,首先你要在你的页面上引用一个js <script src="<?php echo URL::base() ?>media/vendor/datepicker/Wdate ...

  6. MySQL_插入更新 ON DUPLICATE KEY UPDATE

    平时我们在设计数据库表的时候总会设计 unique  或者 给表加上 primary key 的限制条件. 此时 插入数据的时候 ,经常会有这样的情况: 我们想向数据库插入一条记录: 若数据表中存在以 ...

  7. eclipse初学者的使用

    eclipse的使用 字体设置:      设置环境字符: 设置背景颜色 寻找窗口: java JDK的配置: 配置自动提示: 适合初学者适应环境开发.

  8. nginx 隐藏 index.php 和 开启 pathinfo 模式的配置

    nginx 通过 location 的规则匹配将 php 转发给 php-fpm 处理后获取结果然后返回给客户端,转发模式可以通过 unix sock 或 tcp socket 方式.百度了好多文章我 ...

  9. 线程池 execute 和 submit 的区别

    代码示例: public class ThreadPool_Test { public static void main(String[] args) throws InterruptedExcept ...

  10. mac bash 下使用vi 快捷方式——因为没有alt键 所以没有办法 用vi模式也非常方便的

    set -o emacs ##切到emacs模式 set -o vi ##切到vi模式 set -o ## 查看当前选项的设置状态 所以你只需要在.bashrc下加入 set -o vi 然后,使用E ...