大家都知道规范灵活的代码布局对提升程序员开发和后期维护效率至关重要,因为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. Loadrunner打不开浏览器以及卡死的各种问题

    Loadrunner11.0启动WebTours之总结1 第一次安装LR11时,安装安组件后没有对电脑进行重启,直接安装的LR112 安装完毕LR后,录制脚本时发现不能启动IE11.百度发现LR支持I ...

  2. MVC实战之排球计分(二)—— 构架概要设计

    本程序主要基于MVC4框架,使应用程序的输入,处理和输出强制性分开,使得软件可维护性,可扩展性,灵活性以及封装性得到提高, MVC应用程序分为三个核心部件:Model,View, Controller ...

  3. python low版线程池

    1.low版线程池设计思路:运用队列queue 将线程类名放入队列中,执行一个就拿一个出来import queueimport threading class ThreadPool(object): ...

  4. Slony-I同步复制部署

    本次测试环境 IP 10.189.102.118 10.189.100.195 10.189.100.226 PGHOME /usr/local/pgsql /usr/local/pgsql /usr ...

  5. Ajax请求中的async:false/true的作用【转载】

    [Ajax请求中的async:false/true的作用] 作者:https://www.cnblogs.com/mmzuo-798/p/7098979.html 前言: 昨天在做倒计时修改的时候,发 ...

  6. 牛客网 PAT 算法历年真题 1003: 数素数 (20)

    1003:数素数 (20) 时间限制 1000 ms 内存限制 32768 KB 代码长度限制 100 KB 判断程序 Standard (来自 小小) 题目描述 令Pi表示第i个素数.现任给两个正整 ...

  7. Zabbix3.4.7监控windows进程

    1.首先,找到要监控进程的主机 创建新的监控项 然后应用集选择processes,点击添加,此处是以zabbix_agentd.exe为例添加 2. 为此监控项添加触发器 注意触发器表达式的编写,上面 ...

  8. docker图形化管理工具portainer

    本章主要介绍docker的web图形化管理工具.这里使用 portainer(类似与dockui不过dockerui只支持单节点) 镜像名称 portainer/portainer 一.启动porta ...

  9. css 中的grid布局基础

    CSS Grid Layout为CSS引入了一个二维网格系统.网格可用于布局主要页面区域或小型用户界面元素. 网格是一组交叉的水平和垂直线 - 一组定义列,其他行.元素可以放在网格上,以行或者列为标准 ...

  10. node编译C++,比如安装node-gyp失败的问题

    遇到的这个问题是很多需要编译才能运行的node模块共有的问题. npm i -g windows-build-tools 首先以管理员身份打开命令行,然后在命令行下执行这一行命令. 然后重新运行你刚才 ...