【前端开发必备小技巧】前端代码规范html、css篇
前端初见 2024-09-05 14:03:01 阅读 84
文章目录
🟢 前端代码规范🟢 一、编码规约👉1、命名规范👉1.1、项目命名👉1.2、目录命名👉1.3、JS、CSS、SCSS、HTML、PNG 文件命名👉1.4、命名严谨性
👉2、HTML规范(Vue Template 同样适用)👉2.1、 HTML 类型👉2.2、缩进👉2.3、缩进👉2.4、语义化标签👉2.5、引号
👉3、CSS规范👉3.1、命名👉3.2、选择器👉3.3、尽量使用缩写属性👉3.4、每个选择器及属性独占一行👉3.5、省略0后面的单位👉3.6、避免使用ID选择器及全局标签选择器防止污染全局样式
👉4、LESS规范👉4.1、代码组织👉4.2、避免嵌套层级过多
✒️总结
🟢 前端代码规范
规范的目的是为了编写高质量的代码，让你的团队成员每天得心情都是愉悦的，大家在一起是快乐的。
引自《阿里规约》的开头片段:
…现代软件架构的复杂性需要协同开发完成，如何高效地协同呢?无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。
🟢 一、编码规约
👉1、命名规范
👉1.1、项目命名
全部采用小写方式，以中划线分隔。
正例:mall-management-system反例:mall_management-system或mallnanagementSystem
👉1.2、目录命名
全部采用小写方式，以中划线分隔，有复数结构时，要采用复数命名法，缩写不用复数
正例:scripts /styles /components /images /utils /layouts /demo-styles / demo-sc/ img / doc反例:script/style/demo_scripts/demostyles /imgs / docs
【特殊】VUE的项目中的 components 中的组件目录，使用kebab·case 命名
正例:head-search/page-loading /authorized /notice-icon反例:Headsearch/Pageloading
【特殊】VUE的项目中的除 components 组件目录外的所有目录也使用 kebab-case 命名
正例:page-one/shopping-car /user-management反例:Shoppingcar /Uservanagement
👉1.3、JS、CSS、SCSS、HTML、PNG 文件命名
全部采用小写方式，以中划线分隔
正例:render-dom.js/signup.css /index.html /company-1ogo.png
反例:renderDom.js /Uservanagement.html
👉1.4、命名严谨性
代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。说明:正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免采用
正例:henan/luoyang/rmb 等国际通用的名称，可视网英文。反例:DazhePromotion[打折]/getPingfenByName()[评分]/int某变量=3
杜绝完全不规范的编写，避免望文不知义:反例:AbstractClass“缩写"命名成 AbsClass;condition"缩写"命名成 cond，此类随意缩写严重降低了代码的可阅读性。
👉2、HTML规范(Vue Template 同样适用)
👉2.1、 HTML 类型
推荐使用 HTML5 的文档类型申明:(建议使用texthtml格式的 HTML。游免使用 XHTML。XHTML以及它的属性，比如 application/xhtml+xml在浏览器中的应用支持与优化空间都十分有限)
规定字符编码IE 兼容模式规定字符编码doctype 大写
IE 兼容模式
<code> <meta http-equiv="X-UA-Compatible" content="IE=edge">code>
<!DOCTYPE html>
<html lang="">code>
<head>
<meta charset="utf-8">code>
<meta http-equiv="X-UA-Compatible" content="IE=edge">code>
<meta name="viewport" content="width=device-width,initial-scale=1.0">code>
<title>title</title>
</head>
<body>
<noscript>
</noscript>
<div id="app"></div>code>
<!-- built files will be auto injected -->
</body>
</html>
👉2.2、缩进
缩进使用2个空格(一个tab)
嵌差的节点应该缩进。
👉2.3、缩进
在每一个块状元素，列表元素和表格元素后，加上一对 HTML注释。注释格式
<!. 英文 中文 start >
<!.. 英文 中文 end >
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<!-- header头部 start -->
<header>
<div class="container">code>
</div>
</header>
<!-- header头部 end -->
</body>
</html>
👉2.4、语义化标签
HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p标签
<header></header>
<footer></footer>
👉2.5、引号
使用双引号(" ")而不是单引号(’ ')。
👉3、CSS规范
👉3.1、命名
类名使用小写字母，以中划线分隔id 采用驼峰式命名scss中的变量、函数、混合、placeholder 采用驼峰式命名
ID 和 class 的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称
不推荐·
.fw-800{
font-weight: 800;
}
.red{
color: red;
}
推荐·
.heavy{
font-weight: 800;
}
.important{
color: red;
}
👉3.2、选择器
css 选择器中避免使用标签名
从结构、表现、行为分离的原则来看，应该尽量避免css 中出现 HTML标签，并且在 css 选择器中出现标签名会存在潜在的问题。很多前端开发人员写选择器链的时候不使用直接子选择器(注:直接子选择器和后代选择器的区别)。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的，需要匹配到 DOM 末端的选择器，你应该总是考虑直接子选择器。
不推荐
.content .title {
font-size: 2em;
}
推荐
.content > .title{
font-size:2em;
}
👉3.3、尽量使用缩写属性
不推荐
border-top-style:none;
font-fami1y:palatino,georgia,serif;
font-size:100%;
line-height: 1.6;
padding-bottom:2em;padding-left: 1em;
padding-right: 1em;
padding-top:0;
推荐
border-top:0:
font:100%/1.6 palatino, georgia,serif;
padding:0 1em 2em;
👉3.4、每个选择器及属性独占一行
不推荐:
button{
width:100px;height:50px;color:#fff;background:#00a0e9;
}
推荐:
button{
width:100px;
height:50px;
color:#fff;
background:#00a0e9;
}
👉3.5、省略0后面的单位
不推荐:
div{
padding-bottom: 0px;
margin: 0em;
}
推荐:
div{
padding-bottom: 0;
margin: 0;
}
👉3.6、避免使用ID选择器及全局标签选择器防止污染全局样式
该用的时候还是要用，只是避免滥用
不推荐:
#header{
padding-bottom: 0px;
margin: 0em;
}
推荐:
.header{
padding-bottom: 0;
margin: 0;
}
👉4、LESS规范
👉4.1、代码组织
将公共less文件放置在style/less/common文件夹
例:// color.less,common.less按以下顺序组织
@import;变量声明;样式声明;
@import "mixins/size.1ess":
@default-text-color:8333:
.page {
width: 960px;
margin: 0 auto;
}
👉4.2、避免嵌套层级过多
将嵌套深度限制在3级。对于超过4级的嵌套，给予重新评估。这可以避免出现过于详实的CSS选择器。避免大量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多于20行的嵌套规则出现
不推荐
.main{
.title{
.name{
color:#fff;
}
}
}
推荐
.main{
.name{
color:#fff;
}
}
✒️总结
如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨🔧 个人主页 : 前端初见
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。