Explication détaillée des conventions de dénomination frontale HTML, CSS et JavaScript

J'ai accidentellement trouvé un tel fichier dans mon dossier. Je ne me souviens plus d'où il vient. J'ai regardé de plus près et j'ai trouvé que le résumé était plutôt bon. Je l'ai posté pour le partager.

Que ce soit d'un point de vue technique ou d'un point de vue développement, il existe certaines normes pour les documents de spécifications de développement web front-end.Cet article résume une série de documents de développement web sur les perspectives de développement. de CSS3 et HTML5, uniquement pour votre référence.

Objectif de la spécification :

Afin d'améliorer l'efficacité de la collaboration en équipe et de faciliter la collaboration du personnel back-end ajouter des fonctions et une maintenance post-optimisation frontale, produire des documents de haute qualité, et ce document est spécialement formulé. Une fois ce document de spécification confirmé, les développeurs front-end doivent développer la page frontale selon les spécifications de ce document. S'il y a quelque chose de mal ou d'inapproprié dans ce document, veuillez le signaler à temps, et il pourra être modifié après discussion et décision.

Directives de base : <.>

Conforme aux standards du Web, HTML sémantique, séparation de la structure, des performances et du comportement, et excellente compatibilité. En termes de performances des pages, le code doit être concis, clair et ordonné, pour. réduisez autant que possible la charge du serveur et assurez la vitesse d'analyse la plus rapide

Spécifications du fichier

1. , css, js, les fichiers images sont tous archivés dans le répertoire convenu dans les ;

2. Fichiers html Dénomination : nom anglais, suffixe .htm. en même temps, placez le brouillon d'interface correspondant dans le même répertoire. Si le brouillon d'interface est nommé en chinois, veuillez le renommer avec le même nom que le fichier html pour faciliter la recherche de la page correspondante lors de l'ajout de fonctions au backend ;

3. Nom du fichier CSS : nom anglais, suffixe .css, page d'accueil index.css, les autres pages sont nommées en fonction des exigences réelles du module.; 🎜>4. Nommage du fichier Js : nommage anglais, le suffixe .js est partagé et les autres noms sont basés sur les exigences réelles du module. normes d'écriture

1. Déclaration et encodage du type de document : unifié au type de déclaration html5 ; />, utilisé lors de l'écriture L'IDE implémente une indentation de niveau clair

2 Sauf circonstances particulières, le fichier de style doit être lié en externe à …; Dans des circonstances particulières, JavaScript Le fichier doit être lié au bas de la page

3 Lors de l'introduction de fichiers de style ou de fichiers JavaScript, la déclaration de type par défaut doit être omise et écrit comme suit :

4. Présentez le fichier de la bibliothèque JS. Le nom du fichier doit inclure le nom de la bibliothèque. et le numéro de version et s'il s'agit d'une version compressée, telle que jquery-1.4.1.min .js ; introduisez le plug-in, le format du nom de fichier est nom de la bibliothèque + nom du plug-in, tel que jQuery.cookie.js ;

<link rel=”stylesheet” href=”…” /> 
<style>…</style> 
<script src=”…”></script>

5. Tout le codage suit la norme xhtml, les balises, les attributs et la dénomination des attributs. Il doit être composé de lettres minuscules et de chiffres soulignés, et toutes les balises doivent être fermées, y compris br (< br />), hr (

---

), etc. ; les valeurs d'attribut doivent être placées entre guillemets doubles

6. qui n'ont aucun problème de compatibilité, tel que span, em, strong, optgroup, label, etc. ; lorsque vous devez ajouter des attributs personnalisés aux éléments HTML, vous devez d'abord considérer ce qui suit : il n'y a pas de balise appropriée par défaut à définir. Sinon. , vous pouvez utiliser "data-" comme préfixe pour ajouter des attributs personnalisés afin d'éviter d'utiliser d'autres méthodes de dénomination telles que "data:"

