前端规范CSS规范

合集下载

前端代码规范文档

前端代码规范文档前端代码规范文档一、命名规范1. HTML/CSS命名规范- 使用小写字母和连字符（-）作为单词分隔符；- 尽量避免使用缩写，除非是广泛接受的缩写；- 使用有意义的命名，不使用无意义的命名；- 使用统一的命名方式来表示特殊类型的元素（例如：头部、侧边栏等）；2. JavaScript命名规范- 使用驼峰命名法（camelCase）；- 使用有意义的命名来描述变量、函数或类的作用；- 避免使用单个字符的命名，除非是临时变量；- 使用全大写的命名方式来表示常量；二、缩进和空格规范1. 使用4个空格来进行缩进；2. 在括号前后留一个空格；3. 在运算符前后留一个空格；4. 在函数名和参数列表之间留一个空格；三、注释规范1. 使用注释来解释代码的功能和用途；2. 对于复杂的代码块或关键算法，应提供详细的注释；3. 注释应该是清晰明了的，避免使用不恰当的术语或缩写；4. 重要的注释可以使用大写字母或星号来标记；四、代码风格规范1. 使用一致的缩进和空格；2. 合理使用换行符，避免一行代码过长；3. 尽量避免使用行尾的空格或制表符；4. 使用一致的括号风格，例如在函数或语句块的开头和结尾都使用大括号；5. 使用分号来结束语句；6. 使用合理的命名方式来描述变量、函数和类的作用；7. 避免使用全局变量，使用局部变量或封装变量的方式来控制变量的作用范围；8. 避免使用多层嵌套的条件语句，可以使用条件判断的方法来简化代码；9. 使用恰当的函数和类来封装可重用的代码；五、代码结构规范1. 尽量避免大而复杂的函数，使用小而简单的函数来实现功能；2. 模块化代码，将相关联的函数和类放在同一个文件中；3. 合理使用空行来分隔不同的代码块；4. 将页面的结构和样式分离开来，使得HTML文件更加简洁和易于维护；5. 对于重要的功能块，使用代码块注释来标记开头和结尾；六、代码审查规范1. 对新提交的代码进行审查，确保其符合代码规范；2. 对代码中的错误和潜在问题进行识别和修复；3. 鼓励团队成员进行代码审查和互相学习，提高代码质量；4. 定期审核项目中的代码，找出不符合规范的代码并进行修正。

前端规范手册

前端开发规范手册一、规范目的1.1 概述.....................................................................................................................................。

1二、文件规范2.1一般规范 (1)2.2 css 书写规范 (2)2.3 html书写规范 (6)2.4 JavaScript书写规范 (10)一、规范目的1.1 概述为提高团队协作效率, 便于前端后期优化维护, 输出高质量的代码, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发.二、文件规范2.1 一般规范以下章节列举了一些可应用在 HTML, JavaScript 和 CSS 上的通用规则。

2.2.1文件/资源命名文件名称统一用并且只能用小写的英文字母、数字或下划线的组合，其中不得包含汉字、空格和特殊字符，文件命名需要基本符合语意化；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。

所有的文件名应该都遵循同一命名约定2.2.2文件/资源命名一次缩进两个空格。

推荐2.2.3文件/资源命名注释是你自己与你的小伙伴们了解代码写法和目的的唯一途径。

特别是在写一些看似琐碎的无关紧要的代码时，由于记忆点不深刻，注释就变得尤为重要了。

编写自解释代码只是一个传说，没有任何代码是可以完全自解释的。

而代码注释，则是永远也不嫌多。

1.html注释: 注释格式, '--'只能在注释的始末位置,不可置入注释文字区域;2.css注释: 注释格式/*这儿是注释*/;3.JavaScript注释, 单行注释使用'//这儿是单行注释' ,多行注释使用/* 这儿有多行注释*/;2.2.4文件/资源命名公共文件需放到public公共包，对应的文件放到对应于css，js，images文件夹中2.2.5关注点分离这里的关注点主要指的是：信息（HTML 结构）、外观（CSS）和行为（JavaScript）。

阿里前端开发规范

阿里前端开发规范阿里前端开发规范包括代码、命名、HTML、CSS、JavaScript、图片方面的规范。

1. 代码规范：- 使用四个空格缩进，不使用制表符。

- 代码行长度不超过80个字符。

- 使用驼峰命名法，变量和函数名用小写开头，构造函数用大写开头。

- 使用严格相等运算符（===和!==）替代宽松相等运算符（==和!=）。

- 在条件表达式中，使用括号来提高可读性。

- 避免在循环中使用等号赋值（例如，for (var i = 0; i < array.length; i++)）。

- 避免使用eval()函数。

2. 命名规范：- 文件名应该全部小写，可以包含破折号（-）或下划线（_）。

- 文件夹名应该全部小写，可以包含破折号（-）或下划线（_）。

- CSS文件名应该以.css结尾。

- JavaScript文件名应该以.js结尾。

3. HTML规范：- 使用两个空格缩进，不使用制表符。

- 使用双引号而不是单引号作为属性值的引号。

- 在自定义属性中使用小写字母和破折号（-）。

- 为所有非自闭合标签使用闭合标签。

- 避免在HTML标签中使用行内样式。

4. CSS规范：- 使用两个空格缩进，不使用制表符。

- 使用小写字母和破折号（-）作为选择器和属性名的命名方式。

- 为每个选择器之间使用空行分隔。

- 使用简写属性来减少代码量。

- 使用预处理器（如Less或Sass）来编写CSS。

5. JavaScript规范：- 使用两个空格缩进，不使用制表符。

- 使用分号作为语句的结束符号。

- 避免使用全局变量。

