前端开发规范(css)

  • 时间:2021-08-27
  • 浏览量:
  • 分类:[ html5+css3]
  • 作者:池剑锋

1 z-index 使用

  • 底部轮播图 -100~0

  • 基本 0~100

  • 内容层 100~200

  • 头部、导航 200~300

  • 蒙版 300~400

  • 悬浮窗 500~600

  • 悬浮窗按钮 600~700

2 class和id 命名

  • 命名要见名知意,简洁明了,让代码会说话,减少不必要的注释,严禁出现 拼音数字 组合命名方式,统一使用有具体意义的英文单词命名

    • 使用语义化、通用的命名方式;

    • 统一小写字母,使用连字符 - ,例如:product-detail

    • 避免选择器class和id叠加使用

    • 避免选择器嵌套层级过多,尽量少于 3 级

    • 全局样式统一使用 g-类名,例如:g-color

    • 插件统一带上前缀,如 hdk-xxx

3 不要随意使用id

  • id是唯一的,不能重复定义,另外id的权重远高于class,所以id应该按需使用不要滥用。

4 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等)

<!--推荐写法-->
.box{  
    position: absolute;  
    top: 0;  
    left: 10px;  
    width: 100px;  
    color: #008000; 
    background: url(../img/logo.pg) no-repeat left center;  
    transition: all .2s ease-in-out;
}

5 私有在前,标准在后

.box{  
    -webkit-box-shadow:0 0 0 #000;  
    -moz-box-shadow:0 0 0 #000;  
    box-shadow:0 0 0 #000;
}

6 重置样式参考

  • 重置样式,清除浏览器默认样式,并配置基础样式。

html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}  header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}  table{border-collapse:collapse;border-spacing:0;}  caption,th{text-align:left;font-weight:normal;}  html,body,fieldset,img,iframe,abbr{border:0;}  i,cite,em,var,address,dfn{font-style:normal;}  [hidefocus],summary{outline:0;}  li{list-style:none;}  h1,h2,h3,h4,h5,h6,small{font-size:100%;}  sup,sub{font-size:83%;}  textarea{overflow:auto;resize:none;}  label,summary{cursor:default;}  a,button{cursor:pointer;}  h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}  del,ins,u,s,a,a:hover{text-decoration:none;}  body,textarea,input,button,select,keygen,legend{font:14px/1.6 arial,\5b8b\4f53;color:#333;outline:0;}


上一篇:移动端页面适配的方案
下一篇:没有了
分享给好友