html, CSS 및 JavaScript 프런트엔드 명명 규칙에 대한 자세한 설명

우연히 내 폴더에서 그런 파일을 발견했는데, 어디서 왔는지 기억이 나지 않습니다. 자세히 살펴보니 요약이 꽤 괜찮아서 공유해봤습니다.

기술적 관점이든 개발 관점이든 웹 프런트엔드 개발 사양 문서에 대한 특정 표준이 있습니다. 이 문서에서는 참조용으로 CSS3 및 html5의 개발 전망에 대한 일련의 웹 개발 문서를 요약합니다. 오직.

사양의 목적:

팀 협업의 효율성을 높이고 백엔드 인력이 기능을 추가하고 프런트엔드 최적화 후 유지 관리를 촉진하고 고품질 문서를 ​​출력하기 위해 이 문서는 이 문서는 특별히 작성되었습니다. 본 사양 문서가 확정되면 프런트 엔드 개발자는 본 문서의 사양에 따라 프론트 엔드 페이지를 개발해야 합니다. 본 문서에 잘못된 내용이나 부적절한 내용이 있으면 제때에 신고해 주시기 바랍니다.

기본 지침:

웹 표준을 준수하고 시맨틱한 HTML을 사용하여 구조, 성능 및 동작이 분리되어 있어 페이지 호환성이 뛰어납니다. 성능을 높이려면 서버 부하를 최대한 줄이고 가장 빠른 구문 분석 속도를 보장하기 위해 코드가 간결하고 명확해야 합니다. 이미지 파일은 모두 c7128686262bbafdcfde88ac5e289b8a에 합의된 디렉토리에 보관됩니다;; 2. HTML 파일 이름 지정: 영어 이름 지정, 접미사 .htm 동시에 해당 인터페이스 초안을 동일한 디렉토리에 배치합니다. , 인터페이스 초안의 이름이 중국어인 경우 백엔드에서 기능을 추가할 때 해당 페이지를 쉽게 찾을 수 있도록 html 파일과 동일한 이름으로 변경하세요.

3.css 파일 이름: 영어 이름, 접미사 .css. 공유 base.css, 홈페이지 index.css, 기타 페이지는 실제 모듈 요구사항에 따라 이름이 지정됩니다.

4. Js 파일 이름 지정: 영어 이름 지정, 접미사 Common.js, 기타 페이지 이름은 실제 모듈에 따라 지정됩니다. 모듈 요구 사항.

html 사양으로 작성됨

1. 문서 유형 선언 및 인코딩: html5 선언 유형 ee0dc2e45343235b4504da422b131f55, 들여쓰기 작성 시 명확한 계층 구조를 얻으려면 IDE를 사용하세요.

2. 특별한 상황을 제외하고 스타일 파일은 93f0f5c25f18dab9d176bd4f6de5d30e...9c3bca370b5104690d9ef395f2c5f8d1 파일은 페이지 하단에 링크되어야 합니다.

3. 스타일 파일이나 JavaScript 파일을 가져올 때 기본 유형 선언을 생략하고 다음과 같이 작성해야 합니다.

4. JS 라이브러리 파일을 가져오는 경우 파일 이름에는 라이브러리 이름과 버전 번호가 포함되어야 하며 jquery-1.4.1.min.js와 같은 압축 버전인지 여부가 플러그인을 소개해야 합니다. 파일 이름 형식은 라이브러리 이름 + 플러그입니다. - jQuery.cookie.js와 같은 이름

5. 모든 코딩은 xhtml 표준을 따르며, 태그 및 속성은 소문자와 밑줄이 그어진 숫자로 구성되어야 하며, br(<)을 포함하여 모든 태그는 닫혀 있어야 합니다. ;br />), hr(231a563c997aa9e3e0ae614bd16728b0) 등; 속성 값은 큰따옴표로 묶어야 합니다.

6. HTML 요소에 사용자 정의 속성을 추가해야 할 경우 먼저 기본 속성이 있는지 여부를 고려해야 합니다. 그렇지 않은 경우 "data-"를 사용할 수 있습니다. "를 접두사로 사용하여 사용자 정의 속성을 추가하고 "data:" 및 기타 명명 방법을 사용하지 마세요.

