未完成ing…

• 设计原则
  • 可复用能继承要完整
  • 周期性迭代
    • 优秀的代码是模仿/设计/重构出来的
• 设计方法
  • 先整体后部分再颗粒化
    • 布局-> 页面 -> 功能->业务
  • 先抽象再具体

css模块化设计

reset.scss：
浏览器不同，对默认的标签有默认的样式，为了表现统一化，要加一个这个。
layout.scss:
布局抽象成这个
element.scss:
列表、按钮

global的方式引用，比如说直接把某个模块引用进来，然后就可以写具体的样式了。
scope就是用的module方法。比如说两个组件都叫做.btn，这样在之前会导致两个样式的名称一致，会被覆盖，如果想用相同的名称，样式不一样，就要用css module这样就不一致，因为编译出来的class带了一串编码。

• 优点：
  • 提高代码重用率
  • 提高开发效率、减少沟通成本
  • 降低耦合
  • 降低发布风险
  • 减少Bug定位时间和Fix成本
  • 提高页面容错
  • 更好的实现快速迭代
  • 更好的支持灰度发布

参考: CSS模块化如何实现？

评论和共享

渐进增强

一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

1
2
3
4
5
6

.transition { /*渐进增强写法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}

优雅降级

一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

1
2
3
4
5
6

.transition { /*优雅降级写法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

渐进增强和优雅降级的区别

渐进增强相当于向上兼容，而优雅降级相当于向下兼容。向下兼容指的是高版本支持低版本的或者说后期开发的版本支持和兼容早期开发的版本，向上兼容的很少。大多数软件都是向下兼容的

常见问题

• 渐进增强和优雅降级如何抉择
  • 如果你采用渐进增强的开发流程，先做一个基本功能版，然后针对各个浏览器进行渐进增加，增加各种功能。相对于优雅降级来说，开发周期长，初期投入资金大。
  • 那采用优雅降级呢，这样可以在较短时间内开发出一个只用于一个浏览器的完整功能版，然后就可以拿给PM找客户谈呀，可以拿去测试，市场试水呀，对于功能尚未确定的 产品，优雅降级不失为一种节约成本的方法。
  • 采用优雅降级的写法，如果一个浏览器同时支持前缀写法和正常写法，后面的旧版浏览器样式就覆盖了新版样式，出现一些奇怪的问题 ，但是用渐进增强的写法就不存在这个问题。这种属性不止border-radius一个，所以为了避免这个不必要的错误，建议大家都采用渐进增强的写法。
  • 绝大多数的大公司都是采用渐进增强的方式，因为业务优先，提升用户体验永远不会排在最前面。

参考文章 渐进增强和优雅降级之间有什么不同?

评论和共享