css/less/scss代码注意事项

一.命名

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

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

全部采用小写的方式以中划线命名
例:home.html /index.less /public.css /login-logo.jpg

未完待续

相关推荐

  1. css/less/scss代码注意事项

    2023-12-14 05:38:05       42 阅读
  2. golang channel实践代码注意事项

    2023-12-14 05:38:05       12 阅读
  3. 数组 注意事项

    2023-12-14 05:38:05       26 阅读
  4. 换房注意事项

    2023-12-14 05:38:05       42 阅读
  5. RWMutex 注意事项

    2023-12-14 05:38:05       33 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-14 05:38:05       14 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-14 05:38:05       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-14 05:38:05       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-14 05:38:05       18 阅读

热门阅读

  1. 数据可视化设计:让数据故事更有说服力

    2023-12-14 05:38:05       34 阅读
  2. http各个状态码含义

    2023-12-14 05:38:05       40 阅读
  3. django--分页功能

    2023-12-14 05:38:05       38 阅读
  4. TS中断言、转换的应用

    2023-12-14 05:38:05       30 阅读
  5. Django之侧边栏抽取(inclusion_tag)

    2023-12-14 05:38:05       36 阅读
  6. Kubernetes集群Pod介绍

    2023-12-14 05:38:05       31 阅读
  7. MySQL_10.MySQL体系架构

    2023-12-14 05:38:05       32 阅读
  8. Windows系统使用wsl执行shell脚本报错解决

    2023-12-14 05:38:05       50 阅读
  9. 在ajax中如何使用jquery循环。

    2023-12-14 05:38:05       38 阅读