完美世界前传下载,辰东

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

CSS也能像組件狀態(tài)一樣響應(yīng)式更新？

大家好，我是卡頌。

創(chuàng)新互聯(lián)專注于安陸企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),商城網(wǎng)站建設(shè)。安陸網(wǎng)站建設(shè)公司,為安陸等地區(qū)提供建站服務(wù)。全流程按需開發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

不知道平時(shí)在項(xiàng)目里你怎么處理CSS呢?

我們知道，由于原生CSS存在一些問題，比如：

復(fù)用時(shí)容易樣式?jīng)_突
沒有作用域、沒有模塊化
沒有編程能力

社區(qū)涌現(xiàn)出很多解決方案，比如：

命名規(guī)范(比如BEM規(guī)范)
模塊規(guī)范(CSS Modules)
CSS預(yù)處理器(比如Less)
CSS In JS
CSS框架(Tailwind CSS)
......

如果我們按以下三個(gè)維度評(píng)判這些方案：

上手難度：與原生CSS越接近，越好上手
靈活性：擁有越強(qiáng)編程能力，越靈活
能力：能解決多少原生CSS的問題

會(huì)發(fā)現(xiàn)每個(gè)方案都有自己的優(yōu)勢(shì)與短板。

比如：

CSS In JS方案用JS寫CSS，擁有極高靈活性，但加大了上手難度
Less(CSS預(yù)處理器)可以看作CSS的超集，上手難度低、有一定編程能力，但是CSS自身的問題他也存在

業(yè)界常見做法是：同時(shí)使用BEM規(guī)范(解決命名沖突問題)+ CSS預(yù)處理器。

進(jìn)擊的Vue CSS解決方案

我們用這三個(gè)維度分析下Vue的SFC(Single-File-Component，單文件組件)：

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    p {
  
  
  
      color: #0f0;
  
  
  
    }

上手難度：樣式在