开篇一张图

• https://github.com/kamranahmedse/developer-roadmap (opens new window)
• https://www.yuque.com/fe9/basic/iwtzab (opens new window)

文字可能会补充，今天即兴聊

PostCSS

// alert.css
@charset "UTF-8";
@import "./common/var.css";

@component-namespace el {

  @b alert {
    color: var(--color-text-dark);

    /* 贴边 */
    &.welt {
      border-bottom: 1px solid var(--tab-border-color);
    }

    @e icon {
      color: var(--color-text-dark);
    }

    & .el-alert__description {
      color: var(--color-text-dark);
    }
  }
}

CSS架构

• BEM - Block Element Modifier 块（block）,元素（element）,修饰符（modifier）
  • eg element-ui
• OOCSS - Object-Oriented CSS 面向对象CSS编程
  • eg bootstrap
• SMACSS - Scalable and Modular Architecture for CSS 可伸缩和模块化的CSS架构
• CSS in JS
• CSS Scoped

渐进式 web 应用 （pwa）

• PRPL 模式 介绍 (opens new window)
  • preset (opens new window)
  • vue-router-prefetch (opens new window)
  • 饿了么的 PWA 升级实践 (opens new window)
• RAIL 模型 介绍 (opens new window)
• lighthouse 介绍 (opens new window)

推荐 Repo

• 优秀推荐的IT影视 (opens new window)
• 渗透攻击 (opens new window)
• 与众不同的 changeLog 日志页面 (opens new window)
• 可编辑的网页制作框架 (opens new window)
• 基于vue、bootstrap的一款设计框架 (opens new window)
• Javascript 项目指南 (opens new window)