- 避免使用with语句。

- 使用模块化的开发方式，避免全局作用域污染。

6. 图片规范：- 使用有意义的命名来描述图片内容。

- 使用适当的格式和压缩技术来减小图片文件大小。

- 将页面上的图片引用写成相对路径。

以上是阿里前端开发规范的一些主要内容。

在实际开发中，遵循这些规范可以提高代码的可读性和可维护性，使团队成员之间更容易协同工作。

前端命名规范

前端命名规范前端命名规范是一种约定俗成的规则，旨在保证代码的可读性和维护性，使团队成员能够更加高效地协作开发。

下面是一些常见的前端命名规范：1. 文件和文件夹命名规范- 文件名应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：index.html, main.css。

- 文件夹名也应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：images, scripts。

2. HTML/CSS命名规范- HTML和CSS中的类名和ID名应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：header-wrapper, main-content。

- 避免使用无意义的命名，应该根据元素的作用和意义来命名。

3. JavaScript命名规范- 变量和函数名应该使用驼峰式命名法，即第一个单词的首字母小写，后面的单词的首字母大写，例如：firstName, getUserInfo。

- 常量名应该使用全大写字母，多个单词之间使用下划线“_”分隔，例如：MAX_NUM, API_URL。

- 类名应该使用帕斯卡命名法，即所有单词的首字母都大写，例如：Person, UserService。

4. 图片命名规范- 图片命名应该使用有意义的名词或描述性的名词短语，多个单词之间使用连字符“-”分隔，例如：logo.png, slide-image.jpg。

5. URL命名规范- URL路径应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：/news-list, /contact-us。

6. Git分支和提交规范- Git分支名应该使用有意义的名词或描述性的名词短语，多个单词之间使用连字符“-”分隔，例如：feature/login,hotfix/bug-fix。

- Git提交消息应该简明扼要地描述所做的更改，可以包括关键词和操作，例如：Add login form validation, Fix broken link。

WEB前端开发代码使用要求规范

WEB前端开发代码使用要求规范1.编码规范- 使用标准的HTML、CSS和JavaScript语法。

-使用缩进和空格来提高代码的可读性。

-使用注释来解释代码的目的和功能。

2.文件和目录结构规范-使用有意义的文件和目录命名，方便其他开发人员寻找代码。

-在项目中使用统一的目录结构，例如将HTML文件存放在一个文件夹中，将样式文件存放在另一个文件夹中，以此类推。

3.HTML规范- 避免在HTML中直接写入样式和脚本代码，应将样式和脚本代码分离到对应的CSS和JavaScript文件中。

4.CSS规范-使用适当的选择器，避免过多的嵌套。

-避免使用内联样式，应将样式写在CSS文件中，以提高可维护性。

- 使用合适的样式命名规则，例如使用BEM(Block-Element-Modifier)命名规则，或其他约定俗成的命名规则。

5. JavaScript规范-使用合适的变量和函数命名，提高代码的可读性。

-避免使用全局变量，应将变量和函数封装在模块中。

- 使用严格模式(`use strict`)，避免不规范的语法和行为。

- 避免使用`eval`和`with`等不安全的代码。

-在循环中使用合适的终止条件，避免死循环。

6.代码结构规范-代码应具有良好的组织结构，例如使用模块化的方式来组织代码。

-尽量遵循单一职责原则，每个函数和类应该只负责一件事情。

-提取重复的代码块，封装成函数或类，以提高代码的复用性。

-不要写过长的函数或类，应该根据需要进行拆分和重构。

7.注释规范-使用注释来解释代码的目的和功能，特别是代码的复杂部分。

-注释应该清晰、简洁，方便其他开发人员理解代码。

-避免使用无用的注释，注释应该随着代码的变化而更新。

总之，遵守WEB前端开发代码使用要求规范能够提高代码的质量和开发效率，减少错误和维护成本。

同时，还能提高团队合作的效率，方便其他开发人员理解和修改代码。

因此，在进行WEB前端开发时应该积极遵守和推崇相关规范。

前端开发规范文档

前端开发规范文档一、概述。

本文档旨在规范前端开发工作，统一团队成员的开发风格，提高代码质量和可维护性。

在前端开发中，规范是非常重要的，它可以让团队成员之间的合作更加顺畅，代码更加易读易懂。

本规范文档将涵盖HTML、CSS、JavaScript等前端开发的相关规范，希望每位开发人员都能认真遵守。

二、HTML规范。

1. 文件命名规范。

文件名应使用小写字母，单词之间可以使用连字符“-”连接，例如，index.html、about-us.html。

文件名应简洁明了，不使用无意义的数字或字符。

2. 代码缩进规范。

使用两个空格进行代码缩进，不使用Tab键。

3. 标签规范。

标签名应使用小写字母。

标签属性值应使用双引号。

4. 注释规范。

在需要注释的地方使用<!--->进行注释。

5. 其他规范。

应尽量避免使用行内样式和行内脚本。

尽量减少标签的嵌套层级，保持HTML结构的简洁性。

三、CSS规范。

1. 文件组织规范。

将CSS文件统一放置在一个文件夹中，不要将CSS文件散落在各个目录中。

可以根据模块或页面的不同，将CSS文件拆分为多个文件，使用@import进行引入。

2. 类名规范。

类名应使用小写字母，单词之间可以使用连字符“-”连接，例如，header-nav、footer-content。

类名应简洁明了，不使用无意义的数字或字符。

3. 属性顺序规范。

CSS属性应按照一定的顺序书写，例如，布局定位属性、盒模型属性、文字排版属性、视觉效果属性等。

4. 其他规范。

尽量避免使用!important，除非必要情况下。

