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

news2024/12/28 3:30:04

文章目录

  • 🟢 前端代码规范
  • 🟢 一、编码规约
    • 👉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 兼容模式

 <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感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2083404.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

EasyCVR中的H.265技术：助力实现大规模高效流畅的视频监控应用

EasyCVR中的H.265技术：助力实现大规模高效流畅的视频监控应用

随着视频监控技术的不断发展和用户对视频质量要求的不断提高&#xff0c;高效能、低延迟的视频编码技术成为视频监控系统中的重要支撑。TSINGSEE青犀视频旗下的EasyCVR视频汇聚平台凭借其强大的视频处理能力和对H.265技术的支持&#xff0c;在视频监控系统中展现出显著的应用优…
阅读更多...
【qt】锁

【qt】锁

线程安全问题. 多线程程序太复杂了. 加锁 把多个线程要访问的公共资源&#xff0c;通过锁保护起来.>把并发执行变成串行执行. Linux mutex 互斥量. C11引入std::mutex Qt 同样也提供了对应的锁&#xff0c;来针对系统提供的锁进行封装.QMutex 多个线程进行加锁的对象&…
阅读更多...
信息学奥赛初赛天天练-77-NOIP2015普及组-基础题2-二进制、连通图、最小生成树、链表、二叉树、完全二叉树

信息学奥赛初赛天天练-77-NOIP2015普及组-基础题2-二进制、连通图、最小生成树、链表、二叉树、完全二叉树

NOIP 2015 普及组 基础题2 4 在计算机内部用来传送、存贮、加工处理的数据或指令都是以( )形式进行的 A 二进制码 B 八进制码 C 十进制码 D 智能拼音码 5 下列说法正确的是( ) A CPU 的主要任务是执行数据运算和程序控制 B 存储器具有记忆能力&#xff0c;其中信息任何时候都…
阅读更多...
【Linux】——Rocky Linux配置静态IP

【Linux】——Rocky Linux配置静态IP

Rocky Linux配置静态IP Rocky Linux Rocky Linux 进入官网进行下载&#xff0c;下载版本自定义 官网link 获取ip地址 ip addr 获取服务器ip地址 进入网络配置文件目录&#xff1a; cd /etc/NetworkManager/system-connections/vi打开ens33.nmconnection 在IPv4下输入配置信…
阅读更多...
Day50 | 108.冗余连接 109.冗余连接II

Day50 | 108.冗余连接 109.冗余连接II

108.冗余连接 108. 冗余连接 题目 题目描述 树可以看成是一个图&#xff08;拥有 n 个节点和 n - 1 条边的连通无环无向图&#xff09;。 现给定一个拥有 n 个节点&#xff08;节点标号是从 1 到 n&#xff09;和 n 条边的连通无向图&#xff0c;请找出一条可以删除的边&…
阅读更多...
基于元神操作系统编程写USB扇区

基于元神操作系统编程写USB扇区

1. 背景 本文介绍了“调用元神操作系统API向U盘扇区写数据”的程序实现及测试结果。 2. 方法 &#xff08;1&#xff09;调用元神操作系统API读U盘扇区 本部分内容已在前面的文章中进行介绍&#xff0c;详细内容请参考“编写程序调用元神操作系统的API”。 &#xff08;2&…
阅读更多...
WordPress入门级防火墙推荐指南

WordPress入门级防火墙推荐指南

随着互联网的发展&#xff0c;网站安全问题日益凸显。对于刚开始接触WordPress的用户来说&#xff0c;选择一款合适的防火墙插件非常关键。防火墙不仅能保护网站免受恶意攻击&#xff0c;还能实时监控流量&#xff0c;确保网站正常运行。今天我将为大家介绍两款适合新手使用的W…
阅读更多...
Python计算机视觉 第4章-照相机模型与增强现实

Python计算机视觉 第4章-照相机模型与增强现实

Python计算机视觉 第4章-照相机模型与增强现实 4.1　针孔照相机模型 针孔照相机模型&#xff08;有时称为射影照相机模型&#xff09;是计算机视觉中广泛使用的照相机模型。对于大多数应用来说&#xff0c;针孔照相机模型简单&#xff0c;并且具有足够的精确度。这个名字来源…
阅读更多...
我的电脑/资源管理器里无法显示新硬盘？

我的电脑/资源管理器里无法显示新硬盘？

前情提要 我新&#xff01;买了一个京东京造的SATA3硬盘&#xff0c;一个绿联的SATA3转USB读取 现在我的电脑里只能显示我本地的C盘和D盘&#xff0c;不能显示这个接入的SATA盘。 系统环境&#xff1a;windows11 问题描述 在我的电脑里&#xff0c;只能看到我原本的C和D&…
阅读更多...
mount : wrong fs type, bad option, bad superblock on

mount : wrong fs type, bad option, bad superblock on

nfs-utils没有安装 rpm -qa|grep nfsyum install -y nfs-utils
阅读更多...
【读书笔记-《30天自制操作系统》-9】Day10

【读书笔记-《30天自制操作系统》-9】Day10

本篇主要解决两个问题。一是扩充上一篇内存管理部分的功能&#xff0c;实现一种按4KB大小分配内存的函数&#xff1b;二是解决鼠标显示中鼠标覆盖任务栏的问题。 1. 以4KB大小为单位分配内存的函数 如果每次分配内存都需要按字节去分配&#xff0c;效率还是比较低的&#xf…
阅读更多...
chapter08-面向对象编程——（chapter08作业）——day10

chapter08-面向对象编程——（chapter08作业）——day10

343-作业01 package chapter08.homeworks;public class Homework01 {public static void main(String[] args) {/*1.定义一个Person类{name, age, job},初始化Person对象数组&#xff0c;有3个person对象&#xff0c;并按照age从大到小进行排序,提示&#xff0c;使用冒泡排序 H…
阅读更多...
C# UserControl、Dockpanel和DockContent、Cursor、

C# UserControl、Dockpanel和DockContent、Cursor、

一、UserControl类 UserControl 是 .NET 中的一个基类&#xff0c;用于创建自定义控件&#xff0c;主要用于 Windows Forms 和 WPF。通过继承 UserControl&#xff0c;你可以设计和实现具有特定界面和功能的控件组件。UserControl 允许你将多个标准控件组合在一起&#xff0c;…
阅读更多...
如何从公域导入私域？做好实战的5大策略！

如何从公域导入私域？做好实战的5大策略！

​文&#xff1a;轻腾创者
阅读更多...
实验室管理小程序的设计

实验室管理小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户信息管理&#xff0c;教学实验管理&#xff0c;学生签到管理&#xff0c;设备信息管理&#xff0c;设备预约管理&#xff0c;课程表管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统…
阅读更多...
【Python数据结构与算法】队列----滑动窗口

【Python数据结构与算法】队列----滑动窗口

题目&#xff1a;滑动窗口 描述 给定一个长度为n&#xff08;n<100,000&#xff09;的整数序列。有一个大小为k(0 < k < n)的滑动窗口从数组的最左端移动到最右端。你可以看到窗口中的k个数。窗口每次向右滑动一个数的距离。 下面是一个例子&#xff1a; 数组是 [1 3…
阅读更多...
差分约束问题

差分约束问题

差分约束 概念及解法一些题目 概念及解法 引用自OI Wiki 差分约束系统是一种特殊的 n 元一次不等式组&#xff0c;它包含 n 个变量 x 1 , x 2 , … , x n x_1,x_2,\dots,x_n x1​,x2​,…,xn​ 以及 m 个约束条件&#xff0c;每个约束条件是由两个其中的变量做差构成的&#x…
阅读更多...
内网安装GitLab

内网安装GitLab

内网安装GitLab 为什么安装GitLab GitHub&#xff08;国外&#xff09;和Gitee&#xff08;国内&#xff09;都是第三方托管平台&#xff0c;不能本地部署&#xff0c;对公网开放&#xff0c;代码保密性不高。 为代码保密性&#xff0c;需在内网搭建代码管理平台。有web操作…
阅读更多...
Java设计模式之建造者模式详细讲解和案例示范

Java设计模式之建造者模式详细讲解和案例示范

引言 在软件开发中&#xff0c;创建复杂对象常常伴随着众多参数和配置&#xff0c;这种情况容易导致“构造函数爆炸”或参数混乱的问题。为了解决这一问题&#xff0c;建造者模式&#xff08;Builder Pattern&#xff09;应运而生。它通过分步骤地构建对象&#xff0c;提供了更…
阅读更多...
C++编程：高阶编程

C++编程：高阶编程

本阶段主要针对泛型编程和STL技术作详细讲解。 1 模板 1.1 模板的概念 C提供一种泛型编程&#xff0c;主要利用模板的技术&#xff0c;模板的目的是提高代码复用性&#xff0c;将类型参数化。 C提供两种模板机制&#xff1a; 函数模板类模板 模板的特点&#xff1a; 模板…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023