前端css书写规范

代码书写规范这种东西虽然不是必须的但是确实很有必要的好的书写规范不单单能增加可阅读性和提高代码性能而且有利于后续人员维护代码。良好的书写规范也是区分新手与专业人员的一个标准。

一css书写顺序

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等

二、css缩写属性

css有很多属性是可以进行缩写的比如padding与margin、font等这样既精简代码又提高了可阅读性。

单位也可以将小数点前的0去掉如0.8em变成.8em

16进制颜色代码缩写有些颜色代码是可以缩写的应该要尽量缩写。

三、连字符css选择器命名规范

1、词组命名应该用“-”横线来为选择器命名

2、不建议使用“_”下划线来命名CSS选择器因为输入的时候少按一个shift键浏览器兼容问题比如使用_tips的选择器命名在IE6是无效的虽然现在应该没有人用IE6了。能良好区分JavaScript变量命名js变量用_ 比较多

3、id应该按需使用不能滥用

四、帮选择器添加状态前缀

给选择器添加一个表示状态的前缀让语义更明了

五、CSS命名规范(规则)常用的CSS命名规则

 头header 内容cntent/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      

注释的写法:      /*  Header  */    

内容区      /*  End  Header  */      

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      

注意事项::    

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

CSS样式表文件命名      主要的  master.css      模块  module.css      基本共用  base.css      布局、版面  layout.css      主题  themes.css      专栏  columns.css 文字  font.css      表单  forms.css      补丁  mend.css      打印  print.css