Growth CSS

Growth CSS

@(Front End Growth)[前端开发, Vue.js, JavaScript, github]


Front End Growth 系列文章。记录 XX 前端成长过程的点滴。仅供参考,也许不具备通用性,请结合自身实际,切勿强行模仿~
Growth CSS 介绍了 XX 对 CSS 的认知以及学习、应用上的建议。


What is CSS

是一门面向交互设计、视觉设计的声明式语言

  • 视觉
    • 布局 (display、margin、padding、width)
    • 字体排印 (font、text、color)
    • 装饰 (background、box-shadow、gradiant)
    • 动画 (animation、transistion、transform)
  • 交互
    • 反馈 (:hover, :visited)
    • 引导 (position: fixed)
    • 互动 (:hover .show)

也是一门需要一些技巧或工具来优雅编码的伪 OO 语言

  • 面向对象
    • 继承 .parent{styleA: xxx;} .child { styleA: inherit; } / .parent() {} .child { .parent(); }
    • 扩展 .classA.classB / .classA() {} .classB() {} .classC() {} .classFinal {.classA(); .classC(); style:xxx;}
    • 重载 .classA.classB .classA { xx: oo} .classB { xx: xx}
  • 代码规范
  • 代码复用 DRY (Less)
  • BEM
  • 变量、函数命名
  • 权重控制
  • 语义性

How I learn CSS

  • 概念(flexbox 布局)
  • demo(动手调试一下所有 flex 属性)
  • 应用(使用所学技术,实现一个页面 or 模块 or 方案)
  • 融汇(与已有知识体系进行关联,梳理知识、归纳、分类)
  • 贯通(结合已有的相关联知识点,头脑风暴,例如:实现垂直居中的 N 种不同方案 )
  • 初心(根本目的是为了实现视觉效果,所以心中永远有一个当前场景最合适方案)

How I Code CSS

Consideration

  • 视觉还原度
  • 兼容性
  • 性能
  • 开发效率
  • 可维护性
    • 语义性
    • 权重控制
    • 嵌套层级
  • 可控颗粒度
  • 调试技巧

CSS Code Standards

BEM

Less

Learning Tips

毕竟 CSS 是一门“面向视觉”的语言,所以学习资料尽量以图像为主,可以加深记忆效果。

@Design

与设计师的沟通

设计理念

一致性 可用性 易用性 反馈

这里不一定实时更新,可以关注 github 地址获取最新内容:

https://github.com/xunge0613/front-end-growth/blob/master/tech-growth/growth-css.md

Leave a Reply

Your email address will not be published. Required fields are marked *

nine − one =