day6: CSS style 规划 - CSS in js

在经历了传统 CSS 後，发现了一些 CSS 的缺点

• 全域污染 - CSS class name 会全域会覆盖,譬如有个叫 card 的 classname .card {},假设是写在纯 css 档中,使用 import 'app.css' 的方式引用,在其他 component 的 html 同样具有 card 的class name,将会吃到这个相同的属性,并不能针对不同 component 有独特的 style 样式,会污染其他 component。
• 不能动态产生 CSS - 譬如有个 div 的 height 是根据判断产生的,在传统的使用上需要用 var() 的方式判断,但是这样会造成在 html 的 style 埋下过多的 var 元素,并在旧 IE 上并不支援度。

使用 css 方式
//example.js

useEffect(()=>{
	document.querySelect('.customer-container').style.setProperty('--current-height',
  '200px')
},[])
<div classname="customer-container"></div>

//example.css
{
 .customer-container{
   height:var(--current-height);
  }
}

//这边一个 height 就要埋一个变数,试想假设有 width 或其他变数,也会造成埋过多的 var 属性

使用 style-component 写法

<Wrapper width={width} height={height} />
</Wrapper>

const Wrapper = styled.div`
  width: ${p => p.width};
  height: ${p => p.height};
`;

// 这样的写法就乾净很多,而且可以带很多变数当成 props 到 Wrapper

• css 需要用 bem 或是 oocss 的命名方式来拆分组件,但是其实只是为了拆分组件而命名,如果使用

CSS in JS 则不用考虑过多的命名

// 使用传统 css
// BEM 命名, 为了区别 nav 区块需要命名 nav__item, 命名状态需要 --active
  <div class="nav">
    <li class="nav__item nav__item--active"><a href="#about">About</a></li>
    <li class="nav__item"><a href="#product">Product</a></li>
  </div>

//使用 emotion
<div
    css={css`
     ......
    `}
  >
    <li
      css={css`
       ....
      `}
    >
     <a href="#about">About</a>
    </li>
		<li
      css={css`
       ....
      `}
    >
     <a href="#product">Product</a>
    </li>
  </div>
//在每个 element 都有属於自己的 css 样式,就不用过度命名

这时候我们就需要依靠 CSS in JS 来解决这些缺点,我们下一篇将介绍 emotion css 的使用。

https://blog.logrocket.com/5-things-you-can-do-css-in-js/

https://www.joshwcomeau.com/css/styled-components/

https://dev.to/rleija_/5-reasons-to-go-with-css-in-js-for-your-next-application-43m

https://blog.logrocket.com/5-things-you-can-do-css-in-js/