최근 지인의 스타일링 라이브러리에 대한 개인적인 생각을 듣고 난 이후로 얻은 인사이트를 wavy 동기들에게도 공유하고 싶어서 글을 작성해봅니다.
마침 이번 주차 과제가 CSS 기본을 다시 생각할 수 있는 과제이기도 했구요! 🏊♂️
CSS (Cascading Style Sheets)
웹의 스타일링을 위한 기본 표준을 얘기하는 것으로, 모든 웹 브라우저에서 지원하는 스타일 시트 언어를 말한다 HTML 선택자 를 이용해서 HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다.
body {
margin: 0;
padding: 0;
background-color: black;
}장점
표준 CSS 를 사용하여 개발한다면 전역 스타일링을 편리하게 적용할 수 있다.
예를 들면, 모든 <p> 태그에 특정 스타일을 적용하려 한다면, 아래와 같이 작성하고 해당 css 파일을 import 하는 모든 HTML 파일의 모든 <p> 태그에는 아래와 같은 속성을 지정할 수 있다.
p{
color : blue;
font-size : 16px;
margin : 20px;
}또, HTML과 CSS 파일이 분리 되어 있다 보니 관심사 분리의 측면에서 유용하고 그만큼 유지보수에 장점을 가질 수 있게 된다.
단점
CSS 사용 시 발생할 수 있는 문제점을 무엇일까? 아이러니 하게도 위에 언급한 장점이 상황에 따라서는 단점이 될 수 있다는 것이다. 먼저, 스타일이 전역적으로 적용되므로 스타일 충돌이 발생할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="navbar">
<p class="text">안녕하세요 곽지욱입니다.</p>
</div>
<div class="content">
<p class="text">Web🌊</p>
</div>
</body>
</html>p {
color: blue;
}
.navbar .text {
color: red;
}
위와 같이 파일을 생성했을 때 HTML 파일 내에 존재하는 모든 <p> 에 대해 color : blue 적용했지만 , css 선택자 우선순위에 의해 클래스 선택자가 우선순위가 높기 때문에 `color : red` 로 덮어 씌워진 것을 확인할 수 있다.
물론 이와 같은 상황을 개발자가 의도할 수도 있지만, 프로젝트가 복잡해질 수록 관리가 어려워질 수 있다는 문제가 존재한다.
CSS Preprocessor
CSS 전처리기는 이러한 표준 CSS의 한계를 보완할 수 있다. CSS 전처리기는 CSS에 추가적인 기능을 제공하여 코드 작성과 유지보수를 더 쉽게 할 수 있도록 해주고, 스타일시트의 재사용성을 높이는 도구라고 볼 수 있다.
따라서 CSS 문법과 유사하지만, 변수, 네스팅, 믹스인과 같은 보다 확장된 기능을 제공한다. 대표적인 전처리기인 SCSS를 예시로 들어보겠다.
/* 변수 사용*/
$primary-color: #333;
/* 선택자 중첩*/
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
color: $primary-color;
text-decoration: none;
}
}
위 코드는 SCSS 를 기준으로 변수,중첩을 사용한 예제 코드이다.
$primary-color : #333 부분에서 변수를 선언하여 색상을 저장하고 있다. 이렇게 하면 자연스럽게 코드의 재사용성이 높아지고, 나중에 색상을 변경해야 할 때, 선언된 변수 하나만 수정하면 되기 때문에 유지보수 또한 용이해진다.
그리고 SCSS 는 CSS 규칙을 중첩하여 작성할 수 있게 해주는데, 이 예제에서는 nav, ul, li, a 요소가 중첩되어 있다. 이를 통해 구조를 명확하게 표현할 수 있고, 스타일을 구성하는 데 있어 가독성이 향상될 수 있다.
`중첩`의 이러한 점은 중복되는 선택자를 피하고, 변수로 스타일을 재사용함으로써 더 간결한 코드를 작성할 수 있게 해주는 것이다.
단점으로는 CSS에 비해 문법이 복잡하기에 초보자에게 학습 곡선이 존재할 수 있다는 점과 브라우저에서 직접 해석할 수 없기 때문에 SCSS 파일을 CSS로 컴파일하는 별도의 빌드 프로세스가 필요하다는 점이 존재한다.
또한 과도한 중첩을 사용하게 되면 오히려 CSS 규칙이 지나치게 복잡해질 수 있다.
자세한 설명은 링크를 통해 더 확인할 수 있습니다.
CSS-in-JS
CSS-in-JS는 말 그대로 JavaScript 안에 CSS가 들어 있다는 뜻이다. 즉 , JavaScript 코드로 스타일을 지정할 수 있어서 별도의 CSS 파일이 필요하지 않다는 것을 말한다.
JavaScript 내에서 CSS 를 작성하는 방식으로, styled-components 와 emotion이 대표적이라고 할 수있는데, 이 두 라이브러리 모두 스타일을 컴포넌트 수준에서 관리할 수 있게 해주는 면에서 동일함을 가지고 있고, 사용방법도 유사하다.
import styled from 'styled-components';
const Button = styled.button`
background: ${props => props.primary ? 'palevioletred' : 'white'};
color: ${props => props.primary ? 'white' : 'palevioletred'};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
function App() {
return (
<div>
<Button>Normal Button</Button>
<Button primary>Primary Button</Button>
</div>
);
}
위 코드는 styled-components 를 사용한 React 코드를 살펴보면 자바스크립트 파일 내부에서 백틱(`) 으로 스타일 프로퍼티를 지정하고, 이를 컴포넌트로 할당해서 사용할 수 있다.
장점
1. styled-components는 JavaScript의 특성을 활용해서 props를 통해 동적으로 스타일을 변경할 수 있기 때문에, 동적인 스타일링이 용이하다는 장점이 있다.
2. 스타일이 각 컴포넌트에 국한되어 있기 때문에, 스타일을 컴포넌트와 함께 유지할 수 있고 코드의 모듈화를 촉짐함과 동시에 재사용성, 유지보수성, 가독성이 향상될 수 있다.
3. CSS 클래스 네임이 전역 네임스페이스에서 충돌하는 문제를 방지할 수 있다. styled-components 는 각 스타일을 고유한 클래스로 생성하므로, 다른 컴포넌트와 스타일이 겹치는 충돌현상을 방지할 수 있다.
단점
1. 런타임 오버헤드 : styled-components 는 런타임에 스타일을 생성하고 삽입하므로, 일반 CSS 보다 성능이 떨어질 수 있다. 이로 인해 렌더링 속도에 저하가 발생할 수 있다.
2. SSR에서의 복잡성 : 서버사이드 렌더링(SSR)을 사용할 경우 styled-components 의 스타일을 미리 계산하고 서버에서 전달해야 하는데, 이를 위해 추가적인 설정이 필요할 수 있다.
추가적으로 CSS-In-JS에 단점에 대해 이해하기 위해서는 라이브러리 자체가 어떻게 종작하는지 그리고 브라우저의 렌더링과정이 어떻게 구성되었는지 알고 있을 필요가 있다.
CSS Modules
CSS Modules는 스타일 시트를 모듈화하여 각 클래스와 스타일을 로컬 범위로 스코핑하는 것을 말한다. 앞서 표준 CSS를 사용하면 전역 스타일 적용으로 인해 스타일 충돌이 발생할 수 있다는 우려가 있었는데, CSS Modules는 전역 네임스페이스 문제를 해결할 수있다.
CSS Module 을 사용하기 위해선 css 파일을 파일명.module.css 로 작성하고 className을 import 하여 지정한 변수의 값.클래스 이름으로 지정해주면 된다.
import styles from './App.module.css';
function App(){
return(
<div className ="App">
<h1 className={styles.title}>안녕!</h1>
</div>
);
}
.title{
font-size : 18px;
}
장점
1. 클래스 이름 충돌 방지 : 이 처럼 CSS Module 은 각 CSS 클래스 이름에 고유한 식별자를 부여하여, 다른 파일에서와 같은 이름을 사용하는 경우에도 충돌이 발생하지 않는다.
예를 들어, Button.module.css와 Header.module.css에서 모두 .title이라는 클래스가 존재해도, 각각의 모듈에서 자동으로 고유한 클래스 이름으로 변환되기 때문에 스타일의 일관성을 유지할 수 있는 것이다.
2. 기존 CSS 문법 사용 : CSS module 은 기존의 CSS 문법을 그대로 사용할 수 있기 때문에 새로운 문법이나 규칙을 학습할 필요가 없다.
3. 컴파일 타임 최적화 : CSS module 은 빌드 과정에서 스타일을 최적화 하기 때문에, 사용하지 않는 스타일을 제거하거나, 클래스를 최소화하여 최종 번들 크기를 줄일 수 있다.
단점
1. 동적 스타일링에 제한 : CSS module에서는 클래스 이름이 정적으로 결정되므로, JavaScript의 조건문을 사용하여 동적으로 스타일을 변경하는 것이 어려울 수 있다. 앞서 언급했던 styled-components 와 같은 라이브러리 동적 스타일링 기능과 비교했을 때 한계로 작용할 수 있다.
2. 글로벌 스타일 적용의 어려움 : CSS Module의 기본 원칙은 지역적 스타일링이다. 따라서 글로벌 스타일을 적용해야 할 경우, 예를 들면 reset CSS나 기본 타이포그래프 스타일을 적용하려고 하면, 별도의 파일에서 전역 클래스를 생성하는 과정이 다소 번거로울 수 있다
Tailwind CSS
Tailwind CSS는 유틸리티-퍼스트 CSS 프레임워크로, 웹 개발자들이 빠르게 사용자 인터페이스를 만들 수 있도록 도와준다. 즉, 미리 정의된 유틸리티 타입을 사용하는 프레임워크를 말하는 것
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Click me
</button>
장점
장점으로는 당연히 미리 정의된 스타일을 빠르게 적용할 수 있다는 점이다. 특히 디자이너 없이 프로젝트를 진행하는 경우 쉽고 빠르게 스타일을 적용할 수 있다는 점이 있고 당연히 일관된 디자인 시스템을 구축하는 것에 용이하다.
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.
tailwindcss.com
단점
단점으로는 초기에 설정하고 학습하는 과정에서 어려움을 겪을 수 있고, 위 예제 코드처럼 HTML에 많은 클래스를 추가해야 하므로 가독성이 매우매우 떨어진다는 단점이 있다..😥
'1주차' 카테고리의 다른 글
| HTML Semantic Tag를 적극 활용해야 하는 이유 (0) | 2024.10.10 |
|---|---|
| [CSS] display 속성 - none, inline, block, inline-block (0) | 2024.10.10 |
| CSS Flexbox 공부하자고? 너 누군데. (0) | 2024.10.10 |
| 공유과제#1. White space (CSS) (0) | 2024.10.10 |
| 웹 접근성 향상을 위한 rem (1) | 2024.10.09 |
