良好的css书写规范可以提高代码的阅读体验(蓝色表常用)
一.css书写顺序
(1)位置属性position,top,left,rigt,z-index,display,float等
(2)大小width,height,padding,margin等
(3)文字系列font ,line-height,letter-spacing,color-text-align等
(4)背景background,border等
(5)其他animation,transition等
二.字符的命名规范
1长名称或词组可以使用中横线来为选择器命名
2不能用'_'下划线来命名css选择器
原因
(1)一些浏览器已经不允许使用下划线来命名css选择器(不兼容)
(2)能良好区分javascript变量命名
三.不要随意使用id
id是js唯一的,不能多次使用,而是用class类选择器可以重复使用,另外id的优先级先于calss,所以id不能滥用。
四.常用的css命名规则
头: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
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
五.常见的id命名
<1>页面结构
容器:container
页头:header
页面主题:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
<2>导航
导航:nav
主导航:mainbar
子导航:subnav
项导航:topnav
边导航:sidebar
左边导航:leftsidebar
右边导航:rightsidebar
菜单:menu
子菜单:submenu
标题:title
摘要:summary
<3>功能
标志:logo
广告:banner
登录:login
登陆条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的:current
小技巧:tips
图标:icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright