笔记：前端命名规范

最新推荐文章于 2025-07-16 16:11:48 发布
原创 最新推荐文章于 2025-07-16 16:11:48 发布 · 507 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文介绍了HTML、CSS及JavaScript等前端技术的编码规范，包括标签使用、样式定义与JS命名等，帮助开发者提升代码质量。

HTML：

标签名、属性，需要小写。属性值，用双引号闭合。

id名称，关键词用下划线_连接，class关键词用中划线-连接

如果class名称仅做js调用，无样式，则在名称中加js前缀。


CSS规范

避免class命名重复，取父元素做名称前缀

左｛与css选择器同行

多个选择器，每个选择器单独占一行

样式定义按模块来分组，不同模块之间用空行分割


JS命名规范和格式规范

局部变量 首字母小写，用有意义的单词命名

公有接口首字母 大写，私有接口首字母小写

jquery变量前添加$

左{在行结束位置，非新起一行

字符串，可以用单引号和双引号，为便于区别HTML代码，用单引号更合适

语句结束时，添加一个分号


《Web前端开发最佳实践》


前端领域：Less 与 BEM 命名规范的结合
AI架构全栈开发实战笔记
05-16 931
在现代前端开发中，CSS的可维护性和可扩展性一直是开发者面临的重大挑战。随着项目规模的扩大，传统的CSS编写方式往往会导致样式冲突、命名混乱等问题。本文旨在探讨如何通过将Less预处理器与BEM命名规范相结合，构建一套高效、可维护的样式开发体系。本文首先介绍Less和BEM的基本概念，然后深入分析两者的技术原理和优势。接着，我们将探讨如何将两者结合使用，并提供具体的实现方案和代码示例。最后，我们将讨论这种结合在实际项目中的应用场景和最佳实践。Less。
前端笔记1-vue：路由相关内容
weixin_43915285的博客
11-09 3060
本篇内容要记录vue项目中路由器的工作模式、命名路由、嵌套路由、路由传参、编程式路由和路由重定向等的相关内容。希望能通过记录，累积知识。
学习笔记：命名规范
yipfang的博客
07-23 242
不能以_$开头和结尾 不能数字开头 区分大小写 类名（class）首字母大写，后面每个单词首字母大写（大驼峰） 方法名首字母小写，后面每个单词首字母大写（小驼峰） 变量名全部小写，单词中间可以加_ 常量名全部大写 力求表达清楚，不嫌长！！！ ...
（2）HTML笔记（命名规范）
沭瑾
07-24 202
1、div 标签【division】 划分标签：可以把文档分割为各个独立的，不同的模块。 div标签是非常非常干净，不带任何杂质[margin,padding]的标签 2、css样式 css层叠样式表（Cascading style sheets） 特点：后面的相同的样式会把前面的相同样式给覆盖掉。 3、css样式种类 （1）内嵌样式/内联样式：用一对style标签包裹起来的，style标签里面放...
【笔记】强制命名规范
HoloLens的博客
09-01 1258
MySQL：全小写 Kafka Topic：全小写，中划线分割单词。例如：my-replicated-topic Elasticsearch Index：全小写，下划线分割单词。例如：my_index
JAVA 课本复习笔记（一）基本的命名规范
忆_恒心的博客
06-06 461
今天中午将会完成书写
2021_11_12_自学笔记_命名规范
weixin_38002308的博客
11-12 436
标识符和命名规范 1.标识符由字母，下划线和数字组成，且数字不能开头 2.严格区分大小写 3.不能使用关键字例如 for 等 标识符命名 做到顾名思义 比如名字 就定义为 name 年龄定义为 age 驼峰命名法 小驼峰： myName bigDog 大驼峰： FirstName LastName 下划线式： send_buf 类型转换 int(x) 将x转换成一个整数 适用场景：爬虫获取到的字符串类型，但是想要的是整形的 a = ‘123’ print(type(a)) <class ‘str
docs:前端技术文档规范,笔记,总结,
05-06
在IT行业中，前端技术文档规范、笔记和总结是开发者日常工作中不可或缺的部分，它们对团队协作、项目维护和知识传承起到至关重要的作用。本篇将详细探讨这些知识点。 首先，前端技术文档规范是确保代码可读性和团队...
渡一线上笔记：前端学习与技术总结
更进一步，可能还会介绍CSS预处理器（如Sass/SCSS）、CSS模块化方案、BEM命名规范、动画实现（transition、animation）以及CSS-in-JS等前沿实践，体现对工程化与维护性的重视。 JavaScript作为前端最核心的编程语言...
JQuery笔记：前端开发核心技术总结
同时，良好的命名规范和模块化结构使插件易于集成与维护。 最后，尽管近年来随着原生 JavaScript（ES6+）能力的增强以及 React、Vue 等现代框架的兴起，jQuery 的使用频率有所下降，但在维护遗留项目、快速原型开发...
【前端】CSS类命名规范指南
最新发布
qq_45974648的博客
07-16 828
CSS 命名规范提升项目可维护性，主流方法包括BEM（Block__Element--Modifier）、SMACSS（五层架构）和SUITCSS（PascalCase命名）。核心原则是语义化命名、一致性、连字符分隔和命名空间。最佳实践建议使用连接符、避免嵌套、合理缩写，大型项目推荐CSS Modules结合SMACSS。数据显示规范命名可减少35%样式冲突，提升50%可读性，降低40%维护成本。中小项目适合BEM+状态类命名方式。
【前端】 命名规范规则梳理
耶稣与梦的博客
04-17 728
1.class类标识符 大驼峰写法(upper camel case) 示例： DefaultClass2.变量以及函数标识符 小驼峰写法(lower camel case) 示例：defaultClass3.常量标识符 全部大写来命 示例：DEFAULT4.方法函数名称尽量用动词去描述 比如getList、 toLoginRoute示例： 5.判断状态的变量用可以用 isTrue、 isLoading isDialogLoading6.用拼音前缀描述的变量一定要加上注释,其他变量名也应注明注释
html前端命名规则
热门推荐
Green的博客
11-18 3万+
前端布局规范细则 一、命名规范： 1、基本要求：1）文件编码统一使用 UTF-8 编码； 2）命名时以符合语义为主要参考指标，CSS属性书写规范，采用统一风格及命名方法； 3）结构清晰，层级关系明朗，以不超过三级为标准； 4）同一表现形式的样式要求可重复利用，模块组件类的样式要求可整体外部移植； 5）编写 CSS 的时候，应当避免使用CSS Hack，能不用则不用。 6）所有
前端命名规范
yjreset的博客
10-25 329
HTML,CSS,JS命名规范
class命名及前端部分规范【解决命名的疑问】
qq_42961150的博客
09-08 8623
常见的class命名 布局类：header, footer, container, main, content, aside, page, section 包裹类：wrap, inner 区块类：region, block, box 结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span 列表类：list, item, field 主次类：primary, secondary, sub, minor 大小类：s, m,
前端小知识点--class命名规范
weixin_34268310的博客
03-17 911
文／饥人谷_韩宝亿（简书作者）原文链接：http://www.jianshu.com/p/eebed7f038bc著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。 今天在写页面的时候，发现class="1212-sale"开头的样式无法调用，后来大群里有同学说class样式不能以数字的开头。试了一下果然是的！ 为了避免犯同样的错误，我上网查了一下css命名规范。整理了一下...
前端常用class类名，命名规范 ---kalrry
kalrry
12-12 4831
前端常用class类名---命名规范 ---kalrry 头部：header 栏目标题：title 内容：content、container 版权：copyright 搜索：search 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 导航：nav 子导航：subnav 菜单：menu 子菜单：submenu 滚动：scroll 友情链接：friendlink 侧栏：sidebar 栏目：column 页面外围控制整体宽度：wrapper 左右中：left、right、center
class命名（及前端命名）
Roninwz的博客
04-17 2万+
常见class关键词：布局类：header, footer, container, main, content, aside, page, section包裹类：wrap, inner区块类：region, block, box结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span列表类：list, item, ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值