当前位置: 首页 > news >正文

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

未完待续

http://www.lryc.cn/news/259303.html

相关文章:

  • Git应用——代码提交规范 feat ,fix ,style
  • TDengine Kafka Connector将 Kafka 中指定 topic 的数据(批量或实时)同步到 TDengine
  • 单片机的低功耗模式介绍
  • 基于SSM实现的精品课程网站
  • 广州旅游攻略(略说一二)
  • C++STL的list模拟实现
  • django--分页功能
  • centOS安装bochsXshell连接centos启动可视化界面
  • mac m2芯片 安装nginx + php + mysql
  • vue axios 使用
  • 使用docker实现logstash同步mysql到es
  • hive数据仓库工具
  • C语言 联合体验证 主机字节序 +枚举
  • python和pygame实现烟花特效
  • gRPC-Gateway:高效转换 RESTful 接口 | 开源日报 No.105
  • 非专业的建模人员如何给模型设置材质纹理贴图?
  • 自动化测试、压力测试、持续集成
  • FFmpeg之HWContextType
  • Python面向对象之类和对象(Python系列16)
  • 电商对传统零售业的影响:销售渠道、价格竞争与服务质量挑战
  • DENet:用于可见水印去除的Disentangled Embedding网络笔记
  • C++初阶(十五)Stack和Queue
  • C#面试题
  • python源码,在线读取传奇列表,并解析为需要的JSON格式
  • 二叉排序树的判断(二叉树的顺序存储):2022年408算法题
  • Kubernetes版本升级到v1.18.0方法
  • 了解 git rebase
  • 程序员的养生之道:延寿健康的十大秘诀(下)
  • 【java】保留前N月数据文件,定期删除数据
  • 12.9_黑马数据结构与算法笔记Java