React css-in-js

https://betterprogramming.pub/all-you-need-to-know-about-css-in-js-984a72d48ebc를 번역한 글입니다.

All You Need To Know About CSS-in-JS

 

CSS-in-JS는 CSS model을 document 레벨이 아닌 component 레벨에서 추상화 합니다.

 

---

Styled React Component Example

import React, { Component } from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
  background: black;
`
const Title = styled.div`
  color: white;
`

class App extends Components {
  render(){
    return {
      <Wrapper>
        <Title>Hello Styled Components!</Title>
      </Wrapper>
    }
  }
}

---

 

이미 CSS-in-JS, Styled Components, Radium, Aphrodite와 같은 것들을 들어봤을 겁니다, 그리고 아마 "이미 CSS-in-CSS(Css in .css)에 만족하는데 나와 무슨 연관이 있는거지" 하는 생각을 했을 겁니다.

 

이제 왜 이게 연관이 있는지, 어떤 개념인지 이해하고, 왜 이게 연관되어있고 희망적인지 밝히기 위해 왔습니다.

이전에 말한것과 같이 CSS-in-CSS를 사용하는 것은 자유입니다. CSS-in-JS를 사용할 의무는 없습니다.

어느 작업이든지 행복하게 하는 것을 사용하는 것이 최상의 해결책입니다.

 

CSS-in-js는 섬세하고 논쟁의 여지가 있는 주제입니다. 스스로에게 이것이 정말 나의 작업을 효율적으로 해줄것인가 물어보세요

결국 중요한 것은 생산적이고 더 기쁘게 해줄 도구를 사용하는 것입니다.

 

저는 항상 거대한 stylesheets 폴더를 유지해야 하는데 어색함을 느꼈습니다. 다른 접근들을 시도했었고. 새로운 styling 아이디어가 없을까 묻는 사람들을 많이 봐왔습니다. CSS-in-JS는 최선의 개념입니다.

 

소중 규모 프로젝트의 CSS

---

What is CSS-in-JS?

JSS는 CSS보다 강력한 추상화 도구입니다. 이것은 선언적이고 유지보수 가능한 방식으로 style을 나타내기 위해 Javascript를 언어로 사용합니다. 이것은 서버사이드와 런타임에서 동작하는 강력한 JS to CSS 컴파일러 입니다. 이것의 핵심 라이브러리는 낮은 레벨이며 프레임워크에 구애받지 않습니다. 6KB(minified하고 압축했을때)이고 plugins API를 통해 확장할 수 있습니다.

인라인 스타일과 CSS-in-JS는 같지 않다는 것을 명심하세요. 그들은 다르고 아래에서 증명해 보일것입니다.

 

Difference

모든 Css 특성들은 Javascript의 이벤트 핸들러와 함께 별칭으로 지정할 수는 없습니다. 많은 pseudo-selectors(:disabled, :before, :nth-child)에서는 불가능 합니다. html태그와 body태그를 스타일링 하는 것도 지원되지 않습니다. 

 

CSS-in-JS에서는 CSS를 간단하게 다룰수 있습니다. 실제 CSS가 생성되면 모든 media query와 pseudo-selector를 원하는대로 사용할 수 있습니다. 몇몇 라이브러리(jss, styled-components)에서는 nesting과 같은 css의 native 특성이 아닌것도 지원해줍니다. 

 

그냥 CSS-in-CSS로 하면 어떨까요?

 

CSS-in-CSS는 오랫동안 행해졌던 방식인 반면, 현대의 웹은 페이지가 아닌 컴포넌트 기반으로 작성되었다는 것이 장애요소 입니다.

CSS는 컴포넌트 기반의 접근을 시도해본적이 없습니다. CSS-in-JS는 이 문제를 해결하였습니다. CSS-in-JS solves exactly this problem. Shout-out to Vue for solving this problem beautifully, even though Vue’s styles have no access to component state.

 

---

What Are the Benefits of Using CSS-in-JS

• 컴포넌트 기반이다. 더이상 stylesheet 다발을 유지할 필요는 없다. CSS-in-JS는 document level에서가 아니라 컴포넌트 단계에서 CSS를 다룬다
• CSS-in-JS는 CSS를 강화하기 위하여 Javascript 생태계의 모든 힘을 이용한다.
• 고립 원칙. 범위 선택자는 충분하지 않습니다. CSS는 명시적으로 정의하지 않았다면 부모 요소의 속성을 자동으로 상속한다는 특성이 있습니다. jss-isolate 플러그인으로 인해 JSS 는 property들을 상속받지 않습니다.
• 범위 선택자. CSS는 selector의 충돌을 피할수가 없습니다. BEM과 같은 컨벤션은 하나의 프로젝트 내에서는 도움이 될수 있지만 서드파티 코드와 통합되면 도움이 되지 않을것입니다. JSS는 CSS를 나타내기 위해 JSON형식으로 컴파일 될때 기본으로 유일한 class이름을 생성합니다.
• vendor prefixing. css 규칙은 자동으로 vendor-prefixed되므로 걱정하지 않아도 됩니다.
• 코드 분할. JS와 CSS간에 변수와 함수를 쉽게 공유할 수 있습니다.
• 화면에서 현재 사용하는 style만이 DOM에 존재합니다(react-jss)
• 쓰이지 않는 코드를 삭제할 수 있다(tree shaking 같은 느낌)
• CSS 유닛 테스트가 용이하다

vendor prefix

---

What Are the Drawbacks of Using CSS-in-JS?

• 러닝커브가 존재합니다.
• 새로운 의존성들이 존재합니다.
• code에 바로 적용하기에 어려울 수 있습니다. frontend가 처음이면 많은것을 배워야 합니다.

단점보다 장점이 크므로 CSS-in-JS의 사용을 고려하세요!

 

사견 

 

css-in-js를 heavy하게 사용하다 보면 js전체 파일의 사이즈가 커집니다.

이는 load performance가 발생할 수도 있다는 것을 의미합니다.

파일크기가 커지면 네트워크가 온전치 않은 상황에서는 이슈가 발생할 수도 있습니다.

일반 css파일을 사용하면 js파일의 사이즈는 작아집니다.

찰나의 순간에 js전체가 다운로드 되지 않는 순간에는 좋지 않은 Ux를 제공해주지 않을까 싶습니다.

 

출처 :  

https://betterprogramming.pub/all-you-need-to-know-about-css-in-js-984a72d48ebc

All You Need To Know About CSS-in-JS