关于html:如何高效高质画页面

前沿

目前因各大 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%}

适配

1. 排版须要适配可采纳响应式布局
2. 内容须要等比缩放适配的采纳流体布局
   响应式布局 + 流体布局 = 栅格零碎

html 标签

1. 标签语义化
   a. 在没有 CSS 的状况下，页面也能呈现出很好地内容构造
   b. 有利于 SEO
   c. 更具可读性

2. html 元素周期表
   

   css

   蕴含公共款式（重置款式、原子类、可复用模块款式）、页面款式
   css 命名
   BEM 命名法
   

不举荐的命名：
通用 class 类名(如:.title,.expand,.tips) 如果肯定要用须要限定作用域，防止款式净化