自己整理的前端编码规范（HTML/CSS）

最新推荐文章于 2024-05-17 00:02:17 发布

DoubleNa

最新推荐文章于 2024-05-17 00:02:17 发布

阅读量308

点赞数 1

分类专栏：前端CSS HTML代码规范文章标签： css html

本文链接：https://blog.csdn.net/qq_36174666/article/details/106281703

版权

前端CSS HTML代码规范专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、HTML规范

文档规范

使用 HTML5 的文档声明类型 : <!DOCTYPE html>

如果你的页面添加了<!DOCTYP>那么，那么就等同于开启了标准模式。浏览器会按照W3C标准解析渲染页面。

脚本加载

所有浏览器推荐写法

<html>
  <head>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <!-- body goes here -->

    <script src="main.js" async></script>
  </body>
</html>

只兼容现代浏览器（IE9+）推荐写法

<html>
  <head>
    <link rel="stylesheet" href="main.css">
    <script src="main.js" async></script>
  </head>
  <body>
    <!-- body goes here -->
  </body>
</html>

语义化

使用语义化标签

推荐

html 代码:
<!-- The page header should go into a header element -->
<header>
  <!-- As this title belongs to the page structure it's a heading and h1 should be used -->
  <h1>My page title</h1>
</header>

<!-- All navigation should go into a nav element -->
<nav class="top-navigation">
  <!-- A listing of elements should always go to UL (OL for ordered listings) -->
  <ul>
    <li class="nav-item"><a href="#home">Home</a></li>
    <li class="nav-item"><a href="#news">News</a></li>
    <li class="nav-item"><a href="#about">About</a></li>
  </ul>
</nav>

<!-- The main part of the page should go into a main element (also use role="main" for accessibility) -->
<main class="news-page" role="main">
  <!-- A section of a page should go into a section element. Divide a page into sections with semantic elements. -->
  <section class="page-section news">
    <!-- A section header should go into a section element -->
    <header>
      <!-- As a page section belongs to the page structure heading elements should be used (in this case h2) -->
      <h2 class="title">All news articles</h2>
    </header>

    <!-- If a section / module can be seen as an article (news article, blog entry, products teaser, any other
     re-usable module / section that can occur multiple times on a page) a article element should be used -->
    <article class="news-article">
      <!-- An article can contain a header that contains the summary / introduction information of the article -->
      <header>
        <!-- As a article title does not belong to the overall page structure there should not be any heading tag! -->
        <div class="article-title">Good article</div>
        <!-- Small can optionally be used to reduce importance -->
        <small class="intro">Introduction sub-title</small>
      </header>

      <!-- For the main content in a section or article there is no semantic element -->
      <div class="content">
        <p>This is a good example for HTML semantics</p>
      </div>
      <!-- For content that is represented as side note or less important information in a given context use aside -->
      <aside class="article-side-notes">
        <p>I think I'm more on the side and should not receive the main credits</p>
      </aside>
      <!-- Articles can also contain footers. If you have footnotes for an article place them into a footer element -->
      <footer class="article-foot-notes">
        <!-- The time element can be used to annotate a timestamp. Use the datetime attribute to specify ISO time
         while the actual text in the time element can also be more human readable / relative -->
        <p>This article was created by David <time datetime="2014-01-01 00:00" class="time">1 month ago</time></p>
      </footer>
    </article>

    <!-- In a section, footnotes or similar information can also go into a footer element -->
    <footer class="section-footer">
      <p>Related sections: Events, Public holidays</p>
    </footer>
  </section>
</main>

<!-- Your page footer should go into a global footer element -->
<footer class="page-footer">
  Copyright 2014
</footer>

alt标签不为空

结构、表现、行为三者分离

不使用行内样式（ <style>.no-good {}</style> ）
不在元素上使用 style 属性（ <hr style="border-top: 5px solid black"> ）
不使用行内脚本（ <script>alert('no good')</script> ）
不使用表象元素（ i.e. <b>, <u>, <center>, <font>, <b> ）
不使用表象 class 名（ i.e. red, left, center ）
不使用超过一到两张样式表
不使用超过一到两个脚本

这里多说一句，用 JavaScript 在写 HTML 和 CSS的方式已经较为普遍。比如， React 在 JavaScript 里面实现了对 HTML 和 CSS 的封装，我们通过封装去操作 HTML 和 CSS。也就是说，网页的结构和样式都通过 JavaScript 操作。

由于 CSS 的封装非常弱，导致了一系列的第三方库，用来加强 React 的 CSS 操作。它们统称为 CSS in JS，意思就是使用 JS 语言写 CSS。

CSS in JS 使用 JavaScript 的语法，是 JavaScript 脚本的一部分，不用从头学习一套专用的 API，也不会多一道编译步骤

HTML只关注内容

HTML只显示展示内容信息
不要引入一些特定的 HTML 结构来解决一些视觉设计问题
不要将img元素当做专门用来做视觉设计的元素
样式上的问题应该使用css解决

二、CSS规范

id和class的命名

ID和class的名称使用可以反应元素目的和用途的名称

合理的使用ID

一般情况下ID不应该被用于样式，并且ID的权重很高，所以不使用ID解决样式的问题，而是使用class

css选择器中避免使用标签名

使用子选择器

尽量使用缩写属性

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

属性顺序

尽量按照下面的顺序进行属性开发

结构性属性：

display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding

表现性属性：

background, border etc.
font, text

示例代码：

.box {
  display: block;
  position: absolute;
  left: 30%;
  right: 30%;
  overflow: hidden;
  margin: 1em;
  padding: 1em;
  background-color: #eee;
  border: 3px solid #ddd;
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
}

DoubleNa

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
自己整理的前端编码规范（HTML/CSS）

一、HTML规范文档规范使用 HTML5 的文档声明类型 :<!DOCTYPE html>如果你的页面添加了<!DOCTYP>那么，那么就等同于开启了标准模式。浏览器会按照W3C标准解析渲染页面。脚本加载所有浏览器推荐写法<html> <head> <link rel="stylesheet" href="main.css"> </head> <body> <!..
复制链接

扫一扫