【Web前端】CSS编码规范

来源：互联网发布：windows错误1503 编辑：程序博客网时间：2024/05/20 07:35

【声明】本文转载自H-ui前端框架

页面编码规范
1. 统一使用 UTF-8 编码,用@charset "utf-8"指定页面编码
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";
3. 中文字体使用编码转换
```
微软雅黑：\5FAE\8F6F\96C5\9ED1 或 Microsoft YaHei黑体：\9ED1\4F53新宋体：\65b0\5b8b\4f53宋体：\5b8b\4f53
```
4. 推荐使用216web安全色
属性写在一行内，属性之间、属性名和值之间以及属性与“{}”之间应减少空格，去掉最后一个“;”，例如：.class{width:200px;height:100px}
属性的书写顺序：
1. 按照元素模型由外及内，由整体到细节书写，大致分为五组：
  - 位置：position,left,right,float
  - 盒模型属性：display,margin,padding,width,height
  - 边框与背景：border,background
  - 段落与文本：line-height,text-indent,font,color,text-decoration,...
  - 其他属性：overflow,cursor,visibility,...
2. 针对特殊浏览器的属性，应写在标准属性之前，例如：-webkit-box-shadow:;-moz-box-shadow:;box-shaow:;
带有前缀的属性，单独一行，通过缩进，让每个属性的值垂直对齐，方便编辑维护
谨慎添加新的选择符规则，尤其不可滥用 id，尽可能继承和复用已有样式
选择符、属性、值均用小写(格式的颜色值除外)，缩写的选择符名称须说明缩写前的全称，例如 .cl → Clearfix

避免使用各种CSS Hack，如需对 IE 进行特殊定义，请参阅如下CSS Hack

_          IE6
*          IE6/7
!important IE7/Firefox
*+         IE7
\9         IE6/7/8
\0         IE8
条件hack：<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]--> IE7以下版本
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]--> IE7
<!--[if IE 8]> <html class="no-js lt-ie9"><![endif]--> IE8
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--> IE8以上

勿使用冗余低效的 CSS 写法，例如：ul li a span{... }
慎用 !important

建议使用具有语义化的classname或id，请参阅如下css命名规范

内容优先,表现为辅
css命名中英文对照
current(当前)/hover(悬停)/selected(挑选)/disabled(禁用)/focus(得到焦点)/blur(失去焦点)/checked(勾选)/success(成功)/error(出错)
header|hd(头部)/content|cnt(内容)/title|tit(标题)/item(项目|条)/cell(单元)/image|pic|img(图片)/text|txt(文字)/top(顶部)/scrubber(时序菜单)
nav(导航)/mainbav(主导航)/subnav(子导航)/topnav(顶部导航)/breadcrumb(面包屑导航)
flink(友情链接)/footer(尾)/copyright(版权)
menu(菜单)/submenu(子菜单)/dropdown(下拉菜单)
searchBar|search(搜索条)/searchTxt(搜索框)/searchBtn(搜索按钮)/search_key(搜索词)
member(会员)/ucenter(用户中心)/loginBar(登陆条)/login(登录)/loginBtn(登录按钮)/regsiter(注册按钮)/btn-regsiter(注册按钮)/name(用户名)/password(密码)/nickname(昵称)/mobilephone|mobile(手机)/telephone|tel(电话)/defaultavatar(默认头像)
hot(热点)/news(新闻)/banner/AD(广告)/download(下载)
content(内容)/title(标题)/summary(摘要)/time(时间)
share(分享)/digg(顶)/like(喜欢)
list(列表)/pList(图片列表)/List(文字列表)/tpList(图文列表)
table(表格)/row(行)/column(列)/gutter(间隔)/viewport(视口)
tab(标签)/tags(标签)/scroll(滚动)
sidebar(侧边栏)/column(栏目)/section(区块)/msg(提示信息)/status(状态)/vote(投票)/tips(小技巧)/guild(指南)/note(注释)
icon-(图标)/btn-(按钮)
goods(商品)/goodsList(商品列表)/goodsDetail(商品详情)/goodsInfo(商品信息)
tuan(团购)/tuanList(团购列表)/tuanDetail(团购详情)/tuanInfo(团购信息)
transition(动画)/shadow(阴影)/fade(淡入淡出)/flip(翻页效果)/slide(滑动)/slideup(上滑动)/slidedown(下滑动)/turn(翻页)/horizontal(水平)/vertical(垂直)/collapsible(折叠)/corners(拐角)/flow(流)/reverse(反向)/pop(弹窗)
count(总数|计数)/plus(加号|正)/minus(减号|负)/controlgroup(控制组)

避免使用兼容性不好的使用滤镜
开发过程中的未定事项，须用 [!] 标出，以便于后续讨论整理
注释格式，统一使用双斜杠加*
上下模块之间的间距统一使用下一个模块的margin-top来实现，好处是：如果没有下一个模块也不会多出一段空隙
hover，selected，disabled，current等具有特定意义的请勿直接占用
:link :visited :hover :active书写顺序 L-V-H-A，速记：LoVe(喜欢)HAte(讨厌)
不要使用@import

0 0