尽量使用缩写属性，减少代码量。

四、JavaScript规范。

1. 变量命名规范。

变量名应使用驼峰命名法，例如，myName、isShow。

变量名应简洁明了，不使用无意义的单个字母。

2. 代码缩进规范。

使用两个空格进行代码缩进，不使用Tab键。

3. 注释规范。

在需要注释的地方使用//进行单行注释，使用/ /进行多行注释。

前端开发知识：前端开发的工作流程和规范

前端开发知识：前端开发的工作流程和规范前端开发工作流程和规范是指前端开发人员在进行Web应用程序的开发时应遵循的一系列步骤和标准。

这些步骤和标准旨在确保开发出的Web应用程序能够在各种不同的浏览器和平台上保持一致的外观和功能性能，并且能够在不同的开发环境中进行有效的协作和管理。

前端开发工作流程前端开发的工作流程可以大致分为如下几个步骤：1.计划和设计阶段在这个阶段，开发人员需要与客户进行沟通，了解他们的需求和期望，以及设计师给出的设计方案。

这个过程中需要考虑到Web应用程序的目的、目标用户、多平台兼容性和可扩展性，以及如何实现所期望的外观和功能。

2.开发阶段在这个阶段，前端开发人员需要完成设计师提供的设计方案，并开发出Web应用程序所需的HTML、CSS和JavaScript代码。

这个过程中需要考虑到代码的可读性、可重用性和可维护性，以及如何优化代码以提高性能和可访问性。

3.测试和调试阶段在这个阶段，前端开发人员需要测试Web应用程序在各种不同的浏览器和操作系统上的表现，以确保它能提供一致的用户体验和功能性能。

同时需要进行调试和故障排除，以处理可能出现的各种问题。

4.上线和维护阶段在这个阶段，前端开发人员需要将Web应用程序部署到生产环境中，并对其进行监视和维护，以确保它能够稳定运行并且时刻满足用户的需求和期望。

同时需要定期更新和优化代码，以保持它的可维护性和可扩展性。

前端开发规范为了保证Web应用程序的质量和可维护性，前端开发人员需要遵循一系列开发规范。

以下是一些常见的前端开发规范：1. HTML规范HTML标记应该使用小写，并且要求所有的闭合标签都必须关闭。

同时，应该避免使用标签的属性，如果必须使用，应该使用双引号而不是单引号。

此外，HTML标记应该符合标准，避免使用过时的标记。

2. CSS规范CSS规范包括命名规范、选择器规范、布局规范、字体规范等方面。

命名规范应该使用语义化的类名、ID名和属性名。

前端开发规范文档

前端开发规范文档规范目的为提高团队协作效率，便于后端开发人员添加功能及前端后期优化维护，输出高质量的代码，特制定该文档。

本规范文档一经确认, 前端开发人员必须按本文档规范进行前端开发。

本文档如有不对或者不合适的地方请及时提出。

经讨论决定后方可更改。

基本准则符合web标准，语义化html，结构表现行为分离，兼容性优良。

页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。

一、html 文件命名及编写规范1、命名规则采用小写英文字母|| _的组合命名，菜单名_功能名称，后缀.html。

如：manage_list.html（管理列表）、manage_add.html（新增）、manage_edit.html（修改）、manage_detail.html（详情）。

同时将页面放在其对应的模块划分目录中。

2、编写规范：(1)文档类型声明及编码统一为html5声明类型“<!DOCTYPE html>”;(2)编码统一为<meta charset="utf-8" />, 书写时利用IDE实现层次分明的缩进;(3)区域块、功能组件以及需要标注的地方，插入注释。

(4)在布局文件结构时，应遵循语义化标签（该用p不要用div、该用ul、li不要用p，h标签应根据标题层级合理利用）、代码结构简单、清晰明了，少用标签、少套结构（一段结构布局中 1个标签能解决的不要用2个，套2层结构能解决的不要套3层）的基本原则。

代码标签、结构嵌套示例：目标效果图代码结构嵌套<ul><li><h4>罗田县九资河徐冲药材</h4><img src=”***.jpg”><div><h3>茯苓</h3><p>小丁</p><p class=”color_red”>32元/公斤</p></div></li></ul>代码分析：根据目标效果图，实现的代码部分别使用了ul/li /h4/ img /div /h3/ p 这些标签。

前端开发规范文档

前端开发规范文档前端开发是指在网站、网页或移动端应用的开发过程中，负责用户界面的设计和开发的工作。

一个良好的前端开发规范可以提高团队的工作效率、降低错误率，并且方便后期的维护和扩展。

本文将介绍一些常见的前端开发规范。

一、HTML规范2.使用正确的缩进和格式：使用合适的缩进和换行，使HTML代码易于阅读和维护。

4. 使用语义化的类名和id名：类名和id名应该能够准确描述元素的作用和功能，避免使用无意义的名称。

二、CSS规范2. 避免使用!important：尽量避免使用!important来覆盖样式，应优先考虑调整选择器的优先级。

3.使用合适的样式复用方式：避免重复的代码，可以使用类名或父子选择器来复用样式。

4. 使用合适的尺寸单位：根据具体情况选择合适的尺寸单位，如px、em、rem等。

5. 使用CSS预处理器：可以使用Sass、Less或Stylus等CSS预处理器来提高开发效率和代码的可维护性。

三、JavaScript规范1. 使用严格模式：在JavaScript代码的开头使用"use strict"启用严格模式，以减少错误和提高代码质量。

2.使用合适的命名规范：变量、函数和类名应该具有描述性的名称，遵循驼峰命名法或下划线分隔符。

3.避免全局变量污染：尽量避免使用全局变量，可以通过使用模块化的方式来封装代码，或者使用命名空间。

