[笔记] 网页切版直播班 2020 春季班 – 第八周

章节连结

SCSS 随着专案的规模增大,为了方便维护,会开始有内容与容器分离、结构与样式分离,进而模组化的进程。这样的结果,就形成了各种结构设计模式(如 SMACSS、OOCSS、BEM…等)。
hex-school-logo

第八周课程重点

结构设计讨论

从左至右,越发进化。在过程中,你会逐渐抛弃语意化的 class 命名方式,最后每一个页面部分都是由不同的模组所构成。

页面 (page) → 布局 (layout) → 工具 (helper、util) → 格线系统 (Grid) → 模组 (Module, Component)

7+1 SCSS Pattern

https://gist.github.com/rveitch/84cea9650092119527bc

BEM

塑造出自己的风格最为重要。原先定义: __ (区块)– (修饰符)


经验谈

专案执行流程

样式 Reset 初始化 (myerweb or normalize) → 全域设定 (变量、Helper、base、Mixin) → 自行制作格线系统 → 模组化设计

模组化的原因

因为这样可以方便于各个页面做使用(覆用性高),如果真有需要客制化样式,可以特别命名出一个语意化的 class,然后再行更改。

模组化后,能达成 1px 不差的设计嘛?

这点,需要和 UI / UX 设计师高度配合。这样一来,你有机会透过模组化的方式,修改相关的变量细节,达成设计稿的效果。

Class 命名

尽量使用小驼峰式命名法,因为 “-“, “_” 这两个符号,在设计模式上,都有基于某结构而改变样式的意义。如果没有特别声明的情况下,会容易造成混淆。

过度设计化

当你同类性质高的时候(至少二到三个),才特别开出资料夹来管理。模式是原则,不过还是要根据你的专案大小去决定是否要完全套用或是部分使用。


切版练习结果

目前改放置到 Github Pages 上,欢迎大家前往观看。
网址:https://github.com/andy922200/HexSchool2020Spring


相关文章


按赞加入粉丝团

延伸阅读