当前位置: 首页 > 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

未完待续

相关文章:

css/less/scss代码注意事项

一.命名 1.类名使用小写字母,以中划线分割;id 使用 驼峰式命名; 2.less/scss中的函数、混合采用驼峰命名; 3. class 的命名不要使用 标签名,如.p .div .img; 二.选择器 尽量使用直接子选择器,否则,有时会造成性能损耗 .content .title { .…...

Git应用——代码提交规范 feat ,fix ,style

当前使用 feat 增加新功能fix 修复问题/BUGstyle 代码风格相关无影响运行结果的perf 优化/性能提升refactor 重构revert 撤销修改test 测试相关docs 文档/注释chore 依赖更新/脚手架配置修改等workflow 工作流改进ci 持续集成types 类型定义文件更改wip 开发中 别处看到 fea…...

TDengine Kafka Connector将 Kafka 中指定 topic 的数据(批量或实时)同步到 TDengine

教程放在这里:TDengine Java Connector,官方文档已经写的很清晰了,不再赘述。 这里记录一下踩坑: 1.报错 java.lang.UnsatisfiedLinkError: no taos in java.library.pathat java.lang.ClassLoader.loadLibrary(ClassLoader.j…...

单片机的低功耗模式介绍

文章目录 简介一、功耗来源说明1.1、芯片工作模式1.2、静态损耗1.3、I/O额外损耗1.4、动态损耗 二、功耗如何测量三、降低功耗有什么方法3.1、选取合适的芯片工作模式3.2、降低工作频率3.3、关闭不需要使用的外设3.4、 降低静态电流损耗3.5、 周期采集供电3.6、 设置IO口状态 四…...

基于SSM实现的精品课程网站

一、系统架构 前端:jsp | js | css | jquery | bootstrap 后端:spring | springmvc | mybatis 环境:jdk1.7 | mysql | maven | tomcat 二、代码及数据库 三、功能介绍 01. 登录页 02. web端-首页 03. web端-视频教程 04. web端-资料…...

广州旅游攻略(略说一二)

广州是中国南方的一个重要城市,也是广东省的省会,拥有着悠久的历史和丰富的文化遗产。作为中国最繁华的城市之一,广州吸引了大量的游客前来探索其独特的魅力。今天我将为大家介绍一份广州旅游攻略,希望能帮助各位游客更好地了解这…...

C++STL的list模拟实现

文章目录 前言 list实现push_back迭代器(重点)普通迭代器const迭代器 inserterase析构函数构造函数拷贝构造赋值 vector和list的区别 前言 要实现STL的list, 首先我们还得看一下list的源码。 我们看到这么一个东西,我们知道C兼容C,可以用struct来创建一…...

django--分页功能

Django 提供了强大的分页功能,可以轻松地在视图中实现分页。 在视图中使用分页: # views.py from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger from django.shortcuts import render from .models import YourModeldef your…...

centOS安装bochsXshell连接centos启动可视化界面

centOS安装bochs 参考:https://blog.csdn.net/muzi_since/article/details/102559187 首先安装依赖环境: yum install gtk2 gtk2-devel yum install libXt libXt-devel yum install libXpm libXpm-devel yum install SDL SDL-devel yum install libXr…...

mac m2芯片 安装nginx + php + mysql

1.安装homebrew: 系统本身就有(命令brew -v查看下),如果没有安装一下 /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" 2.安装nginx brew install nginx 3.安装php bre…...

vue axios 使用

使用Vue中的Axios需要先安装axios库,可以通过yarn或npm安装: yarn add axios # 或者 npm install axios --save然后在Vue组件中导入axios并使用: import axios from axios;export default {data() {return {responseData: null,error: null…...

使用docker实现logstash同步mysql到es

准备工作: 1.有mysql的连接方式,并且可以连接成功 2.有es的连接方式,并且可以连接成功 3.安装了docker 环境是Ubuntu中安装了docker 一、创建配置文件,用于容器卷挂载 # 切换目录,可自定义 cd /home/test/ # 创建lo…...

hive数据仓库工具

1、hive是一套操作数据仓库的应用工具,通过这个工具可实现mapreduce的功能 2、hive的语言是hql[hive query language] 3、官网hive.apache.org 下载hive软件包地址 Welcome! - The Apache Software Foundationhttps://archive.apache.org/ 4、hive在管理数据时分为元…...

C语言 联合体验证 主机字节序 +枚举

联合体应用&#xff1a;验证当前主机的大小端&#xff08;字节序&#xff09; //验证当前主机的大小端 #include <stdio.h>union MyData {unsigned int data;struct{unsigned char byte0;unsigned char byte1;unsigned char byte2;unsigned char byte3;}byte; };int main…...

python和pygame实现烟花特效

python和pygame实现烟花特效 新年来临之际&#xff0c;来一个欢庆新年烟花祝贺&#xff0c;需要安装使用第三方库pygame&#xff0c;关于Python中pygame游戏模块的安装使用可见 https://blog.csdn.net/cnds123/article/details/119514520 效果图及源码 先看效果图&#xff1a…...

gRPC-Gateway:高效转换 RESTful 接口 | 开源日报 No.105

grpc-ecosystem/grpc-gateway Stars: 16.4k License: BSD-3-Clause gRPC-Gateway 是一个遵循 gRPC HTTP 规范的 gRPC 到 JSON 代理生成器。它是 Google 协议缓冲编译器 protoc 的插件&#xff0c;可以读取 protobuf 服务定义并生成反向代理服务器&#xff0c;将 RESTful HTTP…...

非专业的建模人员如何给模型设置材质纹理贴图?

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 1、材质和纹理的区别于关联 材质&#xff08;Material&#xff09;是…...

自动化测试、压力测试、持续集成

因为项目的原因&#xff0c;前段时间研究并使用了 SoapUI 测试工具进行自测开发的 api。下面将研究的成果展示给大家&#xff0c;希望对需要的人有所帮助。 SoapUI 是什么&#xff1f; SoapUI 是一个开源测试工具&#xff0c;通过 soap/http 来检查、调用、实现 Web Service …...

FFmpeg之HWContextType

HWContextType算是ffmpeg中为硬解码第三方接口的一个辅助类&#xff0c;它自己有两个辅助子类 AVHWDeviceContext和AVHWFramesContext。 AVHWDeviceContext主要表示硬件上下文 AVHWFramesContext主要表示硬件Frame的一些参数&#xff0c;比如你解码后的YUV数据还在硬件上&#…...

Python面向对象之类和对象(Python系列16)

前言&#xff1a;面向对象是什么&#xff0c;为什么要学面向对象&#xff1f;面向对象是一种思想&#xff0c;让我们的程序变得更加的贴切我们的生活&#xff0c;更加的形象&#xff0c;让代码的可读性和扩展性变得更高。 面向对象&#xff1a;可以使用类将变量和函数组成新的…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...