【前端开发必备小技巧】前端代码规范html、css篇

最新推荐文章于 2024-09-04 11:56:14 发布
最新推荐文章于 2024-09-04 11:56:14 发布
阅读量1k 收藏 23
点赞数 22
文章标签： 前端 代码规范 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stc_ljc/article/details/141649870
版权

文章目录

🟢 前端代码规范

在这里插入图片描述

规范的目的是为了编写高质量的代码，让你的团队成员每天得心情都是愉悦的，大家在一起是快乐的。
引自《阿里规约》的开头片段:
…现代软件架构的复杂性需要协同开发完成，如何高效地协同呢?无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。

🟢 一、编码规约

👉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 兼容模式

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>title</title>
  </head>
  <body>
    <noscript>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
👉2.2、缩进

缩进使用2个空格(一个tab)
嵌差的节点应该缩进。

👉2.3、缩进

在每一个块状元素，列表元素和表格元素后，加上一对 HTML注释。注释格式
<!. 英文 中文 start >
<!.. 英文 中文 end >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- header头部 start -->
  <header>
    <div class="container">

    </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、选择器
  1. css 选择器中避免使用标签名
    从结构、表现、行为分离的原则来看，应该尽量避免css 中出现 HTML标签，并且在 css 选择器中出现标签名会存在潜在的问题。
  2. 很多前端开发人员写选择器链的时候不使用直接子选择器(注:直接子选择器和后代选择器的区别)。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的，需要匹配到 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、代码组织
  1. 将公共less文件放置在style/less/common文件夹
    例:// color.less,common.less
  2. 按以下顺序组织
    1. @import;
    2. 变量声明;
    3. 样式声明;
@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感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见

