지금까지 이런 스타일은 없었다. 이것은 CSS인가 JAVA인가.
별건 아닙니다.. 어느 날과 같이 CSS가 안되서 javascript는 시작도 못하던 중이었습니다.
안 그래도 객체 지향에 대한 이해를 향상하기 위하여 디자인 패턴을 공부하고 있었습니다.
그러다 문득 SCSS의 extends와 mixin을 이용해서 일명 객체 지향 CSS, OOC(오우씨..) 설계를
구상해보는 것 어떨까 아이디어가 떠올랐습니다.
그렇습니다. 거창한 시작과 달리 별 볼일 없는 SCSS 사용하는 이야깁니다.
CSS의 하나의 블록 스코프가 클래스가 되는 것입니다.
(그래서 class attribute에 넣었던 것인가..)
부족하지만 성장하려고 노력하는 모습을 좋게 봐주셨으면 좋겠습니다.
Object CSS
일단 레이아웃과 관련된 flex와 grid를 설계합니다.
안타깝게도 grid가 익숙하지 않아 flex부터 시작해봅시다.
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: ....
component.scss는 기본 component와 extends들이 작성됩니다.
( 버튼, 빨간 버튼, 애니메이션 버튼 ... )
페이지마다 CSS 모듈을 작성합니다. 각 컴포넌트들은 무조건 하나의 클래스만 받으며,
예를 들어 헤더를 만들 경우
<div cassName="header"/>
.header{
@include flex(align,justify..)
@include textStyle(...
}
빌더 패턴에서 빌더 클래스가 상위 클래스에서 빌딩되는 클래스가 상속을 받자 깔끔해진 것처럼
컴포넌트들은 미디어쿼리를 상속받는 느낌으로 작성합니다.
이 방법의 장점은 직관적이고 낮은 결합에 높은 응집도를 가진다고 생각합니다.
한 가지 문제는 CSS 파일이 너무 길어져버릴 수 있다는 건데요.
이러한 이유로 몇 가지 방법을 떠올렸습니다.
- 인라인 스타일을 활용한다.
- CSS-in-JS의 믹스인을 활용한다.
- 자바스크립트로 직접 구현하다.
위에 대한 저의 생각은 ..
1 : 인라인 스타일은 리액트에서 권장하지 않습니다. <style> 태그 가 아닌 인라인으로
변환되기 때문에 좋은 방법이 아닙니다.
2 : 믹스인을 클래스에 넣는 방법은 한 가지 문제가 파라미터를 줄 수 없습니다.
또한 Styled-components는 attribute가 태그를 길어지게 하는 것이 가독성이 좋지 않다고
생각했습니다. spread attibute를 활용하면 되지만 해당 컴포넌트가 가지고 있는
props를 확인하는 방법이 없어서 코드가 길어지면 그 부분이 아쉬울 것 같았습니다.
3 : 직접 javascript function으로 제작 방법이 있어보이나 거의 하나의 라이브러리를
만들어야할 거 같고, 그러기 위해선 먼저 위의 방법의 불편한 점부터 파악한 뒤 리팩토링하는
게 좋아 보입니다.
위와 같은 결론으로 일단 SCSS로 프로젝트를 진행해보겠습니다!
