【04】

CSS注意事项

 1. 页面编码规范
1.1. 统一使用 UTF-8 编码,用@charset "utf-8"指定页面编码。
1.2. 全局字体设置:
windows 7系统:微软雅黑 Arial;
windows XP及以下:新宋体,宋体,Arial
MAC默认字体:Helvetica Neue和Helvetica Hiragino Sans GB。
font-family:"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53";
1.3. 中文字体使用编码转换。
1.4. 推荐使用216web安全色。
2. 属性写在一行内,属性之间、属性名和值之间以及属性与“{}”之间应减少空格,去掉最后一个“;”,例如:.class{width:200px;height:100px}
3. 属性的书写顺序:
3.1. 按照元素模型由外及内,由整体到细节书写,大致分为五组:
位置:position,left,right,float
盒模型属性:display,margin,padding,width,height
边框与背景:border,background
段落与文本:line-height,text-indent,font,color,text-decoration,...
其他属性:overflow,cursor,visibility,...
3.2. 针对特殊浏览器的属性,应写在标准属性之前,例如:-webkit-box-shadow:;-moz-box-shadow:;box-shaow:;
4. 带有前缀的属性,单独一行,通过缩进,让每个属性的值垂直对齐,方便编辑维护。
5. 谨慎添加新的选择符规则,尤其不可滥用 id,尽可能继承和复用已有样式
6. 选择符、属性、值均用小写(格式的颜色值除外),缩写的选择符名称须说明缩写前的全称,例如 .cl -> Clearfix
7. 避免使用各种CSS Hack,如需对 IE 进行特殊定义。
8. 勿使用冗余低效的 CSS 写法,例如:ul li a span{... }
9. 慎用 !important
10. 建议使用具有语义化的classname或id。
11.避免使用兼容性不好的使用滤镜
12.开发过程中的未定事项,须用 [!] 标出,以便于后续讨论整理。
13.注释格式,统一使用双斜杠加*。
14.上下模块之间的间距统一使用下一个模块的margin-top来实现,好处是:如果没有下一个模块也不会多出一段空隙。
15.hover,selected,disabled,current等具有特定意义的请勿直接占用。
16.:link :visited :hover :active书写顺序 L-V-H-A,速记:LoVe(喜欢)HAte(讨厌)。
17.不要使用 @import

【04】 CSS开发注意事项的更多相关文章

  1. MUI开发注意事项

    mui开发注意事项,有需要的朋友可以参考下. mui是一个高性能的HTML5开发框架,从UI到效率,都在极力追求原生体验:这个框架自身有一些规则,刚接触的同学不很熟悉,特总结本文:想了解mui更详细的 ...

  2. 跨平台移动APP开发进阶(一)mui开发注意事项

    mui开发注意事项 Mui HTML5开发框架 mui是一个高性能的HTML5开发框架,从UI到效率,都在极力追求原生体验:这个框架自身有一些规则,刚接触的同学不很熟悉,特总结本文:想了解mui更详细 ...

  3. Cobalt环境搭建及 Web开发注意事项

    一.在Linux系统上搭建Cobalt运行环境 Cobalt是一款开源轻量级HTML5/CSS/JS浏览器,旨在于用最少的CPU.GPU.RAM等资源消耗提供丰富的应用程序开发.为了使前端开发者验证自 ...

  4. uni-app开发注意事项

    关于vue 1.注意 如果使用老版的非自定义组件模式,即manifest中"usingComponents":false,部分模版语法不支持,但此模式已于2019年11月起下线. ...

  5. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  6. 2015年最佳的12个 CSS 开发工具推荐

    CSS所能做的就是改变网页的布局.排版和调整字间距等,但编写 CSS 并不是一项容易的任务,当你接触新的 CSS3 属性及其各自的浏览器前缀的时候,你会发现很伤脑经.值得庆幸的是一些优秀的开发人员提供 ...

  7. delphi 串口 关于RS485总线通信协议开发注意事项

    http://blog.csdn.net/shjhuang/article/details/9426739 关于RS485总线通信协议开发注意事项 1       前言 近段时间发现我们系统在进行设备 ...

  8. Linux (Ubuntu12.04) 下开发工具安装和使用

    Linux (Ubuntu12.04) 下开发工具安装和使用 这里讲述的是关于在ubuntu12.04下面安装和使用各种IDE 开发环境和初步使用的知识.说一下背景:很多的开发基本都是在linux操作 ...

  9. 35款加速网站开发的 CSS 开发工具

    网络有很很多的 CSS 工具和教程可用,它可以帮助设计人员和开发人员轻松.快速地学习 CSS 技术.这些工具中在高效开发 Web 应用程序中发挥重要作用. 在这篇文章中,我们收集了35个最好的 CSS ...

随机推荐

  1. bitset优化背包问题

    https://blog.csdn.net/HowardEmily/article/details/77340566 留坑待填

  2. 鼠标适配器Adapter

    先来看看概念: 现在我们要写一个这样的东西,就是一个窗口,然后鼠标点一下就有一个小圆点,like this: 来我们来看代码: import java.awt.*; import java.util. ...

  3. 基于CentOS6.5或Ubuntu14.04下Suricata里搭配安装 ELK (elasticsearch, logstash, kibana)(图文详解)

    前期博客 基于CentOS6.5下Suricata(一款高性能的网络IDS.IPS和网络安全监控引擎)的搭建(图文详解)(博主推荐) 基于Ubuntu14.04下Suricata(一款高性能的网络ID ...

  4. poj1715Hexadecimal Numbers(数位dp)

    链接 好久没写这种逐位计数的了. 先统计出总的数 ,s-n+1,倒着计算的 ,感觉倒着比较符合计算方式,总数为15*A(15,i) (1=<i<=8) 也就是1-8长度所有的排列总数 然后 ...

  5. 【JavaScript】之函数的this

    提起函数中的this是很多初学者较为苦恼的,也是很多工作一段时间的人也存在误解的,你问this指向的是谁,大多数人会随口一答当然是指向调用这个函数的元素,当然这也没什么错,可是函数的调用方法不同thi ...

  6. Fresco 源码分析(序)

    1. 为什么要写这个分析的博客 其实关于Fresco的相关内容,大家上网搜索,一般可以找到一大推,但是为什么我还要写关于这个的呢,因为在网上搜索中文和英文的关于fresco的相关知识时,大家只是潜在的 ...

  7. vue框架的知识

    基础:实例----组件----指令----选项-----计算属性----事件绑定----模板渲染-----内置动画 ---组件交互----路由. vuejs干了什么事情:数据渲染/数据同步 组件化/模 ...

  8. (转)淘淘商城系列——VMware添加已配置好的虚拟机

    http://blog.csdn.net/yerenyuan_pku/article/details/72802323 我们有时候会碰到虚拟机环境搭建特别麻烦,很容易出错的问题,而这时我们又刚好有别人 ...

  9. lua 之 三木运算符

    在c语言中我三目运算符这么写: a?b:c 例如: max = a>b?a:b; 在lua中我们这么写 max = a>b and a or b 运行如下:

  10. Danfoss Motor - Automotive Motor: What Sensors Are There?

    The   Danfoss Motor     states that the motor sensor control system is the heart of the entire autom ...