[FE] CSS 방식

배경

React.js를 배우며 웹페이지를 꾸미는 CSS에도 여러 방식이 있다는 것을 알게 되었다. 각각의 방식의 특징과 장단점을 적어보고자 한다.

 

특징

1. 기본적인 CSS 파일 방식

• 특징: 전통적인 방식이다. CSS 파일을 별도로 작성하고 필요한 곳에서 불러와 사용한다.
• 장점: CSS에 익숙한 개발자들에게는 가장 직관적이고 쉽다. 모든 브라우저에서 호환이 가능하다.
• 단점: CSS 선택자가 전역적으로 작동하기 때문에, 스타일 충돌이 발생할 수 있다. 또한, CSS와 JS가 분리되어 있어, 컴포넌트 기반의 설계를 위해선 추가적인 작업이 필요하다.

2. CSS Modules

• 특징: CSS를 모듈로 만들어, 각 컴포넌트에 독립적인 CSS를 적용하는 방식이다.
• 장점: CSS 클래스의 이름이 지역적인 범위를 가지므로, 이름 충돌을 걱정할 필요가 없다.
• 단점: 프로젝트 설정이 복잡하고, CSS를 JS에 임포트하는 특이한 방식에 대해 배워야 한다.

3. Styled-components

• 특징: 컴포넌트 스타일링의 또 다른 방법으로, JavaScript 파일 내부에 CSS를 작성한다.
• 장점: CSS와 컴포넌트가 밀접하게 연결되어 있어, 컴포넌트의 재사용성이 증가한다. 또한, props를 통해 동적으로 스타일을 조절할 수 있다.
• 단점: 초기 설정이 필요하며, CSS를 JavaScript 안에 작성해야 하는 것이 익숙하지 않을 수 있다.

4. SCSS(Sass)

• 특징: CSS의 확장이다. 변수, 중첩, 믹스인 등의 기능을 제공한다.
• 장점: CSS를 더욱 강력하게 만들어 주며, 중복을 피하고 코드의 가독성을 높여준다.
• 단점: CSS에 비해 배우는 데 시간이 필요하며, 컴파일 과정이 필요하다.

5. Emotion

• 특징: JavaScript로 CSS를 작성하는 라이브러리로, styled-components와 유사하다.
• 장점: Styled-components의 기능을 포함하며, 성능이 더 좋다고 알려져 있다.
• 단점: styled-components와 마찬가지로, CSS를 JavaScript에 작성하는 것이 적응이 필요하다. 추가적으로, styled-components에 비해 커뮤니티가 작아 문제가 발생했을 때 해결하기 어렵다.