css注意点随手记---css书写规范

1、书写顺序

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、使用css缩写属性(这个看个人习惯,缩写只是看着简洁,反正我是不会缩写的)

1.去掉小数点前的“0”

1503561724(1).jpg

2.padding、margin等是可以缩写的

1503561810(1).jpg

3、连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器,为什么呢?

*输入的时候少按一个shift键;
*浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)
*能良好区分JavaScript变量命名(JS变量命名是用“_”)

4、不要随意使用Id

id的 优先级是 高于 class的,而且只能使用一次,不能多次使用。应当按需使用~~

5CSS命名规范(规则)常用的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  
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,868评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,677评论 32 459
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,359评论 0 5
  • 【畅鱼】 三月的春天,薄雾蒙蒙,霪雨霏霏,天气并不讨喜。然而靠着窗棂出神一阵,看着这雾气缓缓升腾,随风左右晃动,飘...
    小畅鱼阅读 514评论 0 1