CSS代码书写规范究极指南

2020-05-06 09:23:48易采站长站整理

解释:
见本文,在可能的情况下应选择这样四种变换:

CSS Code复制内容到剪贴板

transform: translate(npx, npx);   
transform: scale(n);   
transform: rotate(ndeg);   
opacity: 0..1;  

典型的,可以使用 translate 来代替 left 作为动画属性。
示例:

CSS Code复制内容到剪贴板

/* good */  
.box {   
    transition: transform 1s;   
}   
.box:hover {   
    transform: translate(20px); /* move right for 20px */  
}   
/* bad */  
.box {   
    left: 0;   
    transition: left 1s;   
}   
.box:hover {   
    left: 20px; /* move right for 20px */  
}   

6 响应式
[强制] Media Query 如果有多个逗号分隔的条件时,应将每个条件放在单独一行中。
示例:

CSS Code复制内容到剪贴板

@media   
(-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */  
(min–moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */  
(min-resolution: 2dppx),             /* The standard way */  
(min-resolution: 192dpi) {           /* dppx fallback */  
    /* Retina-specific stuff here */  
}  

7.CSS注释
普通注释

CSS Code复制内容到剪贴板

/* 普通注释 */  

区块注释

CSS Code复制内容到剪贴板

/**  
 * 模块:m-detail  
 * author: xxx  
 * edit:   2016.5.02  
 */  

8.CSS命名规范
8.1命名组成
命名必须由单词,中划线组成。例如:.info,.news-list
不推荐使用拼音来作为样式名,尤其是缩写的拼音、拼音与英文的混合
所有命名都使用小写,使用中划线 “-” 作为连接字符,而不是下划线 “_“
8.2命名前缀

前缀说明示例
g-全局通用样式命名g-mod
m-