css命名使用规范

css规范

命名规则说明

• 所有的命名最好都小写
• 属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5"
• 每个标签都要有开始和结束，且要有正确的层次，排版有规律工整
• 空元素要有结束的tag或于开始的tag后加上"/"
• 表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等
• h1到h5的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。
• 给每一个表格和表单加上一个唯一的、结构标记id
• 给图片加上alt标签
• 尽量使用英文命名原则
• 尽量不缩写，除非一看就明白的单词

网页css 命名

页面结构

wrap -- 用于最外层
header -- 用于头部
main -- 用于主体内容（中部）
nav -- 网页菜单导航条
head header -- 页头部分
foot footer -- 页脚部分
container content -- 容器,用于最外层
wrapper -- 页面外围控制整体布局宽度
layout -- 布局

导航

nav -- 主导航
subnav -- 二级导航
menu -- 菜单
submenu -- 子菜单
sideBar -- 侧栏

搜索

search -- 搜索
search_output -- 搜索输出和搜索结果相似
searchBar -- 搜索条
search_results -- 搜索结果

功能

current -- 当前的
tips -- tips小技巧
icon -- 图标
note -- 注释
tag -- 标签
msg message -- 提示信息
tips -- 小技巧
vote -- 投票
friendlink -- 友情连接
title -- 标题
summary -- 摘要
loginbar -- 登录条
searchInput -- 搜索输入框
hot -- 热门热点
copyright -- 版权信息
branding -- 商标
logo -- 网站LOGO标志
siteinfo -- 网站信息
siteinfoLegal -- 法律声明
siteinfoCredits -- 信誉
joinus -- 加入我们
partner -- 合作伙伴
service -- 服务
regsiter -- 注册
arr/arrow -- 箭头
guild -- 指南
sitemap -- 网站地图
list -- 列表
homepage -- 首页
subpage -- 二级页面子页面
tool, toolbar -- 工具条
drop -- 下拉
dorpmenu -- 下拉菜单
status -- 状态
scroll -- 滚动
download -- 下载
banner -- 广告条(顶部广告条)

css 文件命名

master.css main.css global.css -- 主要的
layout.css -- 布局，版面
columns.css -- 专栏
font.css -- 文字
print.css -- 打印样式
themes.css -- 主题

less 文件名

variables.less -- 变量
base.less -- 按钮样式
normalize.less -- 重置标签属性

代码性能优化

• 合并margin、padding、border的-left/-top/-right/-bottom的设置，尽量使用短名称。
• 选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。但是一定要避免覆盖全局样式设置。
• 注意选择器的性能，不要使用低性能的选择器。
• 禁止在css中使用*选择符。
• 除非必须，否则，一般有class或id的，不需要再写上元素对应的tag。
• 0后面不需要单位，比如0px可以省略成0，0.8px可以省略成.8px。
• 如果是16进制表示颜色，则颜色取值应该大写。
• 如果可以，颜色尽量用三位字符表示，例如#AABBCC写成#ABC 。
• 如果没有边框时，不要写成border:0，应该写成border:none 。
• 尽量避免使用AlphaImageLoader 。
• 在保持代码解耦的前提下，尽量合并重复的样式。
• background、font等可以缩写的属性，尽量使用缩写形式 。
• CSS3属性：transform/transition/animation/box-shadow/border-radius
• 如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照 -webkit- / -moz- / -ms- / -o- / std的顺序进行添加，标准属性写在最后。
• 链接的样式请严格按照如下顺序添加： a:link -> a:visited -> a:hover -> a:active