7. pour les titres (la même page ne peut avoir qu'un seul h1), p pour les balises de paragraphe et ul pour les listes ne peuvent pas être imbriqués dans des éléments en ligne ;

8. imbrication autant que possible, par exemple

Bienvenue sur XXX, votre nom d'utilisateur est

Nom d'utilisateur

peut être complètement remplacé par le code suivant :

Bienvenue sur XXX, Votre nom d'utilisateur est username

;

9. Lorsque vous écrivez des adresses de liens, vous devez éviter les redirections, par exemple : href="http://itaolun.com/" , c'est-à-dire que "/" doit être ajouté après l'adresse URL

;

10. 在页面中尽量避免使用style属性,即style=”…”;

11. 必须为含有描述性表单元素(input, textarea)添加label, 如

<p>姓名: <input type=”text” id=”name” name=”name” /></p>须写成:<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>

12. 能以背景形式呈现的图片, 尽量写入css样式中;

13. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;

14. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;

15. 特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(>) & 空格( ) & ?(?) 等等;

16. 书写页面过程中, 请考虑向后扩展性;

17. class & id 参见 css书写规范.

css书写规范

1. 编码统一为utf-8;

2. 协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用css文件base.css由i书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改;

3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由我分发框架文件时命名的, 为JavaScript预留钩子的除外;

4. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;

5. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由 小写英文 & 数字 & _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.

6. 规避class与id命名(此条重要, 若有不明白请及时与i沟通):

a, 通过从属写法规避, 示例见d;

b, 取父级元素id/class命名部分命名, 示例见d;

c, 重复使用率高的命名, 请以自己代号加下划线起始, 比如i_clear;

d, a,b两条, 适用于在2中已建好框架的页面, 如, 要在2中已建好框架的页面代码

中加入新的p元素,

按a命名法则:

…

,

样式写法: #mainnav .firstnav{…….}

按b命名法则:

…

,

样式写法: .main_firstnav{…….}

7. css属性书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin ＆ padding ＆ float（包括clear） ＆ position（相应的 top,right,bottom,left） ＆ display ＆ visibility ＆ overflow等； 自身属性主要包括: width & height & background & border; 文本属性主要包括： font ＆ color ＆ text-align ＆ text-decoration ＆ text-indent等；其他属性包括: list-style(列表样式) ＆ vertical-vlign ＆ cursor ＆ z-index(层叠顺序) ＆ zoom等. 我所列出的这些属性只是最常用到的, 并不代表全部;

8. 书写代码前, 考虑并提高样式重复使用率;

9. 充分利用html自身属性及样式继承原理减少代码量, 比如:

• 这儿是标题列表2010-09-15

定义

ul.list li{position:relative} ul.list li span{position:absolute; right:0}

即可实现日期居右显示

10. 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;

11. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;

12. 使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现, 如

thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法: 
table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} ,

base.css文件中我会初始化表格样式)

13. 杜绝使用 兼容ie8;

14. 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景:

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);

15. 避免兼容性属性的使用, 比如text-shadow || css3的相关属性;

16. 减少使用影响性能的属性, 比如position:absolute || float ;

17. 必须为大区块样式添加注释, 小区块适量注释;

18. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化i会统一处理;

JavaScript书写规范

1. 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …);

2. 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;

3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun;

jQuery变量要求首字符为’_’, 其他与原生JavaScript 规则相同, 如: _iTaoLun;

另, 要求变量集中声明, 避免全局变量.

4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;

5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun();

6. 命名语义化, 尽可能利用英文单词或其缩写;

7. 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;

8. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;

9. 代码结构明了, 加适量注释. 提高函数重用率;

10. 注重与html分离, 减小reflow, 注重性能.

 

图片规范

1. 所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹;

2. 图片格式仅限于gif || png || jpg;

3. Nommez tout avec une combinaison de lettres anglaises minuscules || de chiffres || _, qui ne doivent pas contenir de caractères chinois || essayez d'utiliser un vocabulaire facile à comprendre pour faciliter la compréhension ; par d'autres membres de l'équipe ; de plus, le nom est divisé en deux parties, la première et la dernière parties, séparées par des traits de soulignement, tels que ad_left01.gif ||

4; . Sélectionnez le plus petit format d'image et la qualité d'image tout en garantissant l'effet visuel, pour réduire le temps de chargement

5. instructions pertinentes de la spécification CSS);

6. Utilisez la technologie de sprite CSS pour vous concentrer sur les petites images d'arrière-plan ou les icônes afin de réduire les requêtes http de page, mais assurez-vous de tracer des lignes de référence dans le image source psd du sprite correspondant et enregistrez-la dans le répertoire img. >

1. commentaire html : format de commentaire , '–' ne peut être placé qu'au début et à la fin du commentaire, et ne peut pas être placé dans la zone de texte du commentaire ;

2. commentaire CSS : format du commentaire/*Commentez ici */

3. /Commentaires sur une seule ligne ici', commentaires sur plusieurs lignes, utilisez /* Commentaires sur plusieurs lignes ici*/;

Conventions des outils de développement et de test

Il est recommandé d'utiliser Aptana || Dw | :

1. N'utilisez pas le mode d'affichage de l'EDI pour « dessiner » le code

2. les codes, tels que certains js fonctionnels intégrés à Dw ;

3. Le codage doit être formaté, comme l'indentation

Outils de test : uniquement ; testez FireFox & IE6 & IE7 & IE8 au début du développement, et ajoutez Opera & Chrome & Safari lors d'une optimisation ultérieure

Ordre de test recommandé : FireFox–> ;IE7–>IE8– ; >IE6–>Opera–>Chrome–>Safari, il est recommandé d'installer les plug-ins Firebug et IE Tab Plus

Autres spécifications

.

1. Pendant le processus de développement, complétez la page strictement selon la division du travail pour améliorer le taux de réutilisation du CSS et éviter les développements répétés

2. code, Écrivez du code que tout le monde peut comprendre. Être concis et facile à comprendre est une vertu. Pensez aux utilisateurs et pensez aux serveurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!