css/less/scss代码注意事项

一.命名

1.类名使用小写字母,以中划线分割;id 使用 驼峰式命名;

2.less/scss中的函数、混合采用驼峰命名;

  1. 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.复数时,要采用复数结构例:imagesassets等;

十.JS、CSS、SCSS、HTML、PNG等文件命名

全部采用小写的方式以中划线命名

例:home.html /index.less /public.css /login-logo.jpg

未完待续

相关推荐
boy快快长大2 小时前
【CSS】第二天 画盒子、文字控制属性
前端·css
时间sk4 小时前
CSS3——3. 书写格式二
前端·css·css3
GISer_Jing5 小时前
Ant Design中Flex布局、Grid布局和Layout布局详解
前端·css·前端框架·anti-design-vue
qq_4243171812 小时前
html+css+js网页设计 美食 好厨艺西餐美食企业网站模板6个页面
javascript·css·html
疯狂的沙粒14 小时前
如何在 JavaScript 中实现日期格式化?
开发语言·前端·css·node.js
Q_19284999061 天前
基于HTML和CSS的旅游小程序
css·html·旅游
runnerdancer1 天前
纯CSS如何实现只拉伸图片中间区域,类似点9图效果
前端·css·面试
时间sk1 天前
CSS——5. 外部样式
前端·css
xiaohua0708day1 天前
css预处理器sass
前端·css·scss
cwtlw1 天前
CSS学习记录23
前端·css·笔记·学习·css3