7. 중요도에 따른 제목과 같은 시맨틱 HTML h* 사용(동일한 페이지에 하나의 h1만 있을 수 있음) , 단락 태그에는 p를 사용하고, 목록에는 ul을 사용하세요. 블록 수준 요소는 인라인 요소에 중첩될 수 없습니다. 8. 24d1e2eac3566597a260e618e7c94f54 52f26fb90be40ecbd193e7d1c637d1daXXX에 오신 것을 환영합니다. 귀하의 사용자 이름은58e8931e914f2217a9bbef374d0115e4username94b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3< /p>다음 코드로 완전히 바꿀 수 있습니다. : aee08300b2632d3c41e1beb93089f983e388a4556c0f65e1904146cc1a846beeXXX에 오신 것을 환영합니다. 사용자 이름은 45a2772a6b6107b401db3c9b82c049c2username54bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3< ;/p>

9입니다. 링크 주소는 리디렉션을 피해야 합니다. 예: href="http://itaolun.com/", 즉 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. 特殊符号使用: 尽可能使用代码替代: 比如 23e65ded356aa426d214d9d9ddf28734(>) & 空格( ) & ?(?) 等等;

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中已建好框架的页面代码c48f9669ad11dcb912c034824b11399d94b3e26ee717c64999d7867364b1b4a3中加入新的p元素,

按a命名法则: c48f9669ad11dcb912c034824b11399d18b7ce3e5d699256d55a2ec3453b3846…94b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3,

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

按b命名法则: c48f9669ad11dcb912c034824b11399dd87c8ec98d2f3b25b4de9f81496ce4d2…94b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3,

样式写法: .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自身属性及样式继承原理减少代码量, 比如:

ce431427e58695622f8e7ff623fdbae125edfb22a4f469ecb59f1190150159c6这儿是标题列表45a2772a6b6107b401db3c9b82c049c22010-09-1554bdf357c58b8a65c66d7c19c8e4d114929d1f5ca49e04fdcb27f9465b944689

定义

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. 杜绝使用54b3dbf4873c98ff5f3255df674c261f 兼容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. 모든 이름은 영문 소문자 || _를 조합해야 하며, 공백은 포함할 수 없습니다. || 또한 시작 부분과 끝 부분의 이름을 밑줄로 구분합니다(예: ad_left01.gif || btn_submit.gif

4). 시각적 효과를 보장하면서 로딩을 줄입니다.

5. 반투명 PNG 이미지를 사용하지 마세요(사용하는 경우 CSS 사양의 관련 지침을 참조하세요).

6. 페이지 http 요청을 줄이되, 반드시 해당 스프라이트 psd 소스 이미지에 참조선을 그려서 img 디렉토리에 저장하세요. 형식 1b0e78f253901dd72913016565d1b430, '–'는 주석의 시작과 끝에만 사용할 수 있으며 주석 텍스트 영역에는 배치할 수 없습니다.

2. 여기에 주석이 있습니다*/

3. 자바스크립트 주석, 한 줄 주석은 '//한 줄 주석입니다'를 사용하고, 여러 줄 주석은 /* 여러 줄 주석입니다*/를 사용합니다. ; | Vim, 자신의 취향에 따라 선택할 수도 있지만 다음 원칙을 따라야 합니다.

1. 코드를 '그리기' 위해 IDE의 보기 모드를 사용하지 마세요. Dw 내장과 같은 관련 기능 코드를 생성하는 IDE

3. 들여쓰기와 같은 코딩 형식이 필요합니다.

테스트 도구: FireFox & IE6 & IE7 & IE8 초기 개발에서는 Opera & Chrome & Safari를 추가하세요.

권장 테스트 순서: FireFox–>IE7–>IE8–>IE6–>Opera–>Chrome–>Safari. Firebug 및 IE Tab Plus 플러그인 설치를 권장합니다.

기타 사양

1 CSS 재사용률을 높이고 반복 개발을 피하기 위해 개발 과정에서 분담에 따라 페이지를 엄격하게 작성합니다. ;

2. 중복되는 코드를 줄이고 누구나 이해할 수 있는 코드를 작성하세요. 사용자와 서버를 생각해보세요.

위 내용은 html, CSS 및 JavaScript 프런트엔드 명명 규칙에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!