本篇文章给大家分享的是有关css书写规范有哪些，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

1、书写顺序

根据属性的重要性按顺序书写

只遵循横向顺序即可，先显示定位布局类属性，后盒模型等自身属性，最后是文本类及修饰类属性。

→→→显示属性自身属性文本属性和其他修饰displaywidthfontvisibilityheighttext-alignpositionmargintext-decorationfloatpaddingvertical-alignclearborderwhite-spacelist-styleoverflowcolortopmin-widthbackground

1.位置属性

(position, top, right, z-index, display, float等)

2.大小

(width, height, padding, margin)

3.文字系列

(font, line-height, letter-spacing, color- text-align等)　　

4.背景

(background, border等)

5.其他

(animation, transition等)

2、选择器等级

a = 行内样式style。b = ID选择器的数量。c = 类、伪类和属性选择器的数量。d = 类型选择器和伪元素选择器的数量。选择器等级(a,b,c,d)style=””1,0,0,0#wrapper #content {}0,2,0,0#content .dateposted {}0,1,1,0p#content {}0,1,0,1#content p {}0,1,0,1#content {}0,1,0,0p.comment .dateposted {}0,0,2,1p.comment p {}0,0,1,2.comment p {}0,0,1,1p.comment {}0,0,1,1.comment {}0,0,1,0p p {}0,0,0,2p {}0,0,0,13、书写规范、缩写属性

属性缩写

去掉小数点前的0

简写命名，但前提是要让人看懂你的简写

16进制颜色代码缩写

连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。2.不建议使用“_”下划线来命名CSS选择器，为什么呢?输入的时候少按一个shift键;浏览器兼容问题 (比如使用*tips的选择器命名，在IE6是无效的)能良好区分JavaScript变量命名(JS变量命名是用“*”)

不要轻易使用id

id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。

为选择器添加状态前缀

有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。

image

4、 命名规范

1 布局文档 doc doc头部 head hd主体 body bd尾部 foot ft主栏 main mn主栏子容器 mainc mnc侧栏 side sd侧栏子容器 sidec sdc盒容器 wrap/box wrap/box导航 nav nav2 模块子导航 subnav snav面包屑 crumb crm菜单 menu menu选项卡 tab tab标题区 head/title hd/tt内容区 body/content bd/ct列表 list lst表格 table tb表单 form fm热点 hot hot排行 top top登录 login log标志 logo logo广告 advertise ad搜索 search sch幻灯 slide sld提示 tips tips帮助 help help新闻 news news下载 download dld注册 regist reg投票 vote vote版权 copyright cprt结果 result rst标题 title tt按钮 button btn输入 input ipt3 功能浮动清除 clearboth cb向左浮动 floatleft fl向右浮动 floatright fr内联块级 inlineblock ib文本居中 textaligncenter tac文本居右 textalignright tar文本居左 textalignleft tal垂直居中 verticalalignmiddle vam溢出隐藏 overflowhidden oh完全消失 displaynone dn字体大小 fontsize fs字体粗细 fontweight fw4 皮肤字体颜色 fontcolor fc背景 background bg背景颜色 backgroundcolor bgc背景图片 backgroundimage bgi背景定位 backgroundposition bgp边框颜色 bordercolor bdc5 状态选中 selected sel当前 current crt显示 show show隐藏 hide hide打开 open open关闭 close close出错 error err不可用 disabled dis

1、class

头：header　　内容：content/container　　尾：footer　　导航：nav　　侧栏：sidebar　　栏目：column　　页面外围控制整体佈局宽度：wrapper　　左右中：left right center　　登录条：loginbar　　标志：logo　　广告：banner　　页面主体：main　　热点：hot　　新闻：news　　下载：download　　子导航：subnav　　菜单：menu　　子菜单：submenu　　搜索：search　　友情链接：friendlink　　页脚：footer　　版权：copyright　　滚动：scroll　　内容：content　　标签：tags　　文章列表：list　　提示信息：msg　　小技巧：tips　　栏目标题：title　　加入：joinus　　指南：guide　　服务：service　　注册：regsiter　　状态：status　　投票：vote　　合作伙伴：partner

2、id

(1)页面结构　　 容器: container　　 页头：header　　 内容：content/container　　 页面主体：main　　 页尾：footer　　 导航：nav　　 侧栏：sidebar　 栏目：column　　 页面外围控制整体佈局宽度：wrapper　　 左右中：left right center(2)导航　　 导航：nav　　 主导航：mainnav　　 子导航：subnav　　 顶导航：topnav　　 边导航：sidebar　　 左导航：leftsidebar　　 右导航：rightsidebar　　 菜单：menu　　 子菜单：submenu　　 标题: title　　 摘要: summary(3)功能　　 标志：logo　　 广告：banner　　 登陆：login　　 登录条：loginbar　　 注册：register　　 搜索：search　　 功能区：shop　　 标题：title　　 加入：joinus　　 状态：status　　 按钮：btn　　 滚动：scroll　　 标籤页：tab　　 文章列表：list　　 提示信息：msg　　 当前的: current　　 小技巧：tips　　 图标: icon　　 注释：note　　 指南：guild　　 服务：service　　 热点：hot　　 新闻：news　　 下载：download　　 投票：vote　　 合作伙伴：partner　　 友情链接：link　　 版权：copyright

3、文件

主要的 master.css　　 模块 module.css　　 基本共用 base.css　　 布局、版面 layout.css　　 主题 themes.css　　 专栏 columns.css　　 文字 font.css　　 表单 forms.css　　 补丁 mend.css　　 打印 print.css5、注意事项

/* Header */　　内容区　　/* End Header */

1.一律小写;　　 2.尽量用英文;　　 3.不加中槓和下划线;　　 4.尽量不缩写，除非一看就明白的单词。

以上就是css书写规范有哪些，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。