前沿
目前因各大UI框架的推出，前端画页面就如搭积木一样简略，然而一些我的项目比拟小或是其余起因，并不需要加载大体积的UI框架，所以还是有须要从0开始画页面的需要，接下来分享一下我是如何画页面的
理解设计
咱们画页面其实是实现设计师想法的过程，设计师是对整个页面UI逻辑最分明的人，所以咱们须要有设计师的思维能力更好的实现页面。
什么是Atomic Design 原子设计
原子设计是一种基于网络设计零碎思维形式的规范性准则。咱们就称它为设计零碎的根底领导实践。分为5个档次
原子是咱们设计中最为根底元素，能够是一种字体，一个色板，一组图标或者一个矩形。
把几个原子组合形成一个分子，比方黑体字、矩形、16号字、蓝色、红色、形成一个按钮。
几个分子形成一个组织，咱们也能够称为组件。组件形成页面框架，最初生成页面。
当扭转原子时，整个体系都会产生变动，同时咱们也能够逐级调整，总之你的每次扭转都会影响到这个零碎，然而它又是放弃一致性的。
设计师是如何遵循原子设计的
设计师首先会定义一个这个的原子面板，定义我的项目应用的色彩，字号，间距，暗影，圆角等
而后再依据这个原子去定义组件，再用组件定义模块，模块再组成一个个的页面。
开发应如何遵循原子设计
首先是开发为什么也要遵循原子设计呢？试想一下当某一天领导说感觉整个页面的间距太大了，那设计师能够通过批改原子里的间距，一键就把所有页面相应的间距给批改了。如果咱们没有遵循原子设计去写代码，那咱们得一个个找到相应的间距的中央去批改。
那开发怎么遵循原子设计呢？话不多说，间接上代码
定义原子变量一一对应设计稿里的原子
// variable.css--brand-primary: #147BD1;--brand-danger: #D11429;--brand-success: #6DC41F;原子化css
// common.css.text-primay {color: var(--brand-primary)}.text-danger {color: var(--brand-danger)}.text-success {color: var(--brand-success)}如果是用的scss或者less等动静css语言，还能够应用循环生存
// backgrounds@each $key, $value in $color-status { .bg-#{$key} { background-color: nth($value, 1); }}在其余css类里应用
.title { color: var(--brand-primary)}在页面上应用
<p class="text-primary">主色文字</p>剖析设计稿
兼容的浏览器、适配要求
不同的兼容要求，跟适配要求会对你抉择的相干技术有影响，比方 flex布局 如果在ie9下就不兼容
设计稿的一致性
剖析设计稿是否遵循了原子设计及一致性
开发
布局
分为3种布局
固定布局: 实用于网页内容不受屏幕大小影响
.container { width: 1200px;}流体布局：实用于网页内容需依据屏幕大小等比缩放
.container { width: 100%; // width: 100vw;}响应式布局: 实用于不同屏幕下，网页内容排版不一样
.container { width: 1200px;}@media screen and (min-width: 768px) { width: 100%}适配
- 排版须要适配可采纳响应式布局
- 内容须要等比缩放适配的采纳流体布局
响应式布局 + 流体布局 = 栅格零碎
html标签
- 标签语义化
a. 在没有CSS的状况下，页面也能呈现出很好地内容构造
b. 有利于SEO
c. 更具可读性 html元素周期表
css
蕴含公共款式（重置款式、原子类、可复用模块款式）、页面款式
css命名
BEM命名法
不举荐的命名：
通用class类名(如:.title,.expand,.tips) 如果肯定要用须要限定作用域，防止款式净化