• Css-In-Js를 활용하면 자바스크립트로 스타일을 선언적이고 유지보수할 수 있는 방식으로 표현할 수 있다.

<aside> 💡

인라인 스타일 : HTML 요소 내부에 직접 스타일을 적용하는 방식을 말함. HTML 태그의 style 속성을 사용하여 인라인 스타일을 적용할 수 있다.

</aside>

ex) 인라인 스타일

const textStyles={
  color:white,
  backgroundColor:black
}

const SomeComponent ={
  return(
    <p style={textStyles}>inline style</p>)
}

<p style="color:whtie; background-color:black">style</p>

ex) css-in-js

import styled from "styled-components"

const Text= styled.div`
color: white;
background: black;
`const Example = () => <Text>{Hello css-in-js}</Text>

css-in-js의 장점

1. 컴포넌트로 생각 가능
2. 부모와 분리 가능
3. 스코프를 가짐
4. 자동으로 벤더 프리픽스가 붙음 → 브라우저 호환성 향상
5. 자바스크립트와 css 상수와 함수를 쉽게 공유할 수 있다

<aside> 💡

BEM(Block Element Modifier)

css 클래스 네이밍 컨벤션의 한 형식을 의미

• Block(블록): 컴포넌트나 모듈의 최상위 레벨 요소를 클래스 명은 중복되지 않아야 하며, 컴포넌트의 기본 스타일을 정의한다.
• Element(요소): 블록 내부의 하위 요소를 나타낸다. 클래스 명은 블록의 클래스 명을 접두어로 가지며 블록 내부에서만 의미가 있다.
• Modifier(수정자): 블록이나 요소의 상태나 특성을 나타내는 클래스를 추가한다. 이로써 특정 상황에 스타일을 변경하거나 동작을 제어 </aside>

<aside> 💡

벤더 프리픽스(Vender Profix)

웹 브라우저마다 지원되는 CSS 속성이나 기능이 다를 때 특정 브라우저에서 제대로 동작하도록 하기 위해 추가되는 접두사를 말한다.

</aside>

CSS-in-JS 등장 배경