4. 避免使用eval和with：避免使用eval函数和with语句，它们可能会引起安全问题和性能问题。

5.使用合适的循环和控制结构：使用合适的循环和控制结构来提高代码的可读性和性能，避免过多嵌套的层级。

四、代码管理规范1. 使用版本控制工具：使用Git等版本控制工具来管理代码的版本，方便团队协作和代码的追踪和回滚。

2.编写有意义的提交信息：每次提交代码时，应编写有意义的提交信息，描述本次提交的内容和目的。

3.周期性地进行代码审查：定期进行代码审查，发现和修复潜在的问题，提高代码质量和稳定性。

WEB前端开发规范

WEB前端开发规范WEB前端开发规范WEB前端开发规范目录1、规范目的2、基本准则3、文件规范4、文件规范5、html书写规范6、css书写规范7、JavaScript书写规范8、图片规范9、注释规范10、开发及测试工具约定11、其他规范12、CSSHack1规范目的为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,同是为网站有一个更好的前端架构，网站的发展及未来打好一个基础。

本文档如有不对或者不合适的地方请提出来,基本准则符合web标准,语义化html,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度.文件规范3.1、html,css,js,images文件均归档至约定的目录中;23 3.2、html文件命名:命名以中文命名，依实际模块命名，如果同一模块以_&title&_来组合命名,以方便添加功能时查找对应页面，团结里的相互理解。

例如：我的好股网里的TAB命名大模块名称_小模块的titile.html我的好股网_关注的微博.html3.3、css文件命名:英文命名,后缀.css.初始化样式reset.css，其他样式依实际模块页面需求命名，共用样式一般以模块考虑来划分命名,如有改版修改的css文件可以采用&_时间日期例如：微博改版版块名称_时间日期.cssnew_blog_1212.css4.4、Js文件命名:英文命名,后缀.js.共用common.js,其他依实际模块需求命名.5.5、图片命名:4html书写规范4.1、文档类型声明及编码:统一用;编码统一为。

目的:统一性和网站提高开发合作效率。

4.2、非特殊情况下样式文件必须外链至之间;非特殊情况下JavaScript文件必须外链至页面底部之前;目的:网站的优化。

4.3、所有编码均遵循xhtml标准,标签&属性&属性命名必须由小写字母及下划线数字组成,且所有标签必须闭合,包括br(),hr()等;属性值必须用双引号包括;目的:更加符合web标准(w3c),也有利于seo。

前端开发规范及注意事项

前端开发规范及注意事项一、CSS编码规范1、单行形式书写风格的排版约束1.1）每一条规则的大括号 { 前后加空格1.2）多个selector共用一个样式集，则多个selector必须写成多行形式1.3）每一条规则结束的大括号 } 前加空格1.4）属性名冒号之前不加空格，冒号之后加空格1.5）每一个属性值后必须添加分号; 并且分号后空格例如：div.test { width: 100px; height: 200px; }a:focus,a:hover { position: relative; right: 1px; }2、多行形式书写风格的排版约束2.1）每一条规则的大括号 { 前添加空格2.2）多个selector共用一个样式集，则多个selector必须写成多行形式2.3）每一条规则结束的大括号} 必须与规则选择器的第一个字符对齐2.4）属性名冒号之前不加空格，冒号之后加空格2.5）属性值之后添加分号;3、其他规范3.1）使用单引号，不允许使用双引号3.2）如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照webkit- / -moz- / -ms- / -o- / std的顺序进行添加，标准属性写在最后，并且属性名称要对齐，例如：div.animation-demo {-webkit-animation: mymove 5s infinite;-moz-animation: mymove 5s infinite;-o-animation: mymove 5s infinite;animation: mymove 5s infinite;}4、命名规则书写规范4.1）规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _4.2）命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合4.3）命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS 命名规则4.4）不允许通过1、2、3等序号进行命名4.5）避免class与id重名4.6）id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id4.7）class用于标识某一个类型的对象，命名必须言简意赅。

Web前端开发规范文档(cssjavascript)