前端初见
关注
  • 22
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
关于rem的适配前端页面响应式开发必备技巧
12-18 729
????作者小三是刚刚毕业不久全栈工程师，写的技术文章基本上是学习过程中笔记整理而来，大家看了之后如果喜欢可以给小弟点点赞哦。 ????例外小弟还有个程序员交流群，欢迎各位大佬来摸鱼哈。点击加群 我们作为前端初学者来说，是不是有一个疑惑，我们电脑屏幕大，但是手机屏幕小，那我在PC端页面写好的东西到了手机端岂不是很难看？ 所以！我在这里将会给你们介绍关于rem的适配方案 关于rem的适配方案？ 适配的目的是什么？ 原理是什么 怎么做？ 带着这三个疑问，我们一起来看看rem 适配的目的是什么？
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6355
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
浏览器兼容性问题：前端开发者必备的解决技巧
官方推荐
08-31 5129
浏览器兼容性问题：前端开发者必备的解决技巧
前端必备之CSS基础知识点
会思想的苇草i的博客
12-07 1037
前端开发中，CSS（层叠样式表）用于控制网页的样式和布局。通过CSS，开发人员可以选择元素的字体、颜色、大小和位置等属性，以及定义动画和过渡效果。CSS的使用能够使网页更加美观、可读性更好，并提升用户体验。
前端开发必备的CSS命名规范与常用CSS代码集合
web前端开发
07-28 400
编辑 | web前端开发来源| web前端开发我们在用html+css进行网页的排版布局时，经常会遇到CSS命名，如果是在团队多人协作开发时，团队里都会有自己的命名规范...
前端开发必备资源大全
10-08
- 收集了一些前端开发中常用但不为人知的小技巧，可以帮助开发者解决特定问题。 5. **几乎所有设备的屏幕尺寸与像素密度表** - 提供了一个全面的设备参数表格，便于开发者根据目标用户群体选择合适的屏幕尺寸和...
h5(html5)+css3+移动端前端
weixin_58997863的博客
07-12 6302
h5(html5)+css3+移动端前端 知识点详细总结
web前端开发规范，CSS如何清除默认样式
m0_60143737的博客
07-23 489
如果你正在使用 React.js 或 React Native 创建用户界面，可以试一试本文推荐的这些框架。 React.js 和 React Native 是流行的用户界面（UI）开发平台，且都是开源技术。在 StackOverflow 的 2019 年开发人员调查中，它们在期望度和使用率方面都有很高的排名。React.js 是 Facebook 在 2011 年作为一个 JavaScript 库开发而成的，目的是满足跨平台、动态和高性能 UI 的需求；而 Facebook 在 2015 年发布的 Rea
后端输出二进制数据，前端fetch接受二进制数据，并转化为字符输出
cdcdhj的博客
09-01 503
在这个前端代码中，我们使用fetch API请求PHP脚本，并获取二进制数据。然后，我们将ArrayBuffer转换为字符串，以便在JavaScript中使用。在PHP中，你可以将字符串或其他数据类型转换为二进制数据，并通过HTTP响应发送给前端。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1386
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
vue3使用-watch监听总结
weixin_44072254的博客
09-01 497
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
深入理解JavaScript闭包：避免常见的内存泄漏问题
官方推荐
09-02 3793
深入理解JavaScript闭包：避免常见的内存泄漏问题
KEYSIGHT是德 Infiniium EXR系列 示波器
XLTYQYB的博客
08-29 1442
该系列的所有型号都集成了一个 10 位 ADC，并且在所有通道上同时提供 16 GSa/s 的采样率。高分辨率 ADC 的效用取决于示波器的前端底噪是否足够低以提供与之匹配的额外的量化电平空间。我们的低噪声前 端包含定制 IC，例如 130 纳米 BiCMOS IC（其中集成了用户可选的模拟滤波器），并且带宽可通过软件 许可证升级。使用硬件滤波时，噪声低至 43 μV，系统 ENOB 达到 9.0 位。Infiniium EXR系列 示波器 型号比较。垂直分辨率是 8 位示波器的 4 倍。
材料表面缺陷检测系统源码分享 # [一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
xuehai996的博客
08-29 2429
材料表面缺陷检测系统源码分享 # [一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
web开发
最新发布
2301_76876837的博客
09-04 261
我们在访问的网站的时候，一般就是在浏览器的网址栏里输入，再敲个回车，我们就可以访问到我们想要的网站（比如京东）。这是为什么呢？我们访问的浏览器是一个程序，京东也是一个程序，只是京东在人家电脑上运行着，我们只是远程访问了人家的前端页面。我们根据下图来讲解一下web网站的工作流程：我们在浏览器输入我们想要查找的域名，回车（搜索）后，会到，前端服务器接受到请求后会把相对应的前端代码返回给浏览器，浏览器会自动解析前端代码（因为内置了解析引擎），展示出页面效果。前端代码里由一句代码会是访问。
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 498
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
Nginx部署前端Vue项目
不会代码的小林
09-03 800
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
浅析前端数据埋点监控：用户行为与性能分析的桥梁
dsgdauigfs的博客
09-03 880
总的来说，前端埋点技术不仅是提升用户体验和产品运行效率的利器，更是实现数据驱动决策的重要工具。随着各类专业工具的出现，如腾讯有数、百度统计和微软Clarity，企业可以根据需求选择最适合的工具进行数据分析和优化，从而在竞争激烈的市场中保持领先地位。通过深入理解用户行为和性能数据，企业能够做出更明智的决策，推动业务持续发展，实现长期成功。通过本文的介绍，希望能够帮助前端开发者和产品团队更好地理解数据埋点的重要性，掌握实施数据埋点的方法，从而在实际工作中发挥其最大的价值。努力的小雨。
2020寒假前端小白HTML&CSS学习实战与心得
博主强调，HTML、CSS和JavaScript是前端开发的三大基础，其中HTML负责页面结构，是"代码布局"的工具，其标签成对出现，构建网页的基本框架。CSS则扮演着"合理装饰"的角色，通过层叠样式表在浏览器上展现丰富的视觉...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端初见

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值