CSS클래스를 작성하다가 머리가 지끈지끈해지는 경험을 한 번쯤은 있을 것이다.
머리가 아파올때가 CSS에 속성을 줄때면 MDN등의 사이트 등을 읽어보면 되니까 해결 방법이 있지만, 클래스나 아이디의 이름이 더 이상 생각나지 않을때면 그렇게 골치가 아플 수가 없다.
자기만 새로만든 클래스의 클래스명을 인터넷에서 찾아볼 수도 없는 노릇이여서, 작명소를 차려야할 것 같은 느낌이다.
나는 CSS방법론 중 BEM을 사용하고 있었다.
CSS방법론 BEM
BEM에 대해서는 위 링크를 가면 자세히 볼 수 있다.
BEM에 대해 간단하게 설명하자면
- Block
- Element
- Modifier
로 구분하여 클래스명을 짓는 것이다.
위 링크에 나온 예시로
.header__navigation--navi-text {
color: red;
}가 있다.
여기서 Block은 header이고 Element는 "__"로 Modifier는 "--"로 구분한다.
그리고 이름을 연결할 때는 block-name과 같이 하이픈을 하나만 사용하면 된다.
이렇게 작성하다 보면 하나의 이름만 봐도 진이 빠질 정도로 긴데, 페이지 하나를 완성하면 얼마나 긴 이름들이 많이 생겨날까?
그래서 나오게 된 것이 CSS-in-JS인 Styled-Component이다.
짧게 Styled-Component의 예시를 보고 지나가자면
import styled from "styled-components";
const Button = styled.button`
margin: 1rem;
padding: 0.2em 1em;
color: blue;
background: black;
`;
const RedButton = styled(Button)`
color: red;
`;
export default function App() {
return (
<>
<Button>Click ME</Button>
<RedButton>Red Click</RedButton>
</>
);
}Styled-Component는 JS기반의 CSS이다. 그래서 JS파일로 만들어야한다.
ES6문법인 tagged template literals 을 사용해서 별도의 CSS파일 없이 스타일 속성을 지닌 컴포넌트를 만드는 것이다.
개인적인 생각으로는 CSS의 className 생성을 자동으로 해준다는 점에서 오타로 인한 버그를 줄여주고, 작명에 대한 부담을 줄여주지만 관심사 분리 측면에서 보자면 분리한 점이 있다고 생각한다.
Styled-Component의 다른 장점으로는 삼항연산자와 props를 사용해 조건에 따라 속성을 지정할 수도 있다.
...
background: ${(props) => (props.red ? "red" : "blue")}
...
// App Component
...
<Button red>red button</button>
<Button>blue button</button>
...위와같이 지정하면 red button의 배경색은 빨간색이 되고, props를 전달하지 않은 blue button의 배경색은 파란색이 된다.