最近开始着手网站的改版，因为是团队协作，所有需要注意很多地方，也为了让我们的代码更加规范特收集了一些Web前端开发规范规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.文件规范1. html, css, js, images文件均归档至<系统开发规范>约定的目录中;2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面;3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.;4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名. html书写规范1. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPE html>; 编码统一为<meta charset="gbk" />, 书写时利用IDE实现层次分明的缩进;2. 非特殊情况下样式文件必须外链至<head>...</head>之间;非特殊情况下JavaScript文件必须外链至页面底部;3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下:<link rel="stylesheet" href="..." /><style>...</style><script src="..."></script>4. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;5. 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括br (<br />), hr(<hr />)等; 属性值必须用双引号包括;6. 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等; 需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以"data-"为前缀来添加自定义属性，避免使用"data:"等其他命名方式;7. 语义化html, 如标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;8. 尽可能减少div嵌套, 如<div class="box"& gt;<div class="welcome">欢迎访问XXX, 您的用户名是<div class="name">用户名</div></div></div>完全可以用以下代码替代: <div class="box"><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p></div>;9. 书写链接地址时, 必须避免重定向，例如：href="/", 即须在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中已建好框架的页面代码<div id="mainnav"></div>中加入新的div元素,按a命名法则: <div id="mainnav"><div class="firstnav">...</div></div>,样式写法: #mainnav .firstnav{.......}按b命名法则: <div id="mainnav"><div class="main_firstnav">...</div></div>,样式写法: .main_firstnav{.......}7. css属性书写顺序, 建议遵循: 布局定位属性-->自身属性-->文本属性-->其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: display & list-style & position（相应的 top,right,bottom,left）＆ float & clear ＆ visibility ＆ overflow；自身属性主要包括:width & height & margin & padding & border & background;文本属性主要包括：color & font & text-decoration & text-align & vertical-align & white- space & 其他 & content;我所列出的这些属性只是最常用到的, 并不代表全部;8. 书写代码前, 考虑并提高样式重复使用率;9. 充分利用html自身属性及样式继承原理减少代码量, 比如:<ul class="list"><li>这儿是标题列表<span>2010-09- 15</span></ul>定义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;} , b ase.css文件中我会初始化表格样式)13. 杜绝使用<meta http-equiv="X-UA-Compatible" content="IE=7" />兼容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. 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下.注释规范1. html注释: 注释格式 , '--'只能在注释的始末位置,不可置入注释文字区域;2. css注释: 注释格式 /*这儿是注释*/;3. JavaScript注释, 单行注释使用'//这儿是单行注释' ,多行注释使用 /* 这儿有多行注释 */;开发及测试工具约定建议使用Aptana || Dw || Vim , 亦可根据自己喜好选择, 但须遵循如下原则:1. 不可利用IDE的视图模式'画'代码;2. 不可利用IDE生成相关功能代码, 比如Dw内置的一些功能js;3. 编码必须格式化, 比如缩进;测试工具: 前期开发仅测试FireFox & IE6 & IE7 & IE8 , 后期优化时加入Opera & Chrome & Safari;建议测试顺序: FireFox-->IE7-->IE8-->IE6-->Opera-->Chrome-->Safari, 建议安装firebug及IE Tab Plus插件.其他规范1. 开发过程中严格按分工完成页面, 以提高css复用率, 避免重复开发;2. 减小沉冗代码, 书写所有人都可以看的懂的代码. 简洁易懂是一种美德. 为用户着想, 为服务器着想...。

前端开发设计规范文档

前端开发设计规范文档1.设计概述（200字）前端开发设计规范文档旨在为前端开发人员提供一套统一的设计规范，确保开发出的网页和应用具有高可读性、易维护性和跨浏览器兼容性。

本文档将涵盖HTML、CSS和JavaScript编码规范、文件结构规范、命名规范、注释规范等方面的内容。

2.文件结构规范（200字）为了确保项目的可维护性和可扩展性，文件结构规范起到了至关重要的作用。

在项目中，应该按照功能、模块或页面将文件进行划分，并使用合理的命名方式对文件进行命名。

目录结构应该清晰明了，新人可以迅速找到所需文件，并且易于扩展和维护。

3.HTML编码规范（300字）4.CSS编码规范（300字）CSS编码规范旨在统一样式代码的书写风格，方便团队成员的合作和代码维护。

应该遵循缩进、空格、换行等方面的规则，并为选择器、属性和值选择合适的命名方式。

另外，应该避免使用全局选择器、!important和浮动布局等容易引起样式冲突的属性和技术。

5. JavaScript编码规范（300字）JavaScript编码规范对于代码的可读性、可维护性和可扩展性有着重要的影响。

代码应该遵循统一的缩进和空格约定，并采用语义化的命名方式。

应该避免使用全局变量和隐式全局变量，同时对函数进行适当的封装和模块化处理。

另外，应该注重错误处理和代码注释，以便他人能够理解和维护代码。

6.命名规范（200字）良好的命名规范有助于团队成员理解代码的意图和结构。

在命名时应使用有意义的名词和动词，避免使用缩写和拼音，并使用统一的命名方式。

对于变量、函数、类和文件命名，应该遵循一定的命名约定，以提高代码的可读性和可维护性。

7.注释规范（200字）总结（100字）前端开发设计规范文档为前端开发人员提供了一套统一的设计规范，包括文件结构、HTML、CSS、JavaScript编码规范、命名规范和注释规范等方面的内容。

遵循这些规范将有助于提高代码的可读性、可维护性和跨浏览器兼容性，提高团队成员之间的合作效率。

CSS前端规范

前端CSS 规范大全本文转载自标点符，文章整理了Web前端开发中的各种CSS规范，包括文件规范、注释规范、命名规范、书写规范、测试规范等。

一、文件规范1、文件均归档至约定的目录中（具体要求以豆瓣的CSS规范为例进行讲解）：所有的CSS分为两大类：通用类和业务类。

通用的CSS文件，放在如下目录中：∙基本样式库/css/core∙通用UI元素样式库/css/lib∙JS组件相关样式库/css/ui业务类的CSS是指和具体产品相关的文件，放在如下目录中：∙读书/css/book/∙电影/css/movie/∙音乐/css/music/∙社区/css/sns/∙小站/css/site/∙同城/css/location/∙电台/css/radio/外联CSS文件适用于全站级和产品级通用的大文件。

内联CSS文件适用于在一个或几个页面共用的CSS。

另外一对具体的CSS进行文档化的整理。

如：∙util-01 reset /css/core/reset.css∙util-02 通用模块容器/css/core/mod.css∙ui-01. 喜欢按钮/css/core/fav_btn.css∙ui-02. 视频/相册列表项/css/core/media_item.css∙ui-03. 评星/css/core/rating.css∙ui-04. 通用按钮/css/core/common_button.css∙ui-05. 分页/css/core/pagination.css∙ui-06. 推荐按钮/css/core/rec_btn.css∙ui-07. 老版对话框/css/core/old_dialog.css∙ui-08. 老版Tab /css/core/old_tab.css∙ui-09. 老版成员列表/css/core/old_userlist.css∙ui-10. 老版信息区/css/core/notify.css∙ui-11. 社区用户导航/css/core/profile_nav.css∙ui-12. 当前大社区导航/css/core/site_nav.css∙ui-13. 加载中/css/lib/loading.css2、文件引入可通过外联或内联方式引入link和style标签都应该放入head中，原则上，不允许在html上直接写样式。

