开发过程中应该遵守哪些编码规范和class命名规范？

2024-05-13 04:14:40

这里是修真院前端小课堂，每篇分享文从【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】八个方面深度解析前端知识/技能。

本篇分享的是：开发过程中应该遵守哪些编码规范和class命名规范？

开场语：

大家好，我是IT修真院广州分院前端王熠华，一枚正直纯洁善良的前端程序员。

今天给大家分享一下，修真院CSS任务12，深度思考中的知识点：

开发过程中应该遵守哪些编码规范和class命名规范？

（1）背景介绍：

你是否常常碰到以下问题：你总是看不懂他写的代码，或者读起来很吃力；

你需要改他的代码却无从下手，或总是要去问他这里是什么改了会不会影响其他代码；

你和他一起开发一个产品，你总是怕代码和他有冲突或互相影响；

你的代码在多次维护任务之后变得越来越臃肿，越来越难以维护。

解决以上问题只需一种方法——读我们的规范！

（2）知识剖析：

2.1.HTML规范 - 整体结构

2.2.CSS规范 - 分类方法

2.3.CSS规范 - 命名规则

2.4.CSS规范 - 代码格式

2.5.CSS规范 - 统一语义理解和命名

（3）常见问题：

.g-xxx .class{}

不要在页面布局中使用后代选择器，因为这个后代选择器可能会污染里面的元素。

.m-xxx div{}

不要以没有语义的标签作为选择器，这会造成大面积污染，除非你可以断定现在或将来你的这个选择器不会污染其他同类。

（4）解决方案：

同上

（5）编码实战：

详情见视频

（6）拓展思考：

除了这种规范还有其他规范的吗？

（7）参考文献：

参考：NEC 更好的CSS方案

（8）更多讨论：

Q1：哪种规范更好；
A1：没有统一答案，依据不同公司的要求来书写；

Q2：nec的css顺序是怎么写的；
A2：例：按照以下顺序；

/* 重置 */

div,p,ul,ol,li{margin:0;padding:0;}

/* 默认 */

strong,em{font-style:normal;font-weight:bold;}

/* 统一调用背景图 */

.m-logo a,.m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;}

/* 统一清除浮动 */

.g-bdc:after,.m-dimg ul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';}

.g-bdc,.m-dimg ul,.u-tab{zoom:1;}

/* 布局 */

.g-sd{float:left;width:300px;}

/* 模块 */

.m-logo{width:200px;height:50px;}

/* 元件 */

.u-btn{height:20px;border:1px solid #333;}

/* 功能 */

.f-tac{text-align:center;}

/* 皮肤 */

.s-fc,a.s-fc:hover{color:#fff;}

Q3：原子类名命的优劣
A3：缺点:代码冗余；维护困难；控制困难；

优点

1，便于抽出复用代码，提高代码复用程度。clearfix 类就是最好的一个例子，将一段用来清除浮动的 CSS 编写成 clearfix 类，在需要清除浮动的元素中，增加这个类就可以。类似的还有其他使用场景。

2，CSS 框架的应用。很多前端框架的 CSS 部分，特别是网格系统，都是原子类的具体应用。

（9）鸣谢：

感谢孟晨师兄，此教程是在他之前技术分享的基础上完善而成。

（10）结束语：

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

---------------------------------------------------------------------------------------------------------------------------

“我们相信人人都可以成为一个工程师，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

修真院.IT技能树

开发过程中应该遵守哪些编码规范和class命名规范？相关推荐

html5class命名规范,开发过程中应该遵守哪些编码规范和class命名规范？
一.背景介绍为什么要遵守编码规范? 1.好的编码规范可以尽可能的减少一个软件的维护成本,并且几乎没有任何一个软件,在其整个生命周期中,均由最初的开发人员来维护: 2.好的编码规范可以改善软件的可读性 ...
那些开发过程中需要遵守的开发规范
入职公司三天,没干啥其他活,基本在配置本地环境和阅读相关文档.技术方面公司基本用的是主流的技术体系,入职后需要先阅读阿里的开发规范和其他的一些产研文档.今天整理一些平时需要关注的阿里规约和数据库开发规 ...
mysql的库命名规范_数据库命名规范（命名规则）
数据库命名规范引言:数据库设计过程中库.表.字段等的命名规范也算是设计规范的一部分,不过设计规范更多的是为了确保数据库设计的合理性.为了项目最终的协调稳定性,而命名规范更多的是为了确保设计的正式和统 ...
android icon命名规则,安卓手机的APP图标尺寸规范和图标命名规范
安卓手机的APP图标尺寸规范和图标命名规范点击查看原文 android图标包括:程序启动图标.底部菜单图标.弹出对话框顶部图标.长列表内部列表项图标.底部和底部tab标签图标. 1.安卓程序启动图标 ...
C#命名规范，SqlServer命名规范
大家都知道写程序应该有个好的命名规范,为了工作方便,贴出来. 1 ADO.NET 命名规范数据类型数据类型简写标准命名举例 Connection con conNorthwind Command ...
MAB建模规范-Naming Conventions命名规范
规则ID:db.jm.hd.ar被用于Ver 1.0的规范.na和jc用于从版本2.0到现在创建的规范 NA-MAAB代表北美和欧洲.J-MAAB代表日本目录 Naming Conventions命 ...
HTML编码规范 - (WEB前端命名规范)
HTML编码规范 1 (一)命名规则: 2 3 头:header 4 内容:content/container 5 尾:footer 6 导航:nav 7 侧栏:sidebar 8 栏目:column ...
Bootstrap CSS 编码规范之Class 命名规范
Class 命名规范 Class 应该遵守以下命名规范: class 名称中只能出现小写字符和破折号(不是下划线,也不是驼峰命名法).破折号应当用于相关 class 的命名(类似于命名空间)(如,.b ...
java bean命名规范_JavaBean 成员命名规范 | 学步园
在eclipse中自动生成setters()和getters() User.java private boolean active ; //getter() public boolean isActi ...

最新文章

热门文章