web前端规范之CSS模块化

前端模块化和组件化的理解
1.前端模块化
前端模块化是一种将程序模块以文件夹形式在不同层次、以及大
小范围内整合的技术，它是前端技术开发者所采用的一种组织手段。

用前端模块化的思想，可以将一个基于JavaScript的项目进行组织，
可以使程序代码更加简洁、更加易于理解，也可以提升开发效率，减
少维护成本，更好地协作以及重用。

一般来说，前端模块化会由以下三个步骤组成：
（1）封装模块：将相关的使用行为封装在一个对象、函数或文件中，便于反复使用，并且保证稳定的效果；
（2）组合模块：将多个封装的模块组合在一起，以形成更大的模块；
（3）发布模块：将多个组合模块在一起，发布到线上CND服务或
公共的模块仓库中，便于调用。

2.前端组件化
前端组件化是前端开发的发展趋势，也是构建前端应用的基础。

组件化简而言之是把一个完整应用分解成若干个独立的可重用的组件，从而实现高度的复用和可组合。

使用组件化开发可以大大减少前端开
发的开发周期，使其工作的更加高效，也可以减少代码冗余，使其更
容易维护。

有了组件化的开发模式，可以明确每个模块的职责，使代码更容易阅读，也可以提升程序与设计的灵活性，可以节省开发时间，也可以提高架构的稳定性和维护性。

由于组件化可以使整个系统从功能之间、组件之间、多人开发之间更加模块化、可靠。

总之，在前端开发中，前端组件化既可以提升程序的可读性，又能有效提高开发效率，并为多人的协作和重用性创造条件，是当下被广泛使用的前端开发方式。

前端编码规范1.一般规范以下章节列举了一些可应用在 HTML, JavaScript 和 CSS/SCSS 上的通用规则。

