整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

你不可不知的HTML优化技巧,还不抓紧时间收藏

何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置,文件压缩或是调整CSS。

很显然HTML 已经达到了一个瓶颈,尽管它是开发Web 界面必备的核心语言。HTML页面的负载也是越来越重。大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的HTML 元素,页面Size会更大。

如何有效的降低HTML 代码的复杂度和页面元素的数量,本文主要解决了这个问题,从多个方面介绍了如何编写简练,清晰的HTML 代码,能够使得页面加载更为迅速,且能在多种设备中运行良好。

在设计和开发过程中需要遵循以下原则:

  • 结构分离:使用HTML 增加结构,而不是样式内容;
  • 保持整洁:为工作流添加代码验证工具;使用工具或样式向导维护代码结构和格式
  • 学习新语言:获取元素结构和语义标记。
  • 确保可访问: 使用ARIA 属性和Fallback 属性等
  • 测试: 使网站在多种设备中能够良好运行,可使用emulators和性能工具。

HTML,CSS 和JavaScript三者的关系

HTML 是用于调整页面结构和内容的标记语言。HTML 不能用于修饰样式内容,也不能在头标签中输入文本内容,使代码变得冗长和复杂,相反使用CSS 来修饰布局元素和外观比较合适。HTML元素默认的外观是由浏览器默认的样式表定义的,如在Chrome中h1标签元素会渲染成32px的Times 粗体。

三条通用设计规则:

  1. 使用HTML 来构造页面结构,CSS修饰页面呈现,JavaScript实现页面功能。CSS ZenGarden 很好地展示了行为分离。
  2. 如果能用CSS或JavaScript实现就少用HTML代码。
  3. 将CSS和JavaScript文件与HTML 分开存放。这可有助于缓存和调试。

文档结构方面也可以做优化,如下:

  • 使用HTML5 文档类型,以下是空文件:
<!DOCTYPE html>
<html>
<head>
 <title>Recipes: pesto</title>
</head>
<body>
 <h1>Pesto</h1>
 <p>Pesto is good!</p>
</body>
</html>
  • 在文档起始位置引用CSS文件,如下:
<head>
 <title>My pesto recipe</title>
 <link rel="stylesheet" href="/css/global.css">
 <link rel="stylesheet" href="css/local.css">
</head>

使用这两种方法,浏览器会在解析HTML代码之前将CSS信息准备好。因此有助于提升页面加载性能。

在页面底部body结束标签之前输入JavaScript代码,这样有助于提升页面加载的速度,因为浏览器在解析JavaScript代码之前将页面加载完成,使用JavaScript会对页面元素产生积极的影响。

<body>
 ...
 <script src="/js/global.js">
 <script src="js/local.js">
</body>

使用Defer和async属性,脚本元素具有async 属性无法保证会按顺序执行。

可在JavaScript代码中添加Handlers。千万别加到HTML内联代码中,比如下面的代码则容易导致错误且不易于维护:

index.html:

<head>
 ...
 <script src="js/local.js">
</head>
<body onload="init()">
 ...
 <button onclick="handleFoo()">Foo</button>
 ...
</body>

下面的写法比较好:

index.html:

<head>
 ...
</head>
<body>
 ...
 <button id="foo">Foo</button>
 ...
 <script src="js/local.js">
</body>

js/local.js:

init();
var fooButton =
 document.querySelector('#foo');
fooButton.onclick = handleFoo();

验证

优化网页的一种方法就是浏览器可处理非法的HTML 代码。合法的HTML代码很容易调试,且占内存少,耗费资源少,易于解析和渲染运行起来更快。非法的HTML代码让实现响应式设计变得异常艰难。

当使用模板时,合法的HTML代码显得异常重要,经常会发生模板单独运行良好,当与其他模块集成时就报各种各样的错误,因此一定要保证HTML代码的质量,可采取以下措施:

  • 在工作流中添加验证功能:使用验证插件如HTMLHint或SublineLinter帮助你检测代码错误。
  • 使用HTML5文档类型
  • 确保HTML的层次结构易于维护,要避免元素嵌套处于左开状态。
  • 保证添加各元素的结束标签。
  • 删除不必要的代码 ;没有必要为自关闭的元素添加结束标签;Boolean 属性不需要赋值,如果存在则为True;

代码格式

