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.mzph.cn/news/220736.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Spark精讲】Spark存储原理

目录 类比HDFS的存储架构 Spark的存储架构 存储级别 RDD的持久化机制 RDD缓存的过程 Block淘汰和落盘 类比HDFS的存储架构 HDFS集群有两类节点以管理节点-工作节点模式运行,即一个NameNode(管理节点)和多个DataNode(工作节点)。 Namenode管理文件系统的命名空…

JFlash烧写单片机bin/hex文件

1,安装压 JLink_Windows_V660c,官网可下载; 2,打开刚刚安装的 J-Flash V6.60c 选择创建新工程“Create a new project”,然后点击StartJ-Flash 点击之后跳出Select device框,选择TI 选择TI后&#xff0c…

TypeScript入门实战笔记 -- 04 什么是字面量类型、类型推断、类型拓宽和类型缩小?

🍍开发环境 1:使用vscode 新建一个 04.Literal.ts 文件,运行下列示例。 2:执行 tsc 04.Literal.ts --strict --alwaysStrict false --watch 3:安装nodemon( 全局安装npm install -g nodemon ) 检测.js文件变化重启项…

谈谈数据归一化与标准化

背景: 归一化(Normalization)和标准化(Standardization)是常用的数据预处理技术,用于将不同范围或不同单位的特征值转换为统一的尺度,以便更好地进行数据分析和模型训练。一句话:消…

Go EASY游戏框架 之 RPC Guide 03

1 Overview easy解决服务端通信问题,同样使用了RPC技术。easy使用的ETCDGRPC,直接将它们打包组合在了一起。随着服务发现的成熟,稳定,简单,若是不用,甚至你也并不需要RPC来分解你的架构。 GRPC 有默认res…

银河麒麟重置密码

桌面版银河麒麟重置密码 1.选择界面按e 出现银河麒麟系统选择的页面,我们点击键盘上的“e”键,进入电脑启动项编辑页 2.编辑启动页 在启动项编辑页面,我们将光标移动到linux这一行的最后,然后输入“init/bin/bash consoletty0”…

给一个容器添加el-popover/el-tooltip内容提示框

效果&#xff1a; html: <div class"evaluate"><div class"list flex-column-center" v-for"(item, index) in evaluateList" :key"index"mouseenter"mouseenterHandler(item)" mouseleave"mouseleaveHandle…

【Vue第5章】vuex_Vue2

目录 5.1 理解vuex 5.1.1 vuex是什么 5.1.2 什么时候使用vuex 5.1.3 案例 5.1.4 vuex工作原理图 5.2 vuex核心概念和API 5.2.1 state 5.2.2 actions 5.2.3 mutations 5.2.4 getters 5.2.5 modules 5.3 笔记与代码 5.3.1 笔记 5.3.2 23_src_求和案例_纯vue版 5.3…

什么是跨站脚本攻击(XSS)?如何防止它?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

【面试】数据库—优化—聚簇索引和非聚簇索引、回表查询

数据库—优化—聚簇索引和非聚簇索引、回表查询 1. 什么是聚簇索引什么是非聚簇索引 ? 聚集索引选取规则: 如果存在主键&#xff0c;主键索引就是聚集索引&#xff1b;如果不存在主键&#xff0c;将使用第一个唯一&#xff08;UNIQUE&#xff09;索引作为聚集索引&#xff1b…

【移动通讯】【MIMO】[P1]【科普篇】

前言&#xff1a; 前面几个月把CA 的技术总体复盘了一下,下面一段时间 主要结合各国一些MIMO 技术的文档,复盘一下MIMO. 这篇主要参考华为&#xff1a; info.support.huawei.com MIMO 技术使用多天线发送和接受信号。主要应用在WIFI 手机通讯等领域. 这种技术提高了系统容量&…

python 内存泄露

Python的内存泄漏问题主要是由于以下几个原因导致的&#xff1a; 循环引用&#xff1a;当两个或多个对象相互引用&#xff0c;并且没有其他引用指向这些对象时&#xff0c;即使这些对象不再被使用&#xff0c;Python也无法释放它们的内存空间&#xff0c;从而造成内存泄漏。大…

MySQL和Redis有什么区别?

目录 一、什么是MySQL 二、什么是Redis 三、MySQL和Redis的区别 一、什么是MySQL MySQL是一种开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;它是最流行的数据库之一。MySQL以其高性能、可靠性和易用性而闻名&#xff0c;广泛应用于各种Web应用程序…

ACM-MM2023 DITN详解:一个部署友好的超分Transformer

目录 1. Introduction2. Method2.1. Overview2.2. UFONE2.3 真实场景下的部署优化 3. 结果 Paper: Unfolding Once is Enough: A Deployment-Friendly Transformer Unit for Super-Resolution Code: https://github.com/yongliuy/DITN 1. Introduction CNN做超分的缺点 由于卷…

Leetcode—709.转换成小写字母【简单】

2023每日刷题&#xff08;五十八&#xff09; Leetcode—709.转换成小写字母 实现代码 char* toLowerCase(char* s) {int len strlen(s);for(int i 0; i < len; i) {if(s[i] > A && s[i] < Z) {s[i] tolower(s[i]);}}return s; }运行结果 之后我会持续更…

第20节: Vue3 计算属性

在UniApp中使用Vue3框架时&#xff0c;你可以使用计算属性来处理一些依赖其他属性的计算逻辑。计算属性会根据依赖属性的变化自动重新计算&#xff0c;并且只会在相关依赖发生改变时触发重新渲染。 下面是一个示例&#xff0c;演示了如何在UniApp中使用Vue3框架使用计算属性&a…

java全栈体系结构-架构师之路(持续更新中)

Java 全栈体系结构 数据结构与算法实战&#xff08;已更&#xff09;微服务解决方案数据结构模型(openresty/tengine)实战高并发JVM虚拟机实战性能调优并发编程实战微服务框架源码解读集合框架源码解读分布式架构解决方案分布式消息中间件原理设计模式JavaWebJavaSE新零售电商项…

(04730)半导体器件之晶体三极管

晶体三极管的结构和分类 晶体三极管具有三个区、两个PN结&#xff0c;从三个区分别引出三个电极而构成&#xff0c;其结构和符号如图2.1.13所示。 晶体三极管内部的三个区&#xff0c;分别称为发射区、基区和集电区&#xff0c;其中基区十分薄&#xff0c;一般为1um至几十um,掺…

单日30PB量级!火山引擎ByteHouse云原生的数据导入这么做

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 近期&#xff0c;火山引擎ByteHouse技术专家受邀参加DataFunCon2023&#xff08;深圳站&#xff09;活动&#xff0c;并以“火山引擎ByteHouse基于云原生架构的实时…

【面试】在Python中如何实现单例模式

点评&#xff1a;单例模式是指让一个类只能创建出唯一的实例&#xff0c;这个题目在面试中出现的频率极高&#xff0c;因为它考察的不仅仅是单例模式&#xff0c;更是对Python语言到底掌握到何种程度&#xff0c;建议大家用装饰器和元类这两种方式来实现单例模式&#xff0c;因…