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

亿坊软件前端命名规范

news 来源：原创 2025/6/1 6:35:50

在前端开发中，文件命名的重要性不言而喻。由于历史原因和个人习惯，不同的开发者在命名DOM结构、图片和CSS文件时，可能会产生不一致的情况。这不仅会导致维护成本增加，还会降低团队协作效率。因此，制定一套统一的命名规范至关重要！
目录命名
首先，目录的命名要清晰、简洁。通常，我们会按照业务模块来划分目录，例如“products”、“users”等。这样不仅方便管理，还能快速定位到相应的文件。
图片命名
图片的命名同样重要。建议按照一定的顺序来命名，例如“product_1.jpg”、“product_2.jpg”，这样可以避免混乱。另外，如果图片涉及到不同的业务模块，可以在命名中加入相应的标识，例如“users_avatar.jpg”。
HTML/CSS文件命名
对于HTML和CSS文件，命名要遵循一定的规则。HTML文件通常以“.html”结尾，而CSS文件则以“.css”结尾。在命名时，可以按照业务模块来划分，例如“products.html”、“users.css”。
ClassName命名
最后，ClassName的命名也是关键。建议使用有意义的命名，避免使用过于简单或模糊的名称。例如，可以使用“product-name”来代替“p-name”，这样更有助于代码的可读性和维护性。

目录命名：
样式文件夹：css
脚本文件夹：js
样式类图片文件夹：img
图片命名：
图片命名建议以下顺序命名
图片业务（可选）+ （mod_）图片功能类别（必选） + 图片模块名称（可选）+ 图片精度（可选）
图片功能类别：
mod_：是否公共，可选
icon：模块类固化的图标
logo：LOGO类
spr：但页面各种元素合并集合
btn：按钮
bg：可平铺或者大背景

ClassName含义
关于about
about关于
页头header
登录条loginbar
标志logo
侧栏sidebar
广告banner
导航nav
子导航subnav
菜单menu
子菜单submenu
搜索search
滚动scroll
页面主体warpper
内容content
标签页tab
文章列表list
提示信息msg
小技巧tips
栏目标题title
服务service
热点hot
新闻news
下载download
注册regsiter
状态status
按钮btn
投票vote
友情链接link
页脚footer
版权copyright
会员卡card
头像face
登陆login

另外在编辑样式表时可用的注释可这样写：
<– Footer –>
内容区
<– End Footer –>
3.样式文件命名
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

相关文章：

亿坊软件前端命名规范

在前端开发中&#xff0c;文件命名的重要性不言而喻。由于历史原因和个人习惯&#xff0c;不同的开发者在命名DOM结构、图片和CSS文件时&#xff0c;可能会产生不一致的情况。这不仅会导致维护成本增加&#xff0c;还会降低团队协作效率。因此&#xff0c;制定一套统一的命名规…...

编程日记 2025/6/1 6:35:50

单片机-STM32 IIC通信（OLED屏幕）(十一)

一、屏幕的分类 1、LED屏幕&#xff1a; 由无数个发光的LED灯珠按照一定的顺序排列而成&#xff0c;当需要显示内容的时候&#xff0c;点亮相关的LED灯即可&#xff0c;市场占有率很高&#xff0c;主要是用于户外&#xff0c;广告屏幕&#xff0c;成本低。 LED屏是一种用发光…...

编程日记 2025/6/1 5:48:12

【Qt】: QPointer详解

考古&#xff1a; 《Qt智能指针之QScopedPointer》 QPointer是Qt框架中的一个智能指针类&#xff0c;用于安全地管理QObject派生对象的指针。它的主要功能是自动将指针置为nullptr&#xff0c;当它所指向的QObject对象被销毁时。这在Qt应用程序中非常有用&#xff0c;因为QObj…...

编程日记 2025/5/28 13:20:47

15_业务系统基类

创建脚本 SystemRoot.cs 因为 业务系统基类的子类 会涉及资源加载服务层ResSvc.cs 和 音乐播放服务层AudioSvc.cs 所以在业务系统基类 提取引用资源加载服务层ResSvc.cs 和 音乐播放服务层AudioSvc.cs 并调用单例初始化 using UnityEngine; // 功能 : 业务系统基类 public c…...