1.1文件/资源命名`在 web 项目中，所有的文件名应该都遵循同一命名约定。

以可读性而言，减号（-）是用来分隔文件名的不二之选。

同时它也是常见的 URL 分隔符（i.e.///blog/my-blog-entry or ///images/big-black-background.jpg），所以理所当然的，减号应该也是用来分隔资源名称的好选择。

请确保文件命名总是以字母开头而不是数字。

而以特殊字符开头命名的文件，一般都有特殊的含义与用处（比如 compass[1]中的下划线就是用来标记跳过直接编译的文件用的）。

资源的字母名称必须全为小写，这是因为在某些对大小写字母敏感的操作系统中，当文件通过工具压缩混淆后，或者人为修改过后，大小写不同而导致引用文件不同的错误，很难被发现。

还有一些情况下，需要对文件增加前后缀或特定的扩展名（比如 .min.js, .min.css），抑或一串前缀（比如 3fa89b.main.min.css）。

这种情况下，建议使用点分隔符来区分这些在文件名中带有清晰意义的元数据。

1.2协议不要指定引入资源所带的具体协议。

当引入图片或其他媒体文件，还有样式和脚本时，URLs 所指向的具体路径，不要指定协议部分（http:, https:），除非这两者协议都不可用。

不指定协议使得 URL 从绝对的获取路径转变为相对的，在请求资源协议无法确定时非常好用，而且还能为文件大小节省几个字节。

1.3文本缩进一次缩进2个空格或者一个tab。

1.4注释注释是你自己与你的小伙伴们了解代码写法和目的的唯一途径。

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

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

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

当你写注释时一定要注意：不要写你的代码都干了些什么，而要写你的代码为什么要这么写，背后的考量是什么。

由于项目中‎编写文档结‎构、编写CSS‎的人员较多‎，并与程序员‎协同工作，所以就需要‎统一开发规‎范，根据XHT‎M l和CS‎S编织的规‎范和大多人‎的习惯，整理了以下‎针对本项目‎的一个简单‎的开发规范‎：一、CSS文件‎及样式命名‎1、CSS文件‎命名规范全局样式：globa‎l.css；框架布局：layou‎t.css；字体样式：font.css；链接样式：link.css；打印样式：print‎.css；2、CSS样式‎命名规范本人建议：用字母、_号工、-号、数字组成，必须以字母‎开头，不能为纯数‎字。

为了开发后‎样式名管理‎方便，大家请用有‎意义的单词‎或缩写组合‎来命名，让同事一看‎就明白这样‎式大概是哪‎一块的，这样就节省‎了查找样式‎的时间，例如：头部样式用‎h eade‎r，头部左边，可以用he‎a der_‎l eft或‎h eade‎r_l,还有如果是‎列结构的可‎以这样——box _1of3‎(三列中的第‎一列)，box_2‎o f3 (三列中的第‎二列)、box _3of3‎(三列中的第‎三列)，其它的我就‎不一一举例‎了，大家按以上‎规律去命名‎就好。

下面列出一‎些常用的命‎名单词方便‎大家使用：（以后大家工‎作过程中慢‎慢把自己积‎累的单词都‎共享出来，那大家的命‎就会更加统‎一了，就不会有一‎义多词的情‎况了。

）容器：conta‎i ner/box头部：heade‎r主导航：m ainN‎a v子导航：subNa‎v顶导航：topNa‎v网站标志：logo大广告：banne‎r页面中部：m ainB‎o dy底部：foote‎r菜单：menu菜单内容：m enuC‎o nten‎t子菜单：subMe‎n u子菜单内容‎：subMe‎n uCon‎t ent搜索：searc‎h搜索关键字‎：keywo‎r d搜索范围：range‎标签文字：tagTi‎t le标签内容：tagCo‎n tent‎当前标签：tagCu‎r rent‎/curre‎n tTag‎标题：title‎内容：conte‎n t列表：list当前位置：curre‎n tPat‎h侧边栏：sideb‎a r图标：icon注释：note登录：login‎注册：regis‎t er列定义：colum‎n_1of‎3(三列中的第‎一列)colum‎n_2of‎3(三列中的第‎二列)colum‎n_3of‎3(三列中的第‎三列)二、id和cl‎a ss的使‎用及区别我们知道在‎样式表定义‎一个样式的‎时候，可以定义i‎d也可以定‎义clas‎s，例如：ID方法：#test{color‎:#33333‎3}，在页面中调‎用<div id="test">内容<div>CLASS‎方法：.test{color‎:#33333‎3}，在页面中调‎用<div class‎="test">内容<div>id一个页‎面只可以使‎用一次，class‎可以多次引‎用。

CSS样式书写顺序及规范作者:WangMin格⾔:努⼒做好⾃⼰喜欢的每⼀件事在项⽬中，⼤部分前端程序员都没有按照良好的CSS书写规范来写CSS代码，每次写css样式都是⽤到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对⽹页加载代码的影响。

后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的⼀种⽅式。

下⾯就开始学习吧！！各种类型属性的书写顺序及作⽤书写顺序优先级第⼀定位属性：position display float left top right bottom overflow clear z-index优先级第⼆⾃⾝属性：width height padding border margin background优先级第三⽂字样式：font-family font-size font-style font-weight font-varient color优先级第四⽂本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow line-height优先级第五css3中新增属性：content box-shadow border-radius transform……书写顺序的作⽤减少浏览器reflow（回流），提升浏览器渲染dom的性能。

解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构构建render树：DOM树和CSS树合并之后形成的render树。

布局render树：有了render树，浏览器已经知道那些⽹页中有哪些节点，各个节点的css定义和以及它们的从属关系，从⽽计算出每个节点在屏幕中的位置。

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

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

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

本规范文档将涵盖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. 注释规范。

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

HTML 5 新增标签：
W3C标准-结构标准
canvas
header
nav section aside footer article
progress ruby
mark time
video audio
figure
figcaption
前端技术
HTML—— WEB应用的基石
HTML 4 与 HTML 5 结构区别
WEB前端
刘梅花 2014.12.24
WEB前端
前端简介 前端技术
前端工具
前端简介
前端是什么？
HTML/CSS/JavaScript…… 与后端相比
前端客户端环境不可预知 代码开源 数据无法隐藏 更关注页面性能和用户体验
前端简介
前端主要职能：把网站界面更好的呈现给用户
前端技术
前端技术
W3C 标准
前端技术
性能及安全
性能——页面内容优化
• 尽量减少HTTP请求次数 8. 使用GET来完成AJAX请求 9. 对于静态内容使用无cookie请求 • 合理利用并行 1. 尽量避免重定向 2. 慎用iframe 3. 把样式表放在顶部 4. 脚本放到样式后面加载 • 节约系统消耗 1. 避免使用CSS表达式 2. 避免使用滤镜
步通信对象等操作上存在很多兼容性问题。
前端技术
性能及安全
网络安全：OWASP（Open Web Application Security Project）开放式Web应用程序 安全项目。网址：（中文站）。
性能：基础原则（比如Yahoo得12条性能准则），性能检测工具（YSlow，Page Speed，showslow）。 页面内容优化 服务器优化
前端技术

CSSModules⽤法教程学过⽹页开发就会知道，CSS 不能算编程语⾔，只是⽹页样式的⼀种描述⽅法。

为了让 CSS 也能适⽤软件⼯程⽅法，程序员想了各种办法，让它变得像⼀门编程语⾔。

从最早的Less、SASS，到后来的PostCSS，再到最近的 CSS in JS，都是为了解决这个问题。

本⽂介绍的有所不同。

它不是将 CSS 改造成编程语⾔，⽽是功能很单纯，只加⼊了局部作⽤域和模块依赖，这恰恰是⽹页组件最急需的功能。

因此，CSS Modules 很容易学，因为它的规则少，同时⼜⾮常有⽤，可以保证某个组件的样式，不会影响到其他组件。

零、⽰例库我为这个教程写了⼀个，包含六个Demo。

通过它们，你可以轻松学会CSS Modules。

⾸先，克隆⽰例库。

$ git clone https:///ruanyf/css-modules-demos.git然后，安装依赖。

$ cd css-modules-demos $ npm install接着，就可以运⾏第⼀个⽰例了。

$ npm run demo01打开浏览器，访问http://localhost:8080，查看结果。

其他⽰例的运⾏⽅法类似。

⼀、局部作⽤域CSS的规则都是全局的，任何⼀个组件的样式规则，都对整个页⾯有效。

产⽣局部作⽤域的唯⼀⽅法，就是使⽤⼀个独⼀⽆⼆的class的名字，不会与其他选择器重名。

这就是 CSS Modules 的做法。

下⾯是⼀个React组件。

import React from 'react'; import style from './App.css'; export default () => { return ( <h1 className={style.title}> HelloWorld </h1> ); };上⾯代码中，我们将样式⽂件输⼊到style对象，然后引⽤style.title代表⼀个class。

防护策略：阿里前端开发规范中提出了多种防护策略，包括但不限于使用 CSRF 令牌、验证请求来源、使用 HTTPS 等。
CSRF 令牌：在用户登录成功后，服务器会生成一个 CSRF 令牌，并将该令牌与用户的身份信息关联起来。在 用户进行敏感操作时，服务器会验证该令牌是否与用户的身份信息匹配，以防止攻击者伪造用户身份。
YOUR LOGO
THANK YOU
汇报人：雪
汇报时间：20XX/01/01
开发环境：用于 开发人员编写和 测试代码，与生 产环境隔离
测试环境：用于 测试人员验证代 码质量和功能， 与生产环境隔离
生产环境：用于 线上运行应用， 与开发环境和测 试环境隔离
预发布环境：用 于模拟生产环境， 进行上线前的最 后检查和调整
部署脚本编写
脚本语言：使用 shell或Python等 脚本语言编写部 署脚本
可维护性规范
07
文档编写要求
文档结构清晰，易于理解 文档内容准确，无错误信息 文档语言简洁明了，避免冗余 文档版本控制，保持更新
异常处理机制
异常分类：明确异常类型，如网络异常、数据异常等 异常捕获：使用try-catch语句捕获异常 异常处理：根据不同异常类型采取相应的处理措施，如重试、回滚等 日志记录：记录异常信息，便于排查和定位问题
命名规范
使用有意义的英文单词或缩写，避免使用拼音或无意义的字母组合 变量名和方法名使用小写字母和下划线组合，例如：user_name 类名使用驼峰命名法，首字母大写，例如：UserService 常量名全部大写，单词之间用下划线分隔，例如：MAX_RETRIES
代码格式化
使用Prettier进行代码格式化
日志记录规范
日志级别：定 义了不同级别 的日志，如调 试、信息、警

Web应用前端性能优化浅析摘要:对于不断发展的Web应用,性能优化如同逆水行舟,不进则退。

一般可以从前端和后端的优化来改善Web站点性能。

本文侧重通过对前端性能的分析,为Web站点前端性能优化提供了理论依据和一般的优化策略,并讲述了一些用于B/S系统前端性能优化的常见规则和有效方法。

关键词:Web应用前端性能优化1 HTTP请求优化减少页面的HTTP请求次数是首先要做的一步,这是改良初次访问用户等待时间的最重要的方法。

1.1 图片地图在站点导航中,最常见的应用就是超链接,它通常带有一些文本,并被关联到目标URL上。

一种更为没关的选择是将超链接关联到图片上,例如在导航栏或按钮中。

如果是以这种形式关联多个带有超链接的图片,使用图片地图既能减少HTTP请求,又无需改变页面外观感受。

图片地图(Image Map)允许你在一个图片上关联多个URL,目标URL的选择取决于用户单击了图片上的哪个位置。

获取图片地图的时间比获取为每个超链接使用分离图片的导航时间快很多,这是因为图片地图减少了HTTP请求。

1.2 内联图片内联图片是指在Web页面中包含图片但无需任何额外的HTTP 请求,它允许将小块数据内联为立即数,数据就在其URL自身之中,格式如下:data:[&lt;mediatype&gt;[;base64],&lt;data&gt;示例:&lt;img src=”data:image/gif;base64, R01god1HD=wAEEADs” &gt;data: URL模式大多数用于内联图片,也可以用在任何需要指定URL的地方,如:script和a标签中。

1.3 合并脚本和样式表大多数Web站点,都会用到JavaScript脚本和层叠样式表,通常把脚本和样式表分别保存在独立的.js和.css文件中,然后在Web页面中引用。

为了符合模块化的开发原则,通常不会将JavaScript代码和CSS 代码放在同一个文件中。

后盾网 人人做后盾
: /docs/#downloads
后盾网 人人做后盾
seaJs
使用方法很简单 : 首先引入sea.js文件。 然后使用seajs.config方法设置一下模块的路径配置。 最后使用e方法调用一下主模块就可以啦。
require exports module.exports exports
define
后盾网 人人做后盾
require
require 用来获取指定模块的接口，相当于把文件引入进当前文件来。 require可以引入jquery这种框架文件 :
也可以引入自己定义的模块，调用里面的方法和属性 :
后盾网 人人做后盾

seaJs
后盾网 2011-2016
在Web应用程序的用户体验越来越被重视的今天，前端开发的 地位也上升到了前所未有的高度，而随之而来的也有更多的挑战。 为了将前端开发者繁重的工作变得简单，框架应运而生。 Sea.js是一款国产前端框架，作者为玉伯（王保平），是淘宝 前端类库 KISSY、前端模块化开发框架SeaJS、前端基础类库Arale 的创始人。 Sea.js是一个很纯粹小巧的模块加载器，它只解决一个问题： 前端代码的模块化。通过Sea.js，可以将大量JavaScript代码封装成 一个个小模块，然后轻松实现模块的加载和依赖管理。
seaJs.config
后盾网 人人做后盾
paths 设置路径，方便跨目录调用。
seaJs.config
后盾网 人人做后盾
use
use方法用来在页面中加载一个或多个模块，加载完之后可以执行 回调函数，在回调函数里可以使用模块里的方法。当然回调函数也可以 省略不用。
e
后盾网 人人做后盾

前端开发技术中的CSS样式调整技巧CSS（层叠样式表）是前端开发中不可或缺的一部分，它用于控制网页的布局和样式。

样式调整是前端开发中非常重要的技巧之一，下面是一些常用的CSS样式调整技巧，帮助开发者更好地掌握CSS。

1.盒模型理解和应用：盒模型是CSS布局的基础，了解盒模型的原理对于样式调整非常重要。

CSS盒模型由内容区、内边距、边框和外边距组成，设置盒模型的width和height属性可以控制内容区的大小，padding属性调整内边距，border属性调整边框样式和宽度，margin属性调整外边距。

2.使用浮动布局：浮动布局是一种常用的样式调整技巧，可以使元素在页面上左右浮动。

通过设置元素的float属性为left或right，元素就可以浮动到页面的左侧或右侧，然后通过clear属性清除浮动，避免影响其他元素的布局。

3. 弹性布局（Flexbox）的应用：弹性布局是CSS3中引入的一种灵活的布局模式，可以快速实现复杂的布局要求。

通过设置容器的display属性为flex，可以使子元素自动排列成一行或一列，然后通过设置justify-content和align-items属性调整子元素的对齐方式和排列方式。

4.居中元素的技巧：在实际开发中，经常需要实现元素水平居中或垂直居中的效果。

可以使用text-align属性将文本内容水平居中；使用margin属性为auto实现水平居中；使用绝对定位和transform属性实现元素的垂直居中。

5.使用伪类和伪元素：伪类和伪元素是CSS中非常强大的选择器，可以用来选取页面上一些特定状态的元素或一些元素的特定部分。

例如，可以使用:hover伪类选择鼠标悬停的元素，使用::before和::after伪元素创建插入内容，从而实现一些特殊的样式效果。

6.使用CSS预处理器：CSS预处理器（如Less和Sass）可以提高CSS代码的可维护性和可复用性。

通过使用变量、嵌套、混合等特性，可以更方便地组织和调整CSS样式。

前端开发工程师的岗位要求20个岗位要求1：1、至少2年以上前端开发工作经验，掌握目前流行的框架react/vue2、精通Web前端技术，包括HTML5、CSS、Javascript，深刻理解W3C标准及可用性；3、准确进行代码构建，实现产品所需交互效果，并能封装JS 组件；4、代码风格规范、效率高，有很好的复用性，可以封装插件以提升开发效率；5、能够快速准确地定位和解决各种前端问题；6、较好的表达沟通能力，责任心强，学习能力优秀。

岗位要求2：1. 精通各种Web前端技术（HTML/CSS/Javascript等)，熟练跨浏览器、跨终端的开发；2. 有大型网站前端架构、前端性能、可访问性、可维护性等方面的实践经验；3. 至少熟练使用一门非前端脚本语言（如：NodeJS /Python/PHP等），并有项目经验；4. 技术视野广阔，有主导前端技术方案设计的能力和经验；5. 个性乐观开朗，逻辑性强，善于和各种背景的人合作，有一定的项目管理、团队管理经验；6. 有开源项目的成功经验。

岗位要求3：1、具备扎实的专业基础知识，熟悉基本的数据结构和算法，深刻了解web 原理；2、熟练掌握JavaScript、HTML、CSS 等原生前端基础技术，熟悉相关规范；3、熟练掌握React / Vue 等常用前端框架以及配套社区项目（antd / umi / webpack / redux / rxjs / …）;4、关注业界，持续学习，逻辑缜密，有创新意识；5、具备强烈的技术进取心，有良好的沟通与合作精神，拥有优秀的问题分析及解决能力；加分项：6、同时具备PC/无线端的开发能力，有成功的中大型Web 产品、移动应用开发经验；7、有优秀的独立开源项目或深度参与过业界知名的开源项目；8、有区块链领域相关沉淀，具备区块链相关知识。

岗位要求4：1. 2年以上Web前端开发经验；2. 扎实的前端基础，包括但不限于HTML/CSS/JavaScript等相关知识；3. 熟悉前端性能优化，熟练使用各种调试工具；4. 有Vue.js/React/AngularJS等前端框架实践经验，并了解其中原理；5. 有webpack/Gulp/Grunt等前端工具使用经验；6. 熟悉java编程语言7. 有复杂用户界面与交互应用开发经验，注重界面细节；8. 有Git使用经验；9. 有良好的代码风格和编程习惯；10. 具备较强沟通能力、逻辑思维能力、抗压能力，团队合作意识强；岗位要求5：1.3年以上前端开发经验，本科及以上学历2.至少熟练运用一种React/Vue前端框架并了解其原理，对CSS3，HTML5，JavaScript、Typescript等有全面深入的理解。

css规范⽂档CSS书写顺序*{/*显⽰属性*/displaypositionfloatclearcursor…/*盒模型*/marginpaddingwidthheight/*排版*/vertical-alignwhite-spacetext-decorationtext-align…/*⽂字*/colorfontcontent/*边框背景为什么要把 boder和background放在最后的原因是修改的频率会较之前的频繁，放在最后查看起来⽅便，哈哈。

*/ borderbackground}下表顺序为从上到下，从左到右：========================display || visibilitylist-style : list-style-type || list-style-position || list-style-imagepositiontop || right || bottom || leftz-indexclearfloatwidthmax-width || min-widthheightmax-height || min-heightoverflow || clipmargin : margin-top || margin-right || margin-bottom || margin-leftpadding : padding-top || padding-right || padding-bottom || padding-leftoutline : outline-color || outline-style || outline-widthborderbackground : background-color || background-image || background-repeat || background-attachment || background-position colorfont : font-style || font-variant || font-weight || font-size || line-height || font-familyfont : caption | icon | menu | message-box | small-caption | status-bartext-overflowtext-aligntext-indentline-heightwhite-spacevertical-aligncursorCSS命名规则：⼀．⽂件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；　链接样式：link.css；　打印样式：print.css；主要的 master.css专栏 columns.css主题 themes.css主要的 master.css模块 module.css基本共⽤ base.css表单 forms.css补丁 mend.css　⼆．页⾯结构容器: container页头：header内容：content页⾯主体：main页尾：footer栏⽬：column页⾯外围控制整体布局宽度：wrapper左右中：left right center　三．导航导航：nav主导航：mainbav⼦导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu⼦菜单：submenu摘要: summary四．功能标志：logo⼴告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加⼊：joinus状态：status按钮：btn滚动：scroll标签页：tab⽂章列表：list提⽰信息：msg当前的: current⼩技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyrightContainer div #container 容器Layout #layout 布局Header or banner div #head, #header 页头部分Footer div #foot, #footer 页脚部分Navigation list #nav 主导航Sub-navigation list #subNav ⼆级导航Menu #menu 菜单Sub Menu #submenu ⼦菜单Left or right side columns #sidebar_a, #sidebar_b 左边栏或右边栏Main div #main 页⾯主体Tag #tag 标签Message #msg #message 提⽰信息Tips #tips ⼩技巧Vote #vote 投票Friend Link #friendlink 友情连接Title #title 标题Summary #summary 摘要Search input #searchInput 搜索输⼊框Search output #search_output 搜索输出和搜索结果相似Search #search 搜索Search bar #searchBar 搜索条Search results #search_results 搜索结果Copyright information #copyright 版权信息brand #branding 商标branding-logo #logo LOGOSite information #siteinfo ⽹站信息Copyright information etc. #siteinfoLegal 法律声明Designer or other credits #siteinfoCredits 信誉Join us #joinus 加⼊我们Partnership opportunities #partner 合作伙伴Services #service 服务Regsiter #regsiter 注册Arrow arr/arrow 箭头Little #little 标题Website map #sitemap ⽹站地图List #list 列表Home page #homepage ⾸页Sub page subpage ⼆级页⾯⼦页⾯Toolbar #tool, #toolbar ⼯具条Next pulls #drop 下拉Next pulls menu #dorpmenu 下拉菜单Status #status 状态Container div #container 容器Header or banner div #header 页头部分Main or global navigation div #mainNav 主导航Menu #menu 菜单Sub Menu #submenu ⼦菜单Left or right side columns #sidebarA, #sidebarB 左边栏或右边栏Main div #main 页⾯主体Content div #content 内容部分The main content area #contentMain 主要内容区域Footer div #footer 页脚部分Tag #tag 标签Message #msg #message 提⽰信息Tips #tips ⼩技巧Vote #vote 投票Friend Link #friendlink 友情连接Title #title 标题Summary #summary 摘要Sub-navigation list #subNav ⼆级导航Search input #searchInput 搜索输⼊框Search output #searchOutput 搜索输出和搜索结果相似Search #search 搜索Search results #searchResults 搜索结果Copyright information #copyright 版权信息brand #branding 商标branding-logo #brandingLogo LOGOSite information #siteinfo ⽹站信息Copyright information etc. #siteinfoLegal 法律声明Designer or other credits #siteinfoCredits 信誉Join us #joinus 加⼊我们Partnership opportunities #partner 合作伙伴Services #service 服务Regsiter #regsiter 注册Status #status 状态Products .products 产品Products prices .productsPrices 产品价格Products description .productsDescription 产品描述Products review .productsReview 产品评论Editor's review .editorReview 编辑评论New release .newsRelease 最新产品Publisher .publisher ⽣产商Screen shot .screenshot 缩略图FAQ .faqs 常见问题Keyword .keyword 关键词Blog .blog 博客Forum .forum 论坛五class的命名:(1)颜⾊:使⽤颜⾊的名称或者16进制代码,如.red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }(2)字体⼤⼩,直接使⽤"font+字体⼤⼩"作为名称,如.font12px { font-size: 12px; }.font9pt {font-size: 9pt; }(3)对齐样式,使⽤对齐⽬标的英⽂名称,如.left { float:left; }.bottom { float:bottom; }(4)标题栏样式,使⽤"类别+功能"的⽅式命名,如.barnews { }.barproduct { }/*=====主导航=====*/#mainMenu {width:100%;height:30px;background:url(images/mainMenu_bg.jpg) repeat-x;}#mainMenu ul li {float:left;line-height:30px;margin-right:1px;cursor:pointer;}/*=====主导航结束=====*/9、⿏标⼿势：在XHTML标准中，hand只被IE识别，当需要将⿏标⼿势转换为“⼿形”时，则将“hand”换为“pointer”，即“cursor:pointer;”10．注释书写规范1、⾏间注释：直接写于属性值后⾯，如：.search{border:1px solid #fff;/*定义搜索输⼊框边框*/background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/}2、整段注释：分别在开始及结束地⽅加⼊注释，如：/*=====搜索条=====*/.search {border:1px solid #fff;background:url(../images/icon.gif) no-repeat #333;}/*=====搜索条结束=====*/3．协助注释⾮作者维护时所加⼊的表⽰修改时间、修改⼈等标识信息。

scss 模块化样式写法SCSS（Sassy CSS）是CSS的一种扩展，它提供了许多便利的写法和功能，其中包括模块化样式的写法。

在SCSS中，模块化样式可以通过以下几种方式实现：1. 使用嵌套：SCSS允许样式的嵌套，这样可以更清晰地表示出样式之间的层级关系。

例如：.container {。

width: 100%;.header {。

font-size: 20px;}。

.content {。

padding: 20px;}。

}。

2. 使用变量：SCSS支持变量，可以将颜色、字体等重复使用的数值定义为变量，方便统一管理和修改。

例如：$primary-color: #336699;$secondary-color: #993366;.button {。

background-color: $primary-color;color: $secondary-color;}。

3. 使用混合器（Mixin）：混合器可以将一组样式定义为一个可重用的代码块，可以带参数，增加了样式的灵活性。

例如：@mixin border-radius($radius) {。

-webkit-border-radius: $radius;-moz-border-radius: $radius;border-radius: $radius;}。

.box {。

@include border-radius(10px);}。

4. 使用继承：SCSS支持样式的继承，可以减少重复的样式代码。

例如：.error {。

border: 1px solid #ff0000;color: #ff0000;}。

.error-message {。

@extend .error;font-size: 14px;}。

总的来说，SCSS提供了丰富的功能和语法，可以帮助我们更好地组织和管理样式代码，提高了样式的可维护性和可复用性。

当然，在使用SCSS的过程中，也需要注意避免嵌套层级过深、过度使用混合器等可能导致样式复杂和混乱的情况。