principes de base

Principes de base

Séparation de la structure, du style et du comportement

Essayez de vous assurer que les documents et les modèles contiennent uniquement des structures HTML, que les styles sont placés dans des feuilles de style et que les comportements sont placés dans des scripts. HTML 结构，样式都放到样式表里，行为都放到脚本里。

缩进

统一两个空格缩进（总之缩进统一即可），不要使用 Tab 或者 Tab、空格混搭。

文件编码

使用不带 BOM 的 UTF-8 编码。

在 HTML中指定编码 <meta charset="utf-8"> ；
无需使用 @charset 指定样式表的编码，它默认为 UTF-8 （参考 @charset）；

一律使用小写字母

<!-- Recommended --><img src="google.png" alt="Google"><!-- Not recommended --><A HREF="/">Home</A>

/* Recommended */color: #e5e5e5;/* Not recommended */color: #E5E5E5;

省略外链资源 URL 协议部分

省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免Mixed Content 问题，减小文件字节数。

其它协议（ftp 等）的 URL 不省略。

<!-- Recommended --><script src="//www.w3cschool.cn/statics/js/autotrack.js"></script><!-- Not recommended --><script src="http://www.w3cschool.cn/statics/js/autotrack.js"></script>

/* Recommended */.example {  background: url(//www.google.com/images/example);
}/* Not recommended */.example {  background: url(http://www.google.com/images/example);
}

统一注释

通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。

HTML 注释

模块注释

<!-- 文章列表列表模块 --><div class="article-list">...</div>

区块注释

<!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: Ashu(Aaaaaashu@gmail.com)
-->

CSS 注释

组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；

/* ==========================================================================
   组件块
 ============================================================================ *//* 子组件块
 ============================================================================ */.selector {  padding: 15px;  margin-bottom: 15px;
}/* 子组件块
 ============================================================================ */.selector-secondary {  display: block; /* 注释*/}.selector-three {  display: span;
}

JavaScript 注释

单行注释

必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。

多行注释

避免使用 /*...*/

Indentation

Unifiez l'indentation de deux espaces (bref, l'indentation peut être unifiée), n'utilisez pas de Tab ou de Tab, et des espaces mélangés.
Encodage de fichiers
Utilisez l'encodage UTF-8 sans BOM.

<meta charset="utf-8">

@charset

UTF-8

@charset

Toujours utiliser des lettres minuscules

/**
 * 函数描述
 *
 * @param {string} p1 参数1的说明
 * @param {string} p2 参数2的说明，比较长
 *     那就换行了.
 * @param {number=} p3 参数3的说明（可选）
 * @return {Object} 返回值描述
 */function foo(p1, p2, p3) {    var p3 = p3 || 10;    return {
        p1: p1,
        p2: p2,
        p3: p3
    };
}

/**
 * @fileoverview Description of file, its uses and information
 * about its dependencies.
 * @author user@meizu.com (Firstname Lastname)
 * Copyright 2015 Meizu Inc. All Rights Reserved.
 */

Omettre la partie protocole de l'URL de la ressource de lien externe🎜🎜Omettre le http /

https< dans l'URL de la ressource de lien externe (images et autres ressources multimédias) /code>, faisant de l'URL une adresse relative, évitant le Contenu mixte et réduction de la taille du fichier. Nombre de sections. 🎜🎜Les URL d'autres protocoles (ftp, etc.) ne sont pas omises. 🎜rrreeerrreee🎜Annotation unifiée🎜🎜En configurant l'éditeur, des touches de raccourci peuvent être fournies pour afficher un mode d'annotation unanimement reconnu. 🎜Commentaires HTML
🎜🎜🎜Commentaires sur les modules🎜rrreee🎜🎜🎜Commentaires sur les blocs🎜rrreee🎜🎜Commentaires CSS
🎜Utiliser une ligne vierge entre les blocs de composants, les blocs de sous-composants et les blocs de déclaration Séparer , trois lignes vides entre les blocs de sous-composants ; 🎜rrreeeCommentaires JavaScript
🎜🎜Les commentaires sur une seule ligne🎜🎜🎜 doivent occuper une ligne. // est suivi d'un espace et l'indentation est cohérente avec le code commenté sur la ligne suivante. 🎜🎜🎜Commentaires sur plusieurs lignes🎜🎜🎜Évitez d'utiliser des commentaires sur plusieurs lignes comme /*...*/ . Lorsqu'il existe plusieurs lignes de contenu de commentaire, utilisez plusieurs commentaires sur une seule ligne. 🎜🎜🎜Annotations de fonction/méthode🎜🎜Les annotations de fonction/méthode doivent contenir des descriptions de fonction et les identifiants d'annotation doivent être utilisés lorsqu'il y a des paramètres et des valeurs de retour. ;🎜🎜Les annotations de paramètres et de valeurs de retour doivent contenir des informations de type et une description ;🎜🎜Lorsque la fonction est une fonction interne et n'est pas accessible de l'extérieur, vous pouvez utiliser le drapeau @inner ;🎜🎜rrreee🎜🎜Annotations de fichiers🎜🎜🎜 Les annotations de fichier sont utilisées pour indiquer aux lecteurs familiers avec ce code ce qui est contenu dans ce fichier. Le contenu général du fichier, son auteur, ses dépendances et les informations de compatibilité doivent être fournis. Comme suit :🎜rrreeeVérification du code
Utilisez W3C HTML Validator pour vérifier la validité de votre code HTML ; 
Utilisez W3C CSS Validator pour vérifier la validité de votre code CSS ; 
La vérification du code n'est pas le but ultime, En réalité, le but est de permettre aux développeurs de comprendre en profondeur quels types de syntaxe ou de méthodes d'écriture sont non standard et non recommandés après avoir suivi ce processus de vérification à plusieurs reprises. Même s'ils sont obligés d'utiliser des méthodes d'écriture non standard dans certains scénarios, ils le font. Je peux encore le faire.

principes de base