前端技术的标准与规范

前端技术的标准与规范随着Web技术的发展，前端技术已逐渐成为开发领域的重要一环，前端的工具和技术也越来越多。

然而，单靠广泛的技术和工具是远远不够的，一个好的团队和项目都应该有一套完整且严格的标准和规范，来确保开发质量和交付时间。

本文将探讨一些前端技术的标准和规范，以帮助开发人员更好地组织、管理和交付前端项目。

1. HTML规范HTML是网页的基础，也是前端开发的核心语言，因此HTML规范的制定和遵循对于开发者来说至关重要。

以下是一些HTML常规规范：（1）避免使用具有函数功能的HTML标签，如`<font>`、`<center>`等。

（2）标签必须按嵌套层次正确书写。

（3）所有标签必须正确闭合。

（4）代码必须使用小写字母。

（5）class和id命名必须见名知意，不要使用拼音或缩写。

（6）类名和ID名应该使用中横线、下划线或者CamelCase的方式书写，例如：`.main-container`、`#my-id`或者`myClassName`。

（7）尽量不要嵌套过多的元素，在不影响布局的情况下避免使用没必要的容器。

2. CSS规范CSS是CSS规范的核心语言，开发人员需要遵循以下的CSS规范。

（1）所有样式一律采用外部css文件，不要在HTML页面里直接写内联样式，方便维护，减少代码冗余。

（2）每个选择器规则之间应该留一个空格，增加代码可读性。

（3）永远不要使用`!important`，除非确实需要覆盖某些已有样式。

（4）样式命名遵循BEM（Block, Element, Modifier）规范，例如：`.card__header---large`，其中`card`是块，`header`是元素，`large`是修饰符。

（5）用统一的命名规则来统一功能单元、类名的命名，在现有的CSS框架或第三方库中选择一个标准来限制自己的命名，这样就可以为你的网站带来一定的规范性。

（6）当样式表庞大且复杂时，应该尽量对样式进行分类以及分组，方便管理。

前端开发设计规范文档

前端开发设计规范文档前端开发设计规范文档是一个团队或者组织内部制定的一系列规范和指南，用于规范前端开发的设计、编码和实施流程。

以下是一个包含了1200字以上内容的前端开发设计规范文档：一、命名规范1.使用有意义的和描述性的命名，避免使用简单的缩写和字符组合。

2. 使用驼峰命名法（CamelCase）来命名变量、函数和对象，首字母小写。

3.使用大写字母作为常量和枚举的命名。

4.使用独一无二的名称，避免命名冲突和重复。

5.使用清晰的命名来表示元素的用途和功能，避免歧义和困惑。

6.避免使用中文拼音或其他非英文字符作为命名。

二、代码结构1.使用统一的缩进风格，推荐使用4个空格进行缩进。

2.使用合适的注释来解释代码的功能、用途和实现思路，方便他人理解和维护。

3.使用适当的代码分块和模块化来提高可读性和维护性。

4.使用合适的文件和目录结构来组织代码文件和资源文件。

5.使用版本控制系统来管理代码的变更和追踪。

三、HTML规范4.保持HTML代码的简洁和整洁，避免冗余和重复。

5.使用合适的DOCTYPE声明和字符编码。

四、CSS规范1.使用外部样式表文件来管理CSS代码。

2.避免使用行内样式和内嵌样式。

3.使用语义化的类名来描述样式和选取元素，并避免使用ID选择器。

4.使用合适的选择器进行样式选取，避免不必要的层级和嵌套。

5.使用缩写属性和属性值来减少代码量，提高维护性。

6.使用合适的CSS预处理器来提高开发效率和代码质量。

五、JavaScript规范1.使用语义化的变量和函数名，避免使用全局变量污染全局命名空间。

2. 使用严格模式（strict mode）来提高代码的安全性和性能。

3.使用合适的条件语句和循环语句来控制程序流程。

