慕课网CSS工作应用+面试（9）三大框架中的CSS

我会带着你远行 2022-02-27 00:51 190阅读 0赞

**1.Angular中的CSS**

Angular Vue内置样式集成  
React一些业界实践

Angular（2+）提供了样式封装能力、与组件深度集成能力

Angular中ShadowDOM：逻辑上一个DOM、结构上存在子集结构

Angular中Scoped CSS：限定了范围的CSS、无法影响外部元素、外部样式一般不影响内部、可以通过/deep或>>>穿透

**2.Vue中的CSS**

Vue模拟Scoped CSS

方案一：  
随机选择器（css modules）

方案二：  
随机属性（`<div abcdefg> div[abcdefg]{ }`）

**3.React中CSS**

官方没有基础方案

社区方案众多：  
1.css modules  
2.（babel）react-css-modules  
3.styled components  
4.styled jsx

**4.课程总结**

课程内容：  
1.HTML基础 CSS基础  
2.CSS布局  
3.效果和动画  
4.工具、工程化、框架

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

学习路径：  
基础知识  
实践应用（demo和项目）  
理论和高级技巧（书籍 网站 博客）  
专题练习强化（实战）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]

面试关注重点：  
简历真实性  
CSS基础知识  
移动端应用经验  
动画能力（加分项）  
项目经历  
工程化能力

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220227/8c4f917c07254a4bb3ce29ea7cb675dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220227/818baa4644354e6ea14532ec0d7b496a.png