CSS-in-JS

CSS-in-JS

CSS-in-JS는 JavaScript를 사용하여 컴포넌트를 스타일링하는 스타일링 기법입니다.이 JavaScript를 해석하면 CSS가 생성됩니다(통상은<style>DOM에 접속되어 있습니다.JavaScript를 사용하여 선언적이고 유지보수가 가능한 방법으로 스타일을 기술함으로써 CSS를 컴포넌트레벨로 추상화할 수 있습니다.이 개념에는 다음과 같은 라이브러리의 형태로 여러 가지 구현이 있습니다.

이러한 라이브러리를 사용하면 태그가 지정된 템플릿 리터럴을 사용하여 스타일링된 구성요소를 만들 수 있습니다.예를 들어, 리액트 프로젝트에서 스타일링된 구성요소를 사용하면 다음과 같습니다.

수입품 스타일 부터 '스타일 컴포넌트'; // <p> 요소를 파란색 텍스트로 렌더링하는 컴포넌트를 만듭니다. 컨스턴트 블루텍스트 = 스타일.p` 색상: 파란색; `;  < >블루텍스트>나의 파랑색 본문< >/BlueText>

CSS-in-JS를 통해 달성될 수 있는 일부 결과는 기존의 CSS 기법으로는 얻을 수 없다.몇 가지 조건문에 따라 스타일을 역동적으로 만들 수 있습니다.프로그래머는 CSS가 프로그래머의 JavaScript와 같은 블록에 캡슐화되어 해당 모듈에만 범위를 지정하는 모듈 코드를 작성할 수도 있습니다.

산업용도

CSS-in-JS는 Reddit, Patreon, Target, Atlassian, Vogue,[citation needed] GitHub 및 Coinbase에서 사용됩니다.

레퍼런스

  1. ^ "Emotion - Introduction". emotion.sh. Retrieved 2019-07-03.
  2. ^ styled-components. "styled-components". styled-components. Retrieved 2019-07-03.
  3. ^ "JSS". cssinjs.org. Retrieved 2019-07-03.