growth-css.md

Growth CSS

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

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

与设计师的沟通

设计理念

一致性 可用性 易用性 反馈