大家好，我是卡颂。

创新互联专注于安陆企业网站建设,自适应网站建设,商城网站建设。安陆网站建设公司,为安陆等地区提供建站服务。全流程按需开发，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

不知道平时在项目里你怎么处理CSS呢?

我们知道，由于原生CSS存在一些问题，比如：

• 复用时容易样式冲突
• 没有作用域、没有模块化
• 没有编程能力

社区涌现出很多解决方案，比如：

• 命名规范(比如BEM规范)
• 模块规范(CSS Modules)
• CSS预处理器(比如Less)
• CSS In JS
• CSS框架(Tailwind CSS)
• ......

如果我们按以下三个维度评判这些方案：

• 上手难度：与原生CSS越接近，越好上手
• 灵活性：拥有越强编程能力，越灵活
• 能力：能解决多少原生CSS的问题

会发现每个方案都有自己的优势与短板。

比如：

• CSS In JS方案用JS写CSS，拥有极高灵活性，但加大了上手难度
• Less(CSS预处理器)可以看作CSS的超集，上手难度低、有一定编程能力，但是CSS自身的问题他也存在

业界常见做法是：同时使用BEM规范(解决命名冲突问题)+ CSS预处理器。

进击的Vue CSS解决方案

我们用这三个维度分析下Vue的SFC(Single-File-Component，单文件组件)：

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  
  p {
  
  
  
  
    color: #0f0;
  
  
  
  
  }
  
  
  
  

 
 
 
 

• 上手难度：样式在