编程日记 2025/5/27 7:24:51

C++中explicit关键字的介绍和使用详解

某一天突然发现Qt自动生成的类文件的构造函数前边都有explicit关键字&#xff0c;但是explicit关键字什么意思呐&#xff1f; 在C中&#xff0c;explicit是一个关键字&#xff0c;主要用于修饰构造函数或转换运算符&#xff0c;其作用是防止隐式类型转换或隐式构造行为。 下面…...

编程日记 2025/5/29 11:43:33

动态内存管理

本章重点 1.为什么存在动态内存分配 2.动态内存函数的介绍 3.malloc free calloc realloc 4.常见的动态内存错误 一.为什么存在动态内存分配 二.动态内存函数的介绍 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include &…...

编程日记 2025/5/31 7:58:27

Java 中的各种锁详解

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…...

编程日记 2025/5/26 10:46:10

进制之间转换

「 一、十进制 二进制 」 1.十进制转二进制&#xff1a;一直除以2直到商为0&#xff0c;再反向取余数。 例&#xff1a;13&#xff08;十进制&#xff09;转1101&#xff08;二进制&#xff09; 2.二进制转十进制:最后一位数开始是2^0&#xff0c;然后一直按照指数递增的方式…...

编程日记 2025/5/30 23:51:08

微信小程序获取位置服务

