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. 注释规范。

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

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。

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 代码放在同一个文件中。