大家都知道规范灵活的代码布局对提升程序员开发和后期维护效率至关重要,因为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. python and or的理解规则

    >>> 'a' and 'b' 'b' >>> '' and 'b' '' >>> 'a' and 'b' and 'c' 'c’ 解释:在布尔上 ...

  2. 为什么样本方差除以(n-1)而不是n ?(自由度)

    不记得第几次看见样本方差的公式,突然好奇为什么要除以(n-1)而不是n呢?看见一篇文章从定义上和无偏估计推导上讲的很清楚https://blog.csdn.net/fuming2021118535/a ...

  3. file 文件上传后缀转化小写

    1.上传的文件后缀是大写的我们做上传文件的时候考虑的比较少,所以我就想把客户上传的文件后缀统一一下,后面我解析附件的时候比较好解析.例子:我得到的文件名称:$infoFileName;$fileNam ...

  4. rac 配置dg完成版

    ********************************************************************************************集群环境下的da ...

  5. Qt Widgets——抽象滑块及其继承类

    三个可视类的默认外观分别如下(win7):它们的滑块都处于最小值0处. 理解QAbstractSlider时 可将它想成就是QScrollBar(该小部件的外观比较多地拥有QAbstractSlide ...

  6. Express 路径请求及对应的获取路径形式

    req.query // GET /search?q=tobi+ferret req.query.q // => "tobi ferret" // GET /shoes?or ...

  7. 使用Redis数据库(1)(三十三)

    Spring Boot中除了对常用的关系型数据库提供了优秀的自动化支持之外,对于很多NoSQL数据库一样提供了自动化配置的支持,包括:Redis, MongoDB, Elasticsearch, So ...

  8. 批量生成QRcode

    本想在excel批量生成GUID,并生成二维码. //Excel生成guid,uuid 格式:600d65bc-948a---fd8dfeebb1cd =LOWER(CONCATENATE(DEC2H ...

  9. C++简单输入输出-计算火车运行时间

    //写的很差,无力tc 7-4 计算火车运行时间 (17 分) 本题要求根据火车的出发时间和达到时间,编写程序计算整个旅途所用的时间. 输入格式: 输入在一行中给出2个4位正整数,其间以空格分隔,分别 ...

  10. laravel本地开发的项目部署到服务器上

    不建议用ftp,建议用git.svn等工具从你的开发服务器上拉取.或者使用一些自动构建发布的工具.如果非要用ftp上传,建议用以下步骤: 服务器上安装composer,并使用`composer sel ...