wx.getLocation({type: gcj02,success(res) {wx.log(定位成功);},fail(err) {wx.log(定位失败, err);wx.showModal({content: 请打开手机和小程序中的定位服务,success: (modRes) > {if (modRes.confirm) {wx.openSetting({success(setRes) {if (setRes.authSetting[scope.u…...

编程日记 2025/6/1 2:48:26

数据结构——实验八·学生管理系统

嗨~~欢迎来到Tubishu的博客&#x1f338;如果你也是一名在校大学生&#xff0c;正在寻找各种编程资源&#xff0c;那么你就来对地方啦&#x1f31f; Tubishu是一名计算机本科生&#xff0c;会不定期整理和分享学习中的优质资源&#xff0c;希望能为你的编程之路添砖加瓦⭐&…...

编程日记 2025/5/28 6:32:59

Linux应用编程（五）USB应用开发-libusb库

一、基础知识 1. USB接口是什么&#xff1f; USB接口&#xff08;Universal Serial Bus&#xff09;是一种通用串行总线&#xff0c;广泛使用的接口标准&#xff0c;主要用于连接计算机与外围设备&#xff08;如键盘、鼠标、打印机、存储设备等&#xff09;之间的数据传输和电…...

编程日记 2025/5/29 21:38:12

Swift语言探索：Sequence与Collection的详细解读

在Swift编程语言中&#xff0c;Sequence和Collection是两个非常重要的协议&#xff0c;它们定义了遍历和访问元素集合的方式。理解这两个协议不仅有助于我们更好地掌握Swift的集合类型&#xff0c;还能让我们在编写代码时更加灵活和高效。本文将详细解读Sequence与Collection&a…...

编程日记 2025/5/27 8:23:14

解锁C# EF/EF Core：从入门到进阶的技术飞跃

一、EF/EF Core 初相识 在.NET 开发的广阔天地中&#xff0c;Entity Framework (EF) 及其轻量级、可扩展、跨平台的版本 Entity Framework Core (EF Core)&#xff0c;犹如两颗璀璨的明星&#xff0c;照亮了数据访问层开发的道路。它们是开源的对象关系映射器&#xff08;ORM&…...

编程日记 2025/5/31 3:19:10

大模型搜广推？对算法工作的影响

大模型与传统应用结合的性质 长期看是一种范式革新。算力和模型定义的边界发生变化&#xff0c;选择生成式AI或大模型发展方向时&#xff0c;会不断发现新的增长曲线&#xff0c;目前在不断被验证。 现阶段大模型确实带来了增量信息&#xff0c;但推荐过程仍在原有流程基础上…...

编程日记 2025/5/28 6:03:53

【教程】最好的pytorch教程

文章目录 Materials for the Learn PyTorch for Deep Learning: Zero to Mastery course from: https://github.com/mrdbourke/pytorch-deep-learning/blob/main/01_pytorch_workflow.ipynb...

编程日记 2025/5/31 4:11:27

基于java线程池和EasyExcel实现异步导出

基于java线程池和EasyExcel实现异步导出 1.controller层 GetMapping("export") public void exportExcel(HttpServletResponse response) throws IOException, InterruptedException {exportService.exportExcel(response); }2. service public void exportExcel(H…...

编程日记 2025/5/26 23:41:04

vue3组件传值具体使用

问&#xff1a; left.vue文件调用接口获取了后端返回的urlLink字段&#xff0c;我该怎么传递给总的父组件index.vue中&#xff0c;我需要点击父组件的一个按钮来触发跳转&#xff1f; 回答&#xff1a; 在 Vue 3 中使用 TypeScript 和 setup 语法糖时&#xff0c;可以通过 e…...

编程日记 2025/5/28 10:01:52

《CPython Internals》阅读笔记：p336-p352

《CPython Internals》学习第 17天&#xff0c;p336-p352 总结&#xff0c;总计 17 页。 一、技术总结 1.GDB GDB 是 GNU Dbugger 的缩写。 (1)安装 sudo apt install gdb(2)创建 .gdbinit 文件 touch ~/.gdbinitvim ~/.gdbinit(3)配置 .gdbinit 文件 add-auto-load-saf…...

编程日记 2025/5/27 23:36:19

WPF基础 | WPF 常用控件实战：Button、TextBox 等的基础应用

WPF基础 | WPF 常用控件实战&#xff1a;Button、TextBox 等的基础应用 一、前言二、Button 控件基础2.1 Button 的基本定义与显示2.2 按钮样式设置2.3 按钮大小与布局 三、Button 的交互功能3.1 点击事件处理3.2 鼠标悬停与离开效果3.3 按钮禁用与启用 四、TextBox 控件基础4.…...

编程日记 2025/5/25 19:17:37

Langchain+讯飞星火大模型Spark Max调用

1、安装langchain #安装langchain环境 pip install langchain0.3.3 openai -i https://mirrors.aliyun.com/pypi/simple #灵积模型服务 pip install dashscope -i https://mirrors.aliyun.com/pypi/simple #安装第三方集成,就是各种大语言模型 pip install langchain-comm…...

编程日记 2025/5/31 16:20:49

2025年华为云一键快速部署幻兽帕鲁联机服务器教程

华为云如何快速部署幻兽帕鲁联机服务器&#xff1f;为了方便新手玩家搭建专属游戏联机服务器&#xff0c;华为云推出了云游戏专场&#xff0c;无需专业技术&#xff0c;新手小白也能一键快速部署幻兽帕鲁联机服务器&#xff01; 华为云快速部署幻兽帕鲁联机服务器教程如下&…...

编程日记 2025/5/31 7:17:34

Langchain+文心一言调用

import osfrom langchain_community.llms import QianfanLLMEndpointos.environ["QIANFAN_AK"] "" os.environ["QIANFAN_SK"] ""llm_wenxin QianfanLLMEndpoint()res llm_wenxin.invoke("中国国庆日是哪一天?") print(…...

编程日记 2025/5/29 17:48:54

C++AVL树（一）详解

文章目录 AVL树概念AVL树的插入平衡因子的更新旋转的规则左单旋右单旋抽象的情况h0h1h 2h 3 AVL树 概念 AVL树是一棵平衡二叉查找树&#xff0c;AVL树是空树&#xff0c;保证左右子树都是AVL树&#xff0c;AVL树要求高度差的绝对值不超过1&#xff0c;因为最好情况是1&#…...

编程日记 2025/5/27 4:02:02

ceph新增节点，OSD设备，标签管理（二）

一、访问客户端集群方式 方式一: 使用cephadm shell交互式配置 [rootceph141 ~]# cephadm shell # 注意&#xff0c;此命令会启动一个新的容器&#xff0c;运行玩后会退出&#xff01; Inferring fsid c153209c-d8a0-11ef-a0ed-bdb84668ed01 Inferring config /var/lib/ce…...

编程日记 2025/5/30 8:03:19

c++学习第七天

创作过程中难免有不足&#xff0c;若您发现本文内容有误&#xff0c;恳请不吝赐教。 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考。 一、const成员函数 //Date.h#pragma once#include<iostream> using namespace std;class Date { public:Date…...

编程日记 2025/5/31 8:36:33

F/V/F/I频率脉冲信号转换器

F/V/F/I频率脉冲信号转换器 概述&#xff1a;捷晟达科技的JSD TFA-1001系列是一进一出频率脉冲信号转换器(F/V转换器),该频率转换器是将频率脉冲信号(方波、正弦波、锯齿波)转换成国际标准的模拟量电压(电流)信号,并远距离无失真传送到控制室(如:PLC,DCS,AD,PC采集系统)产品的输…...

编程日记 2025/5/30 20:31:26

SQLServer中DBCC INPUTBUFFER显示从客户端发送到 SQL Server 实例的最后一个语句

SQLServer中DBCC INPUTBUFFER显示从客户端发送到 SQL Server 实例的最后一个语句 1、本文内容 语法参数结果集权限示例 适用于&#xff1a; SQL ServerAzure SQL 数据库Azure SQL 托管实例 显示从客户端发送到 SQL Server 实例的最后一个语句。 2、语法 DBCC INPUTBUFFE…...

编程日记 2025/5/31 11:44:16

Mysql面试题----MySQL中CHAR和VARCHAR的区别

存储方式 CHAR&#xff1a;是一种固定长度的字符串类型。它会按照定义的长度来分配存储空间&#xff0c;无论实际存储的字符串长度是多少。例如&#xff0c;定义一个 CHAR (10) 的列&#xff0c;如果存储的值是 ‘ab’&#xff0c;那么它仍然会占用 10 个字符的存储空间&#…...

编程日记 2025/5/28 19:38:59

github汉化

本文主要讲述了github如何汉化的方法。 目录 问题描述汉化步骤1.打开github&#xff0c;搜索github-chinese2.打开项目&#xff0c;打开README.md3.下载安装脚本管理器3.1 在README.md中往下滑动&#xff0c;找到浏览器与脚本管理器3.2 选择浏览器对应的脚本管理器3.2.1 点击去…...

编程日记 2025/5/29 21:38:51

探索JavaScript前端开发：开启交互之门的神奇钥匙（二）

目录 引言 四、事件处理 4.1 事件类型 4.2 事件监听器 五、实战案例&#xff1a;打造简易待办事项列表 5.1 HTML 结构搭建 5.2 JavaScript 功能实现 六、进阶拓展&#xff1a;异步编程与 Ajax 6.1 异步编程概念 6.2 Ajax 原理与使用 七、前沿框架&#xff1a;Vue.js …...

编程日记 2025/5/29 10:17:44

什么是网络爬虫？Python爬虫到底怎么学？

最近我在研究 Python 网络爬虫&#xff0c;发现这玩意儿真是有趣&#xff0c;干脆和大家聊聊我的心得吧&#xff01;咱们都知道&#xff0c;网络上的信息多得就像大海里的水&#xff0c;而网络爬虫就像一个勤劳的小矿工&#xff0c;能帮我们从这片浩瀚的信息海洋中挖掘出需要的…...

编程日记 2025/5/29 17:11:04

React 中hooks之 React.memo 和 useMemo用法总结

1. React.memo 基础 React.memo 是一个高阶组件&#xff08;HOC&#xff09;&#xff0c;用于优化函数组件的性能&#xff0c;通过记忆组件渲染结果来避免不必要的重新渲染。 1.1 基本用法 const MemoizedComponent React.memo(function MyComponent(props) {/* 渲染逻辑 *…...

编程日记 2025/5/31 5:47:05

springboot基于微信小程序的手机银行系统

Spring Boot基于微信小程序的手机银行系统是一种结合现代Web技术和移动应用优势的创新金融服务平台。 一、系统背景与意义 随着信息技术的快速发展和用户对便捷金融服务需求的日益增长&#xff0c;传统手机银行系统的人工管理方法已逐渐显露出效率低下、安全性低以及信息传输…...

编程日记 2025/5/31 10:33:23

Kafka后台启动命令

#保存日志 nohup ./kafka-server-start.sh ../config/server.properties > /path/to/logfile.log 2>&1 &#不保存日志 nohup ./kafka-server-start.sh ../config/server.properties >/dev/null 2>&1 & nohup: 是一个Unix/Linux命令&#xff0c;用于…...

编程日记 2025/6/1 1:16:42

面试题目1

文章目录 C语言函数调用详细过程C语言中const与C中const的区别关系运算符有哪些互斥锁与读写锁的区别gcc的编译过程 C语言函数调用详细过程 调用函数&#xff1a;当程序执行到函数调用语句时&#xff0c;会将当前函数的返回地址、参数列表等信息压入栈中&#xff0c;然后跳转到…...

编程日记 2025/5/31 2:24:57

Android AutoMotive --CarService

1、AAOS概述 Android AutoMotive OS是谷歌针对车机使用场景打造的操作系统&#xff0c;它是基于现有Android系统的基础上增加了新特性&#xff0c;最主要的就是增加了CarService&#xff08;汽车服务&#xff09;模块。我们很容易把Android AutoMotive和Android Auto搞混&…...

编程日记 2025/5/31 10:24:59

CSDN 博客之星 2024：默语的技术进阶与社区耕耘之旅

CSDN 博客之星 2024&#xff1a;默语的技术进阶与社区耕耘之旅 &#x1f31f; 默语&#xff0c;是一位在技术分享与社区建设中坚持深耕的博客作者。今年&#xff0c;我有幸再次入围成为 CSDN 博客之星TOP300 的一员&#xff0c;这既是对过往努力的肯定&#xff0c;也是对未来探…...

编程日记 2025/5/30 21:48:31

【Vim Masterclass 笔记24】S10L43 + L44：同步练习10 —— 基于 Vim 缓冲区的各类基础操作练习（含点评课）

文章目录 S10L43 Exercise 12 - Vim Buffers1 训练目标2 操作指令2.1. 打开 buf* 文件2.2. 查看缓冲区 View the buffers2.3. 切换缓冲区 Switch buffers2.4. 同时编辑多个缓冲区 Edit multiple buffers at once2.5. 缓冲区的增删操作 Add and delete buffers2.6. 练习 Vim 内置…...

编程日记 2025/5/28 22:42:16

python如何使得pdf加水印后的大小尽可能小

在 Python 中为 PDF 添加水印并尽可能减少文件大小&#xff0c;可以采取以下优化策略&#xff1a; 1. 使用合适的库 常用的 PDF 处理库&#xff1a; PyMuPDF&#xff08;fitz&#xff09;&#xff1a;高效且优化的 PDF 处理reportlab pdfrw&#xff1a;可实现水印合并&#…...

编程日记 2025/5/30 4:27:25

Leetcode 3429. Paint House IV

Leetcode 3429. Paint House IV 1. 解题思路2. 代码实现 题目链接&#xff1a;3429. Paint House IV 1. 解题思路 这一题解法上就是一个动态规划的思路&#xff0c;由于题目有两个限制条件&#xff0c;即相邻不可以同色&#xff0c;以及前后同位置不可以同色&#xff0c;因此…...

编程日记 2025/5/31 1:52:02

ASP.NET Core 实战：JWT 身份验证

一、引言 在当今数字化时代&#xff0c;Web 应用的安全性至关重要。ASP.NET Core 作为一种广泛应用的开发框架&#xff0c;为开发者提供了强大的工具来构建安全可靠的应用程序。而 JWT&#xff08;JSON Web Token&#xff09;身份验证则是保障应用安全的关键环节之一。 JWT 身…...

编程日记 2025/5/27 7:07:53

【学习笔记15】如何在非root服务器中，安装属于自己的redis

一、下载安装包 官网下载黑马程序员给的安装包&#xff08;redis-6.2.6&#xff09; 二、将安装包上传至服务器 我将安装包上传在我的文件夹/home/XXX&#xff0c;指定路径中/src/local/redis/&#xff0c;绝对路径为/home/XXX/src/local/redis/解压安装包 XXXomega:~$ cd …...

编程日记 2025/5/29 11:24:15

基于深度学习的微出血自动检测及解剖尺度定位|文献速递-视觉大模型医疗图像应用

Title 题目 Toward automated detection of microbleeds with anatomical scale localization using deep learning 基于深度学习的微出血自动检测及解剖尺度定位 01 文献速递介绍 基于深度学习的脑微出血&#xff08;CMBs&#xff09;检测与解剖定位 脑微出血&#xff…...

编程日记 2025/5/29 13:12:45

Couchbase UI: Dashboard

以下是 Couchbase UI Dashboard 页面详细介绍&#xff0c;包括页面布局和功能说明&#xff0c;帮助你更好地理解和使用。 1. 首页&#xff08;Overview&#xff09; 功能&#xff1a;提供集群的整体健康状态和性能摘要 集群状态 节点健康状况&#xff1a;绿色&#xff08;正…...

编程日记 2025/5/29 10:07:55

Python

1 变量 1.1 定义 变量&#xff1a;为快速定义目标&#xff0c;将数据在内存占据的存储空间分配的一个名称。 定义&#xff1a;变量名 数据值 作用&#xff1a;临时存储数据 message "hello" print(message)#输出&#xff1a;hello message "hello Pytho…...

编程日记 2025/5/30 1:48:08

一个软件分发和下载的网站源码，带多套模板

PHP游戏应用市场APP软件下载平台网站源码手机版 可自行打包APP&#xff0c;带下载统计&#xff0c;带多套模板&#xff0c;带图文教程 代码下载&#xff1a;百度网盘...

编程日记 2025/5/29 17:52:54

war包 | Docker部署flowable-ui

文章目录 引言I war包部署flowable-ui下载war包配置Tomcat访问 flowable-uiII Docker启动flowable-ui并修改配置Docker启动flowable-ui修改配置访问Flowable UI界面。III 知识扩展加速源docker run -i -t -d 参数引言 Flowable 支持 BPMN 2.0 行业标准，同时提供了一些 Flowab…...

编程日记 2025/5/31 10:50:55

07_游戏加载窗口

隐藏动态提示窗口 创建空节点 命名为 LoadingWnd 意为加载窗口 并设置全屏 在子级下创建Image作为加载背景 也设置成全屏 将以下资源放进Art文件夹中 设置好精灵模式后拖拽至 Image的Source Image框选 创建文本作为提示内容 增加描边组件OutLine可以美化字体 创建Image作为加载…...

编程日记 2025/5/30 6:16:37

proxyman抓包Java中feign请求以及断点请求响应内容修改或流转到本地

proxyman抓包Java中feign请求以及断点请求响应内容修改或流转到本地 配置流程第一步: 借助arthas配置请求代理第二步: 借助proxyman配置远程映射第三步: 借助SwitchHosts配置hosts域名最后: 借助ssh的LocalForward功能, 打通网络(这步网络不通才需要) 最近在修bug的过程中, 因为…...

编程日记 2025/5/31 13:45:35

PyTorch使用教程(10)-torchinfo.summary网络结构可视化详细说明

1、基本介绍 torchinfo是一个为PyTorch用户量身定做的开源工具&#xff0c;其核心功能之一是summary函数。这个函数旨在简化模型的开发与调试流程&#xff0c;让模型架构一目了然。通过torchinfo的summary函数&#xff0c;用户可以快速获取模型的详细结构和统计信息&#xff0…...

编程日记 2025/5/30 17:57:16