一.命名
1.类名使用小写字母,以中划线分割;id 使用 驼峰式命名;
2.less/scss中的函数、混合采用驼峰命名;
3. class 的命名不要使用 标签名,如.p
.div
.img
;
二.选择器
尽量使用直接子选择器,否则,有时会造成性能损耗.content .title { ... }
(不推荐)(后代选择器).content > .title { ... }
(推荐)(子选择器)
三.尽量使用缩写的属性
border-style: solid;
border-width: 1px;
border-color: red;`
写成
border: 1px solid red;
四.每个选择器及属性独占一行
不推荐下面的这种写法
img { width: 100%;box-shadow: 3px 3px 3px 3px #333;}
五.省略 0 后面的单位
width: 0;
height: 0;
border-width: 0;
六.避免使用 ID 选择器及 全局标签污染全局样式
能不用 id选择器 就不要 使用id选择器,避免不是禁止
七、less/scss 避免嵌套等级过多,将嵌套深度限制在3层以内
八.项目命名
1.全部采用小写的方式
2.以中划线分割
例:smart-cellphone
九.目录命名
1.全部采用小写的方式
2.以中划线命名
3.复数时,要采用复数结构例:images
、assets
等;文章来源:https://www.toymoban.com/news/detail-759505.html
十.JS、CSS、SCSS、HTML、PNG等文件命名
全部采用小写的方式以中划线命名
例:home.html
/index.less
/public.css
/login-logo.jpg
等文章来源地址https://www.toymoban.com/news/detail-759505.html
未完待续
到了这里,关于css/less/scss代码注意事项的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!