无废话网页重构系列——（10）组件结构

主干和栅格是文档的骨骼，内容依赖组件进行呈现。

组件，主要是围绕交互体验对文字、图片、视频、表单等数据信息进行排版设计，以提供可复用、好维护、识别度统一规范的视觉呈现。

框架中会提供丰富的组件，便于快捷开发功能型网页应用；展示型网页建议开发者平时多积累一些常用图文视频组件。

通过module包裹组件，并设置各组件上下间距。

1 2 3 4 5 6 7 8 9

<div class="module"> <header class="module__header"> <h3 class="module__title">模块标题</h3> </header> <main class="module__container"> <!-- Component --> </main> <footer class="module__footer"></footer> </div>

如按钮结构：

1 2	<button class="btn btn-default" type="button">按钮</button> <button class="btn btn-primary btn_large" type="button">按钮</button>

如选项卡组件结构：

1 2 3 4 5 6 7 8 9 10 11 12

<div class="tab"> <ul class="tab__nav"> <li class="tab__trigger tab__trigger_active">trigger 1</li> <li class="tab__trigger">trigger 2</li> <li class="tab__trigger">trigger 3</li> </ul> <div class="tab__panel"> <div class="tab__container tab__container_active">container 1</div> <div class="tab__container">container 2</div> <div class="tab__container">container 3</div> </div> </div>

如手风琴结构：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div class="accordion"> <div class="accordion__panel accordion__panel_active"> <div class="accordion__header">header 1</div> <div class="accordion__container">container 1</div> </div> <div class="accordion__panel"> <div class="accordion__header">header 2</div> <div class="accordion__container">container 2</div> </div> <div class="accordion__panel"> <div class="accordion__header">header 3</div> <div class="accordion__container">container 3</div> </div> </div>

如图文结构：

1 2 3 4 5 6 7 8 9 10 11 12 13

<div class="media-normal"> <div class="media__object"> <a href="#"> <img class="img-responsive" src="http://placeholder.qiniudn.com/220x132/ff9500/000" alt="一张配图" width="width" height="height"> </a> </div> <div class="media__caption"> <h4 class="media__title"><a href="#">一个标题</a></h4> <div class="media__abstract"> <p>一段简要信息</p> </div> </div> </div>

组件嵌套层级不要冗余，有条理，结构及命名要有语义。

（本篇结束）

许可协议：自由转载-保持署名-非商业性使用-禁止演绎 (CC BY-NC-ND 4.0)

By 小可 from https://xinlu.ink/tech/pro-web-reconstruction-10-component.html