4. 避免使用eval(和with语句来提高代码的安全性。

5.使用合适的错误处理机制来处理异常和错误。

六、性能优化1.使用合适的压缩工具来减小文件体积和加载时间。

2.使用合适的图片格式和压缩工具来减小图片大小。

WEB前端开发代码使用规范

WEB前端代码规范规范目的为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，特制订此文档。

本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。

本文档如有不对或者不合适的地方请及时提出，经讨论决定后方可更改。

基本准则符合web标准；语义化html；结构、表现、行为分离；兼容性优良。

页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。

文件规范2.html文件命名：英文驼峰式命名，文件名.html。

按实际模块需求命名。

3.jsp文件命名：英文驼峰式命名，文件名.jsp。

按实际模块需求命名。

4.css文件命名：英文驼峰式命名，文件名.css。

共用base.css，首页index.css，其他页面按实际模块需求命名。

5.js文件命名：英文驼峰式命名，文件名.js。

共用common.js，其他依实际模块需求命名。

html书写规范1.文档类型声明及编码：统一为html5的声明类型<!DOCTYPE html>；编码统一为<meta charset="utf-8"/>，书写时利用IDE实现层次分明的缩进。

2.非特殊情况下css文件必须在<head>...</head>之间引入，选择link方式引入而非@import形式。

3.非特殊情况下js文件必须在页面底部引入。

4.引入样式文件或JavaScript文件时，须略去默认类型声明，写法如下：10.需要为html元素添加自定义属性的时候，首先要考虑下有没有默认的已有的合适标签去设置，如果没有，须以"data-"为前缀来添加自定义属性，避免使用"data："等其他命名方式。

11.语义化html，如标题根据重要性用h1-h6(同一页面只能有一个h1)，段落标记用p，列表用ul，内联元素中不可嵌套块状元素。

前端开发规范文档

前端开发规范文档引言本文档旨在定义一套前端开发规范，规范涵盖了HTML、CSS和JavaScript的编码规范、文件组织规范以及注释规范等内容。

在项目中，所有前端开发人员必须遵守本文档中的规范，并且在开发过程中互相审查和纠正代码中的违规行为，确保项目的代码质量和可维护性。

一、HTML规范2.使用4个空格作为缩进，而不是制表符或者2个空格。

5.遵循嵌套顺序：结构、表现、行为。

二、CSS规范1.使用4个空格作为缩进，而不是制表符或者2个空格。

2.使用有意义的类名和ID，避免使用无意义的名称。

3.使用层级结构书写选择器，不要过分依赖后代选择器。

4. 使用-来连接多个单词的类名，例如.nav-bar。

5.避免嵌套选择器的层级过多，不超过3层。

6.选择器和属性之间使用空格隔开。

7.属性值为0时不需要单位。

8. 使用!important应该极少使用，并在必要的情况下给出充分的解释。

三、JavaScript规范1.使用4个空格作为缩进，而不是制表符或者2个空格。

2.使用驼峰命名法命名变量、函数和对象。

3. 使用let或const来声明变量，避免使用var。

4.在比较操作符中使用严格相等===和!==。

5.使用模板字符串来拼接字符串。

6.缩写应该避免，命名要具有描述性。

7.避免使用全局变量，尽量将变量的作用域限制在需要的范围内。

四、文件组织规范1. 将不同的文件放在不同的目录下，例如：css/、js/、img/。

2.使用有意义的文件名，避免使用无意义的名称。

3.遵循模块化的原则，将功能相关的代码组织到一个模块中。

4.使用版本控制系统来管理代码的版本和变更。

五、注释规范1.在代码的重要部分和复杂部分添加注释，解释代码的用途和实现方式。

2.使用单行注释//来注释一行代码，使用多行注释/**/来注释多行代码。

3.注释应该与代码对齐，并且清晰明了。

4.注释的语言要简洁明了，不要废话。

结语本文档规范了前端开发的一系列规则和标准，旨在提高团队的协作效率和项目的代码质量。

前端开发设计要求规范文档

前端开发设计规X目录前端开发设计规X (1)一、HTML使用规X (1)、页面文件命名规X (1)、页面head局部书写规X (1)、HTML元素开发规X (2)、HTML元素书写规X (2)、HTML元素命名规X (3)二、WEB页面开发规X (4)、错误跳转页面的处理 (4)、提示信息的处理 (4)、页面的返回 (4)、提交前数据的判断验证 (5)、删除操作 (5)、页面中java代码的使用 (5)、页面布局规X (6)、前台页面尺寸 (6)、标准网页广告图标规格〔参考〕 (6)、页面字体 (7)、字体颜色 (7)三、javaScript开发规X (7)、javaScript文件命名规X： (7)、javaScript开发规X (7)、javaScript书写规X (7)、javaScript命名规X (8)四、css样式规X (10)、css样式文件命名规X (10)、通用样式文件命名规X： (10)、业务类样式文件命名规X (10)、css样式文件命名须知 (11)、css样式文件存放目录规X (11)、css样式定义规X (11)、css样式内容顶部注释规X (11)、css样式内容注释规X (12)、css样式定义规X (12)、css样式常用id的命名 (13)、css样式常用class的命名 (15)、css样式书写规X (15)、css样式排版规X (15)、css样式书写风格规X (16)、css样式属性定义顺序规X (16)、css样式其他规X (17)、css样式Hack的使用 (18)、字体定义规X (18)、css样式检测 (19)、须知事项 (19)、css样式引用规X (19)、媒体内容命名规X (20)五、项目文件存放规X (20)六、前端开发规如此 (20)一、HTML使用规X1.1、页面文件命名规X命名格式为：项目名缩写_所属功能_所属功能子项_... .jsp/html…，文件命名下划线不能超过三个，命名尽量使用简短的能明确明确文件用途的英文或者英文简写。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

来源：NEJ-更好的JS解决方案搬运工：陈晓勉CSS规范- 分类方法CSS文件的分类和引用顺序通常，一个项目我们只引用一个CSS，但是对于较大的项目，我们需要把CSS文件进行分类。

我们按照CSS的性质和用途，将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”，并以此顺序引用（按需求决定是否添加版本号）。

1.公共型样式：包括了以下几个部分：“标签的重置和设置默认值”、“统一调用背景图和清除浮动或其他需统一处理的长样式”、“网站通用布局”、“通用模块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。

2.特殊型样式：当某个栏目或页面的样式与网站整体差异较大或者维护率较高时，可以独立引用一个样式：“特殊的布局、模块和元件及扩展”、“特殊的功能、颜色和背景”，也可以是某个大型控件或模块的独立样式。

3.皮肤型样式：如果产品需要换肤功能，那么我们需要将颜色、背景等抽离出来放在这里。

9.功能类和皮肤类样式为表现化的样式，请不要滥用！以上顺序可以按需求适当调整。

/* 重置 */div,p,ul,ol,li{margin:0;padding:0;}/* 默认 */strong,em{font-style:normal;font-weight:bold;}/* 统一调用背景图 */.m-logo a,.m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;}/* 统一清除浮动 */.g-bdc:after,.m-dimgul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow: hidden;content:'.';}.g-bdc,.m-dimg ul,.u-tab{zoom:1;}/* 布局 */.g-sd{float:left;width:300px;}/* 模块 */.m-logo{width:200px;height:50px;}/* 元件 */.u-btn{height:20px;border:1px solid #333;}/* 功能 */.f-tac{text-align:center;}/* 皮肤 */.s-fc,a.s-fc:hover{color:#fff;}CSS规范- 命名规则使用类选择器，放弃ID选择器ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS，就无法重用。

命名应简约而不失语义/* 反对：表现化的或没有语义的命名 */.m-abc .green2{}.g-left2{}/* 推荐：使用有语义的简短的命名 */.m-list .wrap2{}.g-side2{}分组选择器有时可以代替扩展方法有时候虽然两个同类型的模块很相似，但是你希望他们之间不要有依赖关系，也就是说你不希望使用扩展的方法，那么你可以通过合并选择器来设置共性的样式。

使用本方法的前提是：相同类型、功能和外观都相似，写在同一片代码区域方便维护。

/* 两个元件共性的样式 */.u-tip1,.u-tip2{}.u-tip1 .itm,.u-tip2 .itm{}/* 在分别是两个元件各自的样式 *//* tip1 */.u-tip1{}.u-tip1 .itm{}/* tip2 */.u-tip2{}.u-tip2 .itm{}CSS规范- 代码格式选择器、属性和值都使用小写在xhtml标准中规定了所有标签、属性和值都小写，CSS也是如此。

单行写完一个选择器定义便于选择器的寻找和阅读，也便于插入新选择器和编辑，便于模块等的识别。

去除多余空格，使代码紧凑减少换行。

如果有嵌套定义，可以采取内部单行的形式。

/* 单行定义一个选择器 */.m-list li,.m-list h3{width:100px;padding:10px;border:1px solid #ddd;}/* 这是一个有嵌套定义的选择器 */@media all and (max-width:600px){.m-class1 .itm{height:17px;line-height:17px;font-size:12px;}.m-class2 .itm{width:100px;overflow:hidden;}}@-webkit-keyframes showitm{0%{height:0;opacity:0;}100%{height:100px;opacity:1;}}最后一个值也以分号结尾通常在大括号结束前的值可以省略分号，但是这样做会对修改、添加和维护工作带来不必要的失误和麻烦。

省略值为0时的单位为节省不必要的字节同时也使阅读方便，我们将0px、0em、0%等值缩写为0。

.m-box{margin:0 10px;background-position:50% 0;}使用单引号省略url引用中的引号，其他需要引号的地方使用单引号。

.m-box{background:url(bg.png);}.m-box:after{content:'.';}使用16进制表示颜色值除非你需要透明度而使用rgba，否则都使用#f0f0f0这样的表示方法，并尽量缩写。

.m-box{color:#f00;background:rgba(0,0,0,0.5);}根据属性的重要性按顺序书写只遵循横向顺序即可，先显示定位布局类属性，后盒模型等自身属性，最后是文本类及修饰类属性。

.m-box{position:relative;width:600px;margin:0 auto10px;text-align:center;color:#000;}→显示属性自身属性文本属性和其他修饰display width fontvisibility height text-alignposition margin text-decorationfloat padding vertical-align→显示属性自身属性文本属性和其他修饰clear border white-spacelist-style overflow colortop min-width background如果属性间存在关联性，则不要隔开写。

/* 这里的height和line-height有关联性 */.m-box{position:relative;height:20px;line-height:20px;padding:5px;color:#000;}私有在前，标准在后先写带有浏览器私有标志的，后写W3C标准的。

.m-box{-webkit-box-shadow:0 0 0 #000;-moz-box-shadow:0 0 0 #000;box-shadow:0 0 0 #000;}注释格式：/* 注释文字 */对选择器的注释统一写在被注释对象的上一行，对属性及值的注释写于分号后。

注释内容两端需空格，已确保即使在编码错误的情况下也可以正确解析样式。

在必要的情况下，可以使用块状注释，块状注释保持统一的缩进对齐。

原则上每个系列的样式都需要有一个注释，言简意赅的表明名称、用途、注意事项等。

/* 块状注释文字* 块状注释文字* 块状注释文字*/.m-list{width:500px;}.m-list li{height:20px;line-height:20px;/* 这里是对line-height的一个注释*/overflow:hidden;}.m-list li a{color:#333;}/* 单行注释文字 */.m-list li em{color:#666;}统一Hack方法统一使用“*”和“_”分别对IE7和6进行Hack。

如下代码所示：/* IE7会显示灰色#888，IE6会显示白色#fff，其他浏览器显示黑色#000 */.m-list{color:#000;*color:#888;_color:#fff;}建议并适当缩写值“建议并适当”是因为缩写总是会包含一系列的值，而有时候我们并不希望设置某一值，反而造成了麻烦，那么这时候你可以不缩写，而是分开写。

当然，在一切可以缩写的情况下，请务必缩写，它最大的好处就是节省了字节，便于维护，并使阅读更加一目了然。

缩写方法请查阅css手册。

选择器顺序请综合考虑以下顺序依据：∙从大到小（以选择器的范围为准）∙从低到高（以等级上的高低为准）∙从先到后（以结构上的先后为准）∙从父到子（以结构上的嵌套为准）以下仅为简单示范：/* 从大到小 */.m-list p{margin:0;padding:0;}.m-list p.part{margin:1px;padding:1px;}/* 从低到高 */.m-logo a{color:#f00;}.m-logo a:hover{color:#fff;}/* 从先到后 */.g-hd{height:60px;}.g-bd{height:60px;}.g-ft{height:60px;}/* 从父到子 */.m-list{width:300px;}.m-list .itm{float:left;}选择器等级∙ a = 行内样式style。