码迷,mamicode.com
首页 > Web开发 > 详细

前端(HTML/CSS/JS)-CSS编码规范

时间:2018-03-11 00:19:00      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:lin   处理   style   top   port   styles   lock   cell   基本   

1. 文件名规范

文件名建议用小写字母加中横线的方式。为什么呢?因为这样可读性比较强,看起来比较清爽

https://stackoverflow.com/questions/25704650/disable-blue-highlight-when-touch-press-object-with-cursorpointer

那为什么变量名不用小写字母加小划线的方式

family_tree

因为下划线比较难敲(shift + -),所以一般用驼峰式命名变量的居多。

引入CSS文件的link可以不用带type="text/css"

<link rel="stylesheet" href="test.css">

因为link里面最重要的是rel这个属性,可以不要type,但是不能没有rel。

JS也是同样道理,可以不用type

<script src="test.js"></script>

2. 不要使用样式特点命名

有些人可能喜欢用样式的特点命名

.red-font{
    color: red;
}
.p1{
    font-size: 18px;
}
.p2{
    font-size: 16px;
}

类的命名应当使用它所表示的逻辑意义

如signup-success-toast、request-demo、agent-portrait、 company-logo等等。

3. 减少覆盖

如下代码,为了让每个house中间的20px的间距,但是第一个house不要有间距:

.house{
    margin-top: 20px;
}
.house:first-child{
    margin-top: 0;
}

其实可以改成这样

.house + .house{
    margin-top: 20px;
}

选择.house后所有的.house,第一个不选中,这样看起来代码就简洁多了。

还有这种情况,如下代码所示:

.request-demo input{
    border: 1px solid #282828;
}
.request-demo input[type=submit]{
    border: none;
}

其实可以借助一个:not选择器:

.request-demo input:not([type=sbumit]){
    border: 1px solid #282828;
}

4. 多写注释

(1)文件顶部的注释

/*
 * @description整个列表页样式入口文件
 * @author yincheng.li
 */

(2)简单注释

/*为了去除输入框和表单点击时的灰色背景*/
input, 
form{
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
}

5. 属性值规范

(1)如果值是0,通常都不用带单位

.list{
    border: 1px solid 0;
    margin: 0;
}

(2)色值用十六进制,少用rgb

因为使用rgb是一个函数,它还要计算一下转换。如果是带有透明度的再用rgba.

如果色值的六个数字一样,那么写3个就好:

color: #ccc;

(3)注意border none和0的区别

如下两个意思一样

border: 0;
border-width: 0;

而下面这两个一样:

border: none;
border-style: none;

所以用0和none都可以去掉边框。

6. 不要设置太大的z-index

有些人喜欢设置z-index很大:

z-index: 99999;

以为他是老大了,不会有人再比他高了,但是螳螂捕蝉,黄雀在后,很快得再写一个:

z-index: 999999

通常自己页面的业务逻辑的z-index应该保持在个位数就好了。

7. 注意float/absolute/fixed定位会强制设置成block

a.btn {
    float: left;
    display: block;
    width: 100px;
    height: 30px;
}

第二行的display: block其实是没用的,因为如果你浮动了,目标元素就会具有块级盒模型的特性,即使你display: table-cell或者inline也不管用

8. 清除浮动

清除浮动有多种方法,一般用clearfix大法,虽然这个方法有缺陷,但是它比较简单且能够适用绝大多数的场景,一个兼容IE8及以上的clearfix的写法

.clearfix:after{
    content: "";
    display: table;
    clear: both;
}

9. CSS动画规范

(1)不要使用all属性做动画

使用transition做动画的时候不要使用all所有属性,在有一些浏览器上面可能会有一些问题,如下

transition: all 2s linear;

正确的做法是要用哪个属性做动画就写哪个,如果有多个就用隔开

transition: transform 2s linear,
             opacity 2s linear;

(2)使用transform替代position做动画

如果能用transform做动画的,就不会使用left/top/margin等,因为transform不会造成重绘,性能要比position那些高很多,特别是在移动端的时候效果比较明显。基本上位移的动画都能用transform完成,不需要使用CSS2的属性,如一个框从右到左弹出。

(3)偏向于使用CSS动画替代JS动画

例如把一个框,从下到上弹出,可以用jQuery的slideUp函数,或者自己写setInterval函数处理,但是这些没有比用CSS来得好。使用CSS,初始状态可以把框translate移动屏幕外,然后点击的时候加上一个类,这个类的transform值为0,然后再用transition做动画就好了。

10. 行内元素可以直接设置margin-left/margin-right

如下有些人为了把span撑开,设置span display: inline-block:

span.phone-numer{
    display: inline-block;
    margin-left: 10px;
}

其实行内元素可直接margin的左右,能够把它撑开,不需要设置inline-block:

span.phone-numer{
    margin-left: 10px;
}

  另外需要注意的是img/input/textarea/button默认就是inline-block,也不用再设置。

前端(HTML/CSS/JS)-CSS编码规范

标签:lin   处理   style   top   port   styles   lock   cell   基本   

原文地址:https://www.cnblogs.com/QianBoy/p/8542365.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!