这节课主要介绍了CSS的预处理器和后处理器，以及一些常用的CSS技巧和布局方法。
- 预处理器是一种工具，可以让我们用更高级的语法来写CSS，然后编译成普通的CSS。预处理器可以提供一些CSS本身不支持的功能，比如变量、嵌套、混合、函数等。预处理器有很多种，比如less、scss、stylus等，它们各有各的语法和特点，但是都可以帮助我们提高CSS的可读性和可维护性。
- 后处理器是一种工具，可以让我们在编译好的CSS上做一些后续的处理，比如添加浏览器前缀、优化代码、实现一些新特性等。后处理器有一个很流行的框架叫postcss，它可以通过插件来扩展功能，比如autoprefixer、cssnano、cssnext等。后处理器可以让我们兼容不同的浏览器，优化性能，面向未来。
- 预处理器和后处理器都需要打包工具来运行，比如webpack、gulp、parcel等。打包工具可以帮助我们自动化编译、压缩、合并等任务，提高开发效率。
- styled-component是一种新的CSS方案，它可以让我们在JavaScript中写CSS，并且可以根据组件的状态和属性来动态生成样式。styled-component可以避免样式冲突，提高组件的复用性和可测试性。
- BEM是一种命名规则，它可以让我们用块（block）、元素（element）、修饰符（modifier）来组织CSS类名，比如
.block__element--modifier。BEM可以让我们的CSS更加结构化和模块化，避免样式污染和层叠问题。 - vue-loader scoped是一种vue特有的功能，它可以让我们给每个vue组件的样式加上一个唯一的属性选择器，这样就可以实现样式的作用域，防止样式泄漏到其他组件。
- css-loader实现CSS Modules是一种webpack特有的功能，它可以让我们把每个CSS类名转换成一个唯一的哈希值。这样就可以实现样式的局部化，避免命名冲突和全局污染。
- inline style 是一种直接在HTML元素上写样式的方法，比如
style="color: red;"。inline style 有一些优点，比如方便覆盖其他样式，方便动态修改等。但是也有很多缺点，比如不利于复用和维护，不支持媒体查询和伪类等。 - Atomic css 是一种把每个CSS属性和值都拆分成一个单独的类名的方法，比如
.mt-10 { margin-top: 10px; }。Atomic css 可以让我们用最少的类名来实现最多的样式效果，减少代码量和重复度。但是也有一些缺点，比如不利于语义化和可读性，不支持嵌套和变量等。
还有其他许多知识点，不一一列举了。
