页面样式开发实战一 —— 页面开发思路

##常见页面结构

首先我们来欣赏几张设计图：

以上图片来自墨刀素材库，感谢原作者，地址：modao.cc/community?t…

看完上面的设计图我们可以发现一些规律，常见的页面结构基本都是上下、左右、层叠（如下图所示）三种设计的结合，如古老的圣杯布局、双飞翼布局（三栏布局）也都是左右布局的演变。

拿到设计图如何下手页面布局？

1.整体划分区块，是上下、左右哪种布局；区块内再进行细分（上下、左右结构）

按照页面的业务功能划分
划分区块后，分析哪块固定宽高，哪块自适应填充等

2.确定页面全局的色调（基础配色）、字体等级、常用class；

.color_primary{}
.color_success{}
.f14{font -size: 14px}
.f16{font -size: 16px}
.f20{font -size: 20px}

3.总结在页面中多次出现的公共的组件，抽为全局组件

开发顺序：整体搭建外层框架 —— 定义色系、字体大小等变量 —— 开发公共组件

常见的排版写法

Flex布局

Grid布局

命名规范の起名太难了

BEM（Block Element Modifier）-- 团队约定

即：块级-元素名-状态动作，按照页面意义来命名，我们使用这种命名方式，这也是element ui的命名方式。

block：模块，名字单词间用 - 连接
element：元素，模块的子元素，以 __ 与 block 连接
modifier：修饰，模块的变体，定义特殊模块，以 -- 与 block 连接

常见的还有其他的命名规则：

OOCSS（面向对象的css），设计与结构分离，样式和具体的开发界面分离，同一个css样式可以用于其他任何地方

<div class="size1of4 bgBlue solidGray mts mlm mrm mbm"></div>
			
样式拆分到每一个组件上
.size1of4 {width: 25%;}
.bgBlue {background:blue}
.solidGray {border: 1px solid #ccc}
.mts {margin-top: 5px}
.mrm {margin-right: 10px}
.mbm {margin-bottom: 10px}
.mlm {margin-left: 10px}

ACSS: Atomic Css(原子化的css)：任何一种样式都定义为一个class
SMACSS：按照布局划分css

我们禁止的做法

本章节主要介绍样式开发中不友好的（我们不建议的写法）

无规划就着急上手开发：开发之前应该坐整个页面的模块规划，和布局排版
层级嵌套太深：开发之前的思路要明确，尽量减少页面元素的层级（这对diff算法也更加友好）
嵌套较深时候，用太多的元素选择器，很容易导致难以维护；如页面包涵多处ul-li,被嵌套多层使用，修改时候难以找到对应的元素：这个时候适当层架增加class能起到更好可读性，利于维护和变更
class命名太随意，没有语义化：【按照上一节我们约定的class起名方式，大家后面就不会发愁了】

reset css 重制样式

为了避免浏览器的api兼容性和margin、padding等box-sizing问题，我们需要做初始化样式的工作。

reset.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

项目通用css基础样式

拿到设计图时，要先约定，划分出项目中通用样式，如下：

base.css

.f14{font -size: 14px}
.f16{font -size: 16px}
.f20{font -size: 20px}

页面样式开发实战之Css思路