格式一致性使得HTML代码易于阅读,理解,优化,调试。

语义标记

语义指意义相关的事物,HTML 可从页面内容中看出语义:元素和属性的命名一定程度上表达了内容的角色和功能。HTML5 引入了新的语义元素,如<header>,<footer>及<nav>。

选择合适的元素来编写代码可保证代码的易读性:

  • 使用<h1>(<h2>,<h3>…)表示标题,<ul>或<ol>实现列表
  • 注意使用<article> 标签之前应添加<h1>标签;
  • 选择合适的HTML5语义元素如<header>,<footer>,<nav>,<aside>;
  • 使用<p>描述Body 文本,HTML5 语义元素可以形成内容,反之不成立。
  • 使用<em>和<strong>标签替代<i>和<b>标签。
  • 使用<label>元素,输入类型,占位符及其他属性来强制验证。
  • 将文本和元素混合,并作为另一元素的子元素,会导致布局错误,

例如:

<div>Name: <input type="text" id="name"></div>

换种写法会更好:

 1: <div>
 2: <label for="name">Name:</label><input type="text" id="name">
 3: </div>

布局

要提高HTML代码的性能,要遵循HTML 代码以实现功能和为目标,而不是样式。

  • 使用<p>元素修饰文本,而不是布局;默认<p>是自动提供边缘,而且其他样式也是浏览器默认提供的。
  • 避免使用<br>分行,可以使用block元素或CSS显示属性来代替。
  • 避免使用<hr>来添加水平线,可使用CSS的border-bottom 来代替。
  • 不到关键时刻不要使用div标签。
  • 尽量少用Tables来布局。
  • 可以多使用Flex Box
  • 使用CSS 来调整边距等。

CSS

虽然本文讲解的是如何优化HTML,下面介绍了一些使用css的基本技能:

  • 避免内联css
  • 最多使用ID类 一次
  • 当涉及多个元素时,可使用Class来实现。

以上就是本文介绍的优化HTML代码的技巧,一个高质量高性能的网站,往往取决于对细节的处理,因此我们在日常开发中,能够考虑到用户体验,后期维护等方面,则会产生更高效的开发。

者:HXGNMSL来源:CSDN原文:https://blog.csdn.net/HXGNMSL/article/details/89076476

Javascript的历史来源

94年网景公司 研发出世界上第一款浏览器。

95年 sun公司 java语言诞生

网景公司和sun合作。

Javascript ===> javascript

JavaScript和ECMAScript的关系

简单来说ECMAScript不是一门语言,而是一个标准。符合这个标准的比较常见的有:JavaScript、Action Script(Flash中用的语言)

JavaScript的基本结构:

JavaScript的语法:

JavaScript的基础语法

变量的声明及使用

数据类型

运算符

逻辑控制语句

注释

语法规则

变量的声明语法:

var变量名;

例如:

Var num;

然后进行赋值:num = 10;也可以声明时直接赋值:

Var num =10;

在JavaScript中,提供了常用的基本数据类型:

undefined 未定义;

null 空;

string 字符串类型;

boolean 布尔类型;

number 数值类型;

运算符:

算数运算符:+、-、*、/、%、++、–;

比较运算符:>、<、> =、< =、==、!=;

逻辑运算符:&&、||、!;

赋值运算符:=;

逻辑控制语句:

JavaScript的逻辑控制语句也分为两类:条件结构和循环机构。

条件结构

条件机构分为if结构和switch结构:

If…else

Switch

循环结构

JavaScript的循环结构的执行顺序与Java类似,主要包括以下几种结构:

for循环

while循环

do…while循环

for…inx循环

示例:

for(var i=0;i<10;i++){

Document.write(“*”);

}

输出结果:**********

循环中断:

用于循环中断的语句有以下两种:

break.

continue.

与Java用法一样,break是跳出循环,continue是跳入下一次循环。

函数

函数有两种:一种是系统函数,一种是自定义函数

常用的系统函数包括:

parseInt():转换为整数。

parseFloat():转换为浮点型。

isNaN():判断非数字。

Eval():计算表达式值。

自定义函数:

自定义函数的语法

function 函数名(参数1,参数2,…){

…//语句

Return 返回值;//可选

}

函数的调用:

函数的调用方式有以下两种

事件名=函数名(传递的实参值),例如:

“函数名()”

直接使用函数名(传递的实参值),例如:

var recult = add(2,3);

匿名函数

匿名函数的语法

var sumFun=function(num1,num2){

return(nun1,num2);

} ;

在语法中:

var sunFun=function(num1,num2)表示声明一个变量等于某个函数体。

{…};是把整个函数体放在变量的后面,并把末尾添加一个分号。

匿名函数的调用:

由于匿名函数定义的整个语句,可以像赋值一样赋给一个变量进行保存,所以可以使用如下方式调用语法中的匿名函数:

var sum=sumFun(2,3)

BOM概述

使用BOM可以移动窗口,改变状态栏中的文本,执行其他与页面内容不直接相关的动作。它包含的对象主要有以下几种;

Window对象

Window对象是指整个窗口对象,可以通过操作Window对象的属性和方法控制窗口,例如,打开或关闭一个窗口。

History对象

浏览器访问过的历史页面对应History对象,通过History对象的属性和方法实现浏览器的前进或后退的功能。

Location对象

浏览器的地址栏对应Location对象,通过Location对象的属性和方法控制页面跳转。

Document对象

浏览器内的网页内容对应Document对象,通过Document对象的属性和方法,控制页面元素。

Window常用的属性有:

history:有关客户访问过的URL的信息。

location:有关当前URL的信息。

Screen: 有关客户端的屏幕和显示性能的信息。

Window对象常用的方法:

prompt():显示可提示用户输入的对话框。

alert():显示带有一段消息和一个人“确认”按钮的警告框。

confirm():显示带有一段消息以及“确认”按钮“取消”按钮的对话框。

close():关闭浏览器窗口。

open():打开一个新的浏览器窗口,加载给定URL所指定的文档。

setTimeout():用于在指定(以毫秒计)后调用函数或计算表达式。

setTneerval():按照指定的周期 (以毫秒计)数来调用函数或计算表达式。

Window对象常用窗口特征属性

height、width:窗口文档显示区的高度、宽度,以像素计。

left、top:窗口的x坐标y坐标,以像素计。

toolbar:yes|no|1|0:是否显示浏览器的工具栏,默认是yes。

scrollbars =yes|no|1|0:是否显示滚动条,默认是yes。

locationyes|no|1|0:是否显示地址栏,默认是yes。

status|no|1|0:是否添加地址栏,默认是yes。

menubar|no|1|0:是否显示菜单栏,默认是yes。

resizable|no|1|0:窗口是否可调节尺寸,默认是yes。

Window对象的常用事件:

onload:一个页面或一副图像完成加载。

onmouseover:鼠标指针移到某元素之上。

onclick:单击某个对象。

onkeydown:某个键盘按键被按下。

onchange:域的内容被改变。

History对象的方法:

back():加载History对象列表中的上一个URL。

forward():加载History对象列表中的下一个URL。

go():加载History对象列表中的某个具体URL。

Location对象的属性:

host:设置或返回主机名和当前URL的端口号。

hostname:设置或返回当前URL的主机名。

href:设置或返回完整的URL。

Location对象的方法:

reload():重新加载当前文档。

replace():用新的文档替换当前文档。

Document对象常用的属性:

referrer:返回载入当前文档的URL。

URL:返回当前文档的URL。

Document对象的常用方法:

getElementById():返回对拥有指定id的第一个对象的引用。

getElementsByName():返回带有指定名称的对象的集合。

getElementsByTagName():返回带有指定标签名的对象的集合。

write():向文档写文本、HTML表达式代码。

内置对象

系统的内置对象有Date对象、Array对象、String对象和Math对象等。

Date:用于操作日期和时间。

Array:用于在单独的变量名中储存一系列的值。

String:用于支持对字符串的处理。

Math:用于执行数学任务,包含了若干数字常量和函数。

Date对象:

1:创建日期对象

Date对象包含日期和时间两个信息,创建日期对象的基本语法有两种:

创建日期的基本语法1: var 日期实例化=new Date(参数);

创建日期的基本语法2: var 日期实例化=new Date();

Date对象的常用方法:

getDate():从Date对象返回一个月中的某一天,其值介于1到31之间。

getDay():从Date对象返回星期中的某一天,其值介于0到6之间。

getHours():返回Date对象的小时,其值介于0到23之间。

getMinutes():返回Date对象的分钟,其值介于0到59之间。

getSeconds():返回Date对象的秒数,其值介于0到59之间。

getMonth():返回Date对象的月份,其值介于0到11之间。

getFullYear():返回Date对象的年份,其值为4位数。

getTime():返回自某一时刻(2010年1月1日)以来的毫秒数。

DOM概述

什么是DOM

DOM是文档对象的缩写,和语言无关。它提供了访问、动态修改结构文档的接口,W3C制定了DOM规范,主流浏览器都支持。

使用Core DOM操作节点

访问节点:

使用getElement系列方法访问指定节点。

getElementById():返回对拥有指定id的第一个对象的引用。

getElementsByName():返回带有指定名称的对象的集合。

getElementsByTagName():返回带有指定标签名的对象的集合。

使用层次关系访问节点。

parenNode:返回节点的父节点。

firstChild:返回节点的首个节点。文本和属性节点没有父节点,会返回一个空数组,对于元素节点,若是没有子节点会返回null。

lastChild:返回节点的最后一个子节点,返回值同firstChild。

操作节点属性值

CoreDOM的标准方法包括以下两种:

getAttribute(“属性名”):获取属性值。

getAttribute(“属性名”,“属性值”):设置属性值

创建和增加节点:

创建节点

createElement(tagName):按照给定的标签名称创建一个新的元素节点

appendChild(nodeName):向以存在节点列表的末尾添加新的节点。

inserBefore(newNode,oldNode):向指定的节点之前插入一个新的子节点。

cloneNode(deep):复制某个指定的节点。

删除和替换节点

removeChild(node):删除指定的节点。

replaceChild(newNode,oldNode):用其他的节点替换指定的节点。

Table对象的属性和方法

属性:

rows[]:返回包含表格中所有行的一个数组。

rows[]用于返回表格中所有行的一个数组。

方法:

inserRow():在表格中插入一个新行。

deleteRow():从表格中删除一行。

数组

数组是具有相同数据类型的一个或多个值得集合

创建数组的语法:

var 数组名称=new Array(size);

数组的赋值的两种方式:

先声明在赋值

var province = new Array(4);

province[0]=“河北省”;

province[1]=“河南省”;

索引也可以使用标识(字符串),例如:

var province=new Array(4);

province[‘河北省’]=“河北省”;

province[‘河南省’]=“河南省”;

声明时同时初始化

var province=new Array(“河北省”,“河南省”,“湖北省”,“广东省”);

Array对象的常用属性和方法:

属性:

length:设置或返回数组中元素的数目。

方法:

join():把数组的所有元素放入一个字符串,通过一个分隔符进行分割。

sort():对数组的元素进行排序。

家好,我是皮汤。最近业务调整,组内开启了前端工程化方面的基建,我主要负责 CSS 技术选型这一块,针对目前业界主流的几套方案进行了比较完善的调研与比较,分享给大家。

目前整个 CSS 工具链、工程化领域的主要方案如下:

而我们技术选型的标准如下:

- 开发速度快

- 开发体验友好

- 调试体验友好

- 可维护性友好

- 扩展性友好

- 可协作性友好

- 体积小

- 有最佳实践指导

目前主要需要对比的三套方案:

- Less/Sass + PostCSS 的纯 CSS c侧方案

- styled-components / emotion 的纯 CSS-in-JS 侧方案

- TailwindCSS 的以写辅助类为主的 HTML 侧方案

## 纯 CSS 侧方案

### 介绍与优点

> 维护状态:一般

> Star 数:16.7K

> 支持框架:无框架限制

> 项目地址:https://github.com/less/less.js

Less/Sass + PostCSS 这种方案在目前主流的组件库和企业级项目中使用很广,如 ant-design 等

它们的主要作用如下:

- 为 CSS 添加了类似 JS 的特性,你也可以使用变量、mixin,写判断等

- 引入了模块化的概念,可以在一个 less 文件中导入另外一个 less 文件进行使用

- 兼容标准,可以快速使用 CSS 新特性,兼容浏览器 CSS 差异等

这类工具能够与主流的工程化工具一起使用,如 Webpack,提供对应的 loader 如 sass-loader,然后就可以在 React/Vue 项目中建 `.scss` 文件,写 sass 语法,并导入到 React 组件中生效。

比如我写一个组件在响应式各个断点下的展示情况的 sass 代码:

```

.component {

width: 300px;

@media (min-width: 768px) {

width: 600px;

@media (min-resolution: 192dpi) {

background-image: url(/img/retina2x.png);

}

}

@media (min-width: 1280px) {

width: 800px;

}

}

```

或导入一些用于标准化浏览器差异的代码:

```

@import "normalize.css";

// component 相关的其他代码

```

### 不足

这类方案的一个主要问题就是,只是对 CSS 本身进行了增强,但是在帮助开发者如何写更好的 CSS、更高效、可维护的 CSS 方面并没有提供任何建议。

- 你依然需要自己定义 CSS 类、id,并且思考如何去用这些类、id 进行组合去描述 HTML 的样式

- 你依然可能会写很多冗余的 Less/Sass 代码,然后造成项目的负担,在可维护性方面也有巨大问题

### 优化

- 可以引入 CSS 设计规范:BEM 规范,来辅助用户在整个网页的 HTML 骨架以及对应的类上进行设计

- 可以引入 CSS Modules,将 CSS 文件进行 “作用域” 限制,确保在之后维护时,修改一个内容不会引起全局中其他样式的效果

#### BEM 规范

B (Block)、E(Element)、M(Modifier),具体就是通过块、元素、行为来定义所有的可视化功能。

拿设计一个 Button 为例:

```

/* Block */

.btn {}

/* 依赖于 Block 的 Element */

.btn__price {}

/* 修改 Block 风格的 Modifier */

.btn--orange {}

.btn--big {}

```

遵循上述规范的一个真实的 Button:

```

<a class="btn btn--big btn--orange" href="#">

<span class="btn__price"></span>

<span class="btn__text">BIG BUTTON</span>

</a>

```

可以获得如下的效果:

#### CSS Modules

CSS Modules 主要为 CSS 添加局部作用域和模块依赖,使得 CSS 也能具有组件化。

一个例子如下:

```

import React from 'react';

import style from './App.css';

export default () => {

return (

<h1 className={style.title}>

Hello World

</h1>

);

};

```

```

.title {

composes: className;

color: red;

}

```

上述经过编译会变成如下 hash 字符串:

```

<h1 class="_3zyde4l1yATCOkgn-DBWEL">

Hello World

</h1>

```

```

._3zyde4l1yATCOkgn-DBWEL {

color: red;

}

```

CSS Modules 可以与普通 CSS、Less、Sass 等结合使用。

## 纯 JS 侧方案

### 介绍与优点

> 维护状态:一般

> Star 数:35.2K

> 支持框架:React ,通过社区支持 Vue 等框架

> 项目地址:https://github.com/styled-components/styled-components

使用 JS 的模板字符串函数,在 JS 里面写 CSS 代码,这带来了两个认知的改变:

- 不是在根据 HTML,然后去写 CSS,而是站在组件设计的角度,为组件写 CSS,然后应用组件的组合思想搭建大应用

- 自动提供类似 CSS Modules 的体验,不用担心样式的全局污染问题

同时带来了很多 JS 侧才有的各种功能特性,可以让开发者用开发 JS 的方式开发 CSS,如编辑器自动补全、Lint、编译压缩等。

比如我写一个按钮:

```

const Button = styled.button`

/* Adapt the colors based on primary prop */

background: ${props => props.primary ? "palevioletred" : "white"};

color: ${props => props.primary ? "white" : "palevioletred"};

font-size: 1em;

margin: 1em;

padding: 0.25em 1em;

border: 2px solid palevioletred;

border-radius: 3px;

`;

render(

<div>

<Button>Normal</Button>

<Button primary>Primary</Button>

</div>

);

```

可以获得如下效果:

还可以扩展样式:

```

// The Button from the last section without the interpolations

const Button = styled.button`

color: palevioletred;

font-size: 1em;

margin: 1em;

padding: 0.25em 1em;

border: 2px solid palevioletred;

border-radius: 3px;

`;

// A new component based on Button, but with some override styles

const TomatoButton = styled(Button)`

color: tomato;

border-color: tomato;

`;

render(

<div>

<Button>Normal Button</Button>

<TomatoButton>Tomato Button</TomatoButton>

</div>

);

```

可以获得如下效果:

### 不足

虽然这类方案提供了在 JS 中写 CSS,充分利用 JS 的插值、组合等特性,然后应用 React 组件等组合思想,将组件与 CSS 进行细粒度绑定,让 CSS 跟随着组件一同进行组件化开发,同时提供和组件类似的模块化特性,相比 Less/Sass 这一套,可以复用 JS 社区的最佳实践等。

但是它仍然有一些不足:

- 仍然是是对 CSS 增强,提供非常大的灵活性,开发者仍然需要考虑如何去组织自己的 CSS

- 没有给出一套 “有观点” 的最佳实践做法

- 在上层也缺乏基于 styled-components 进行复用的物料库可进行参考设计和使用,导致在初始化使用时开发速度较低

- 在 JS 中写 CSS,势必带来一些本属于 JS 的限制,如 TS 下,需要对 Styled 的组件进行类型注释

- 官方维护的内容只兼容 React 框架,Vue 和其他框架都由社区提供支持

整体来说不太符合团队协作使用,需要人为总结最佳实践和规范等。

### 优化

- 寻求一套写 CSS 的最佳实践和团队协作规范

- 能够拥有大量的物料库或辅助类等,提高开发效率,快速完成应用开发

## 偏向 HTML 侧方案

### 介绍与优点

> 维护状态:积极

> Star 数:48.9K

> 支持框架:React、Vue、Svelte 等主流框架

> 项目地址:https://github.com/tailwindlabs/tailwindcss

典型的是 TailwindCSS,一个辅助类优先的 CSS 框架,提供如 `flex` 、`pt-4` 、`text-center` 、`rotate-90` 这样实用的类名,然后基于这些底层的辅助类向上组合构建任何网站,而且只需要专注于为 HTML 设置类名即可。

一个比较形象的例子可以参考如下代码:

```

<button class="btn btn--secondary">Decline</button>

<button class="btn btn--primary">Accept</button>

```

上述代码应用 BEM 风格的类名设计,然后设计两个按钮,而这两个类名类似主流组件库里面的 Button 的不同状态的设计,而这两个类又是由更加基础的 TailwindCSS 辅助类组成:

```

.btn {

@apply text-base font-medium rounded-lg p-3;

}

.btn--primary {

@apply bg-rose-500 text-white;

}

.btn--secondary {

@apply bg-gray-100 text-black;

}

```

上面的辅助类包含以下几类:

- 设置文本相关: `text-base` 、`font-medium` 、`text-white` 、`text-black`

- 设置背景相关的:`bg-rose-500` 、`bg-gray-100`

- 设置间距相关的:`p-3`

- 设置边角相关的:`rounded-lg`

通过 Tailwind 提供的 `@apply` 方法来对这些辅助类进行组合构建更上层的样式类。

上述的最终效果展示如下:

可以看到 TailwindCSS 将我们开发网站的过程抽象成为使用 Figma 等设计软件设计界面的过程,同时提供了一套用于设计的规范,相当于内置最佳实践,如颜色、阴影、字体相关的内容,一个很形象的图片可以说明这一点:

TailwindCSS 为我们规划了一个元素可以设置的属性,并且为每个属性给定了一组可以设置的值,这些属性+属性值组合成一个有机的设计系统,非常便于团队协作与共识,让我们开发网站就像做设计一样简单、快速,但是整体风格又能保持一致。

TailwindCSS 同时也能与主流组件库如 React、Vue、Svelte 结合,融入基于组件的 CSS 设计思想,但又只需要修改 HTML 上的类名,如我们设计一个食谱组件:

```

// Recipes.js

import Nav from './Nav.js'

import NavItem from './NavItem.js'

import List from './List.js'

import ListItem from './ListItem.js'

export default function Recipes({ recipes }) {

return (

<div className="divide-y divide-gray-100">

<Nav>

<NavItem href="/featured" isActive>Featured</NavItem>

<NavItem href="/popular">Popular</NavItem>

<NavItem href="/recent">Recent</NavItem>

</Nav>

<List>

{recipes.map((recipe) => (

<ListItem key={recipe.id} recipe={recipe} />

))}

</List>

</div>

)

}

// Nav.js

export default function Nav({ children }) {

return (

<nav className="p-4">

<ul className="flex space-x-2">

{children}

</ul>

</nav>

)

}

// NavItem.js

export default function NavItem({ href, isActive, children }) {

return (

<li>

<a

href={href}

className={`block px-4 py-2 rounded-md ${isActive ? 'bg-amber-100 text-amber-700' : ''}`}

>

{children}

</a>

</li>

)

}

// List.js

export default function List({ children }) {

return (

<ul className="divide-y divide-gray-100">

{children}

</ul>

)

}

//ListItem.js

export default function ListItem({ recipe }) {

return (

<article className="p-4 flex space-x-4">

<img src={recipe.image} alt="" className="flex-none w-18 h-18 rounded-lg object-cover bg-gray-100" width="144" height="144" />

<div className="min-w-0 relative flex-auto sm:pr-20 lg:pr-0 xl:pr-20">

<h2 className="text-lg font-semibold text-black mb-0.5">

{recipe.title}

</h2>

<dl className="flex flex-wrap text-sm font-medium whitespace-pre">

<div>

<dt className="sr-only">Time</dt>

<dd>

<abbr title={`${recipe.time} minutes`}>{recipe.time}m</abbr>

</dd>

</div>

<div>

<dt className="sr-only">Difficulty</dt>

<dd> · {recipe.difficulty}</dd>

</div>

<div>

<dt className="sr-only">Servings</dt>

<dd> · {recipe.servings} servings</dd>

</div>

<div className="flex-none w-full mt-0.5 font-normal">

<dt className="inline">By</dt>{' '}

<dd className="inline text-black">{recipe.author}</dd>

</div>

<div class="absolute top-0 right-0 rounded-full bg-amber-50 text-amber-900 px-2 py-0.5 hidden sm:flex lg:hidden xl:flex items-center space-x-1">

<dt className="text-amber-500">

<span className="sr-only">Rating</span>

<svg width="16" height="20" fill="currentColor">

<path d="M7.05 3.691c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.372 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.363-1.118L.98 9.483c-.784-.57-.381-1.81.587-1.81H5.03a1 1 0 00.95-.69L7.05 3.69z" />

</svg>

</dt>

<dd>{recipe.rating}</dd>

</div>

</dl>

</div>

</article>

)

}

```

上述食谱的效果如下:

可以看到我们无需写一行 CSS,而是在 HTML 里面应用各种辅助类,结合 React 的组件化设计,既可以轻松完成一个非常现代化且好看的食谱组件。

除了上面的特性,TailwindCSS 在响应式、新特性支持、Dark Mode、自定义配置、自定义新的辅助类、IDE 方面也提供非常优秀的支持,除此之外还有基于 TailwindCSS 构建的物料库 Tailwind UI ,提供各种各样成熟、好看、可用于生产的物料库:

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1cb983da6f71470b91ac764d14907998~tplv-k3u1fbpfcp-zoom-1.image)

因为需要自定的 CSS 不多,而需要自定义的 CSS 可以定义为可复用的辅助类,所以在可维护性方面也是极好的。

### 不足

- 因为要引入一个额外的运行时,TailwindCSS 辅助类到 CSS 的编译过程,而随着组件越来越多,需要编译的工作量也会变大,所以速度会有影响

- 过于底层,相当于给了用于设计的最基础的指标,但是如果我们想要快速设计网站,那么可能还需要一致的、更加上层的组件库

- 相当于引入了一套框架,具有一定的学习成本和使用成本

### 优化

- Tailwind 2.0 支持 [JIT](https://blog.tailwindcss.com/tailwindcss-2-1 "JIT"),可以大大提升编译速度,可以考虑引入

- 基于 TailwindCSS,设计一套符合自身风格的上层组件库、物料库,便于更加快速开发

- 提前探索、学习和总结一套教程与开发最佳实践

- 探索 styled-components 等结合 TailwindCSS 的开发方式

## 参考链接

- [CSS 工程化发展历程](https://bytedance.feishu.cn/docs/doccnTRF0OZtJMgKuo3y0hIDMbc# "CSS 工程化发展历程")


/ 感谢支持/

以上便是本次分享的全部内容,希望对你有所帮助^_^

喜欢的话别忘了 分享、点赞、收藏 三连哦~

欢迎关注公众号 程序员巴士,来自字节、虾皮、招银的三端兄弟,分享编程经验、技术干货与职业规划,助你少走弯路进大厂。