css
css는 마크업 언어로 작성된 웹 페이지에 스타일을 추가하는 데 사용되는 가장 인기 있는 스타일 시트 언어 중 하나입니다.
개발자가 색상, 레이아웃, 글골 스타일, 단락 간격, 열 크기 등과 같은 요소를 쉽게 사용자 지정할 수 있습니다.
웹 페이지에 css를 포함한는 방법에는 3가지가 있습니다.
1. 인라인 - style 속성 사용
<p style="color: blue; font-size: 16px;">예시 1</p>
2. 내부 - <styled> 태그 사용
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>내부 방식 CSS 예시</title>
<style>
p {
color: green;
font-size: 18px;
}
h1 {
color: red;
}
</style>
</head>
<body>
<h1>예시 제목</h1>
<p>예시 2</p>
</body>
</html>
3. 외부 - <link> 태그를 사용하여 외부 css 파일을 연결합니다.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>외부 방식 CSS 예시</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>예시 제목</h1>
<p>예시 3</p>
</body>
</html>/* styles.css */
p {
color: purple;
font-size: 20px;
}
h1 {
background-color: yellow;
}
css의 장점
1. 사용하기 쉽다.
css를 사용하면 이제 웹 애플리케이션 전체에서 일관된 스타일을 유지하기가 더 쉬워졌습니다.
또한 개발자는 클래스 이름을 쉽게 사용하여 한 번에 여러 위치에서 스타일을 업데이트할 수 있습니다.
그리고 스타일 요소가 여러 웹 페이지에서 일관되로고 합니다.
2. 전처리기 지원
SASS 및 LESS와 같은 전처리기는 개발자가 변수를 사용하고 코드를 스타일에 맞게 모듈화할 수 있도록 하여 프로젝트에서 코드를 더 쉽게 재사용하고 일관성을 유지할 수 있도록 합니다.
3. 고성능
css를 사용하면 개발자는 몇 줄로 많은 웹 페이지의 스타일을 유지할 수 있습니다.
이렇게 하면 로드해야 하는 코드 라인과 파일 수가 줄어들고 페이지 렌더링 속도가 향상됩니다. ㅇ
4. SEO 지원
CSS를 사용하면 웹 페이지의 HTML 코드를 줄이는 데 도움이 될 수 있으므로 검색 색인에서 보다 체계적으로 쉽게 순위를 매길 수 있습니다. 이는 검색 엔진 스파이더가 검색 결과에서 페이지 순위를 매길 때 깨끗하고 잘 구성된 HTML 코드를 선호하기 때문에 검색 엔진 최적화에 도움 될 수 있습니다.
css의 단점
1. overriding issues
css의 가장 큰 문제는 스타일 재정의 입니다.
응용 프로그램이 확장됨에 따라 개발자는 인라인 스타일이나 `!important`구문을 사용하여 스타일 재정의를 방지해야 합니다.
2. 여러 css 수준
css1에서 css3 까지 다양한 버전의 css가 있어 웹 브라우저와 개발자 사이에 혼란을 야기 했습니다.
따라서 프로젝트에서 단일 css 수준만 사용합니다.
3. Overriding Issues
css의 가장 큰 문제는 스타일 재정의입니다. 응용 프로그램이 확장됨에 따라 개발자는 인라인 스타일이나 !important 구문을 사용하여 스타일 재정의를 방지해야 합니다.
4. 여러 css 수준
css1에서 css3까지 다양한 버전의 css가 있어 웹 브라우저와 개발자 사이에 혼란을 야기 했습니다.
따라서 프로젝트에서 단일 css 수준만 사용해야 합니다.
5. 브라우저 지원
한 브라우저에서 잘 작동하는 일부 스타일이 다른 부라우저에서는 작동하지 않을 수 있습니다.
따라서 웹 개발자는 여러 브라우저에서 애플리케이션을 실행하여 스타일 호환성을 확인해야 합니다.
또한 다양한 웹 브라우저는 css 데이터를 다양한 방식으로 해석합니다.
사용자가 오래된 버전을 사용하는 경우 사용자는 웹사이트를 덜 매력적으롭 고 사용자 경험에 부정적인 영향을 미칩니다.
6. 명명문제
애플리케이션이 복잡해지면 css 클래스 이름 지정 문제가 자중 발생합니다.
문제를 유지 관리하고 디버그하기 어렵게 만들 수 있는 충돌하거나 심지어 중복된 클래스를 생성하게 될 수 있습니다. 따라서 애플리케이션에서 잘 정의된 css 클래스를 생성하는데 도움이 되도록 BEM 과 같은 표준 명명 규칙을 따르는 것이 좋습니다.
CSS-in-JS
CSS-in-JS는 단어 그대로 자바스크립트 코드에서 css를 작성하는 방식을 말합니다.
2014년 페이스북 개발자인 Christopher Chedeau aka Vjeux가 처음 소개하였습니다.
CSS-in-JS는 CSS의 한계쩜들, 예를 들어 동적 기능의 부재, 스코핑, 그리고 portability와 같은 문제를 해결하기 위해 고안되었습니다.
vjeux는 CSS를 작성하는 어려움은 다음과 같이 설명하였으며 CSS-in-JS로 이들 이슈를 모두 해결할 수 있다고 강조했습니다.
- Global namespace: 글로벌 공간에 선언된 이름의 명명 규칙 필요
- Dependencies: CSS간의 의존 관계를 관리
- Dead Code Elimination: 미사용 코드 검출
- Minification: 클래스 이름의 최소화
- Sharing Constants: JS와 CSS의 상태 공유
- Non-deterministic Resolution: CSS 로드 우선 순위 이슈
- Isolation: CSS와 JS의 상속에 따른 격리 필요 이슈
CSS-in-JS의 가장 대표적인 라이브러리인 Styled Components의 사용 예시를 보면 아래와 같습니다.
인라인 스타일 사용
const MyComponent = props => (
<p style={{fontFamily: 'verdana', color: 'red'}}>My Component</p>
)
스타일 구성 요소 사용
const StyledParagraph = styled.div`
font-family: verdana;
색상: 빨간색;
`
const MyComponent = props => (
<StyledParagraph {...props}> 내 구성 요소 </StyledParagraph>
)
CSS-in-JS의 장점
로컬 스코핑
기본적으로 css는 로컬 범위 지정을 허용하지 않습니다. 각 스타일 규칙에는 전역 범위가 있으므로 전체 프로젝트에 적용됩니다.
결과적으로 스타일은 놀라운 방식으로 서로 재정의 할 수 있습니다. 프론트 엔드 개발자는 이를 해결하기 위해 BEM, OOCSS 및 SMACSS와 같이 CSS에 모듈성을 추가하는 여러 방법론을 만들었습니다. 전처리기와 PostCss는 CSS를 모듈화하는 또 다른 방법입니다. CSS-in-JS는 CSS 모듈에서 고유한 CSS 클래스 이름을 생성합니다. 모든 스타일은 해당 구성 요소로 범위가 지정되어 구성 요소 외부에 정의된 스타일에 영향을 주지 않고 캡슐화를 제공합니다. 이 기능이 내장되어 있으면 CSS 클래스 이름 충돌, 우선순위 경쟁, 또는 전체 코드베이스에서 고유한 클래스 이름을 만들기 위해 낭비되는 시간에 대해 걱정할 필요가 없습니다.
❗️ 주의할 점
만약 CSS-in-JS와 일반 CSS를 같이 사용한다면 CSS 스타일 규칙에따라 적용된다는 것을 염두해두어야 한다.
CSS-in-JS는 '클래스 선택자'를 사용해서 구현하기 때문에 만약 추가적으로 스타일을 구현할 때 '아이디 선택자' or '인라인 스타일'로 구현하면 먼저 적용된다는 점을 기억해야 한다.
📚 일반적인 CSS의 스타일 적용 규칙
다음과 같은 순서로 CSS의 우선순위가 결정됩니다.
- 인라인 스타일(Inline Styles): HTML 요소의 style 속성에 직접 정의된 스타일은 다른 모든 스타일보다 높은 우선순위를 갖습니다.
- 아이디 선택자(ID Selectors): # 기호를 사용하여 정의된 아이디 선택자는 클래스 선택자보다 높은 우선순위를 가집니다.
- 클래스 선택자(Class Selectors), 속성 선택자(Attribute Selectors), 가상 클래스 선택자(Pseudo-class Selectors): ., [], :와 같은 선택자는 태그 선택자보다 높은 우선순위를 갖습니다.
- 태그 선택자(Element Selectors): 요소 이름만으로 정의된 선택자는 가장 낮은 우선순위를 갖습니다.
- 스타일 시트 순서: 스타일 시트에서 나중에 정의된 규칙은 더 이전에 정의된 규칙보다 우선적으로 적용됩니다.
재사용성
구성 요소는 재사용이 가능하므로 한 번만 작성하면 어디서나 실행할 수 있습니다.
동일한 애플리캐이션 내에서 뿐만 아니라 동일한 프레임워크로 빌드된 다른 앱에서도 구성 요소를 재사용할 수 있습니다.
이름 지정 및 재정의 문제 없음
언급한 바와 같이 사용하는 스타일의 범위가 컴포넌트에 지정되므로 이름 지정이나 재정의 문제에 대해 생각할 필요가 없습니다.
기능적 유연성
CSS-in-JS는 본질적으로 js 코드이므로 루프, 조건, 변수, 상태 기반 스타일 지정 등과 같은 스타일 규칙에 복잡한 로직을 적용할 수 있습니다. 따라서 동적으로 기능이 필요한 복잡한 UI를 만들어야 하는 경우 이상적인 솔루션입니다.
브라우저별 확장 프로그램 자동 생성
대부분의 CSS-in-JS 라이브러리는 `-webkit`, `-moz` 와 같은 브라우저별 스타일 확장을 생성하는 기능을 내장하고 있습니다.
이동성
컴포넌트는 모든 로직과 스타일이 함께 제공되므로 안전하게 컴포넌트를 이동할 수 있습니다. 이들은 기본적으로 작동하며 느슨하게 연결된 컴포넌트로 프로그램을 구축할 수 있게 해줍니다. 또한 다른 컴포넌트에 영향을 미치지 않기 때문에 컴포넌트에서 스타일을 쉽게 제거할 수 있습니다.
CSS-in-JS의 단점
css 전처리기 지원 없음
순순한 css와 달리 js에서는 SASS 및 LESS와 같은 전처리기를 CSS와 함께 사용할 수 없습니다.
성능 문제
CSS-in-CSS를 사용할 때보다 CSS-in-JS를 사용하면 애플리케이션 렌더링 시간이 늘어날 수 있습니다.
CSS-in-JS는 CSS의 구문 분석하여 DOM에 주입하기 위해 JS가 필요하기 때문입니다.
캐싱 문제
별도로 관리되는 css 파일이 없기 때문에 css 캐싱을 활용할 수 없습니다.
번들 크기 증대
별도의 라이브러리 설치를 히야하기 때문에 번들 크기가 증가됩니다.
스타일 출력
스타일을 생성하고 브라우저에 전달하는 두 가지 상호 배타적인 방법이 있습니다.
두 방법 모두 장점과 단점이 있으므로 자세히 분석
1. `<style>` 삽입된 DOM 스타일
대부분의 CSS-in-JS 라이브러리는 스타일을 런타임 시에 DOM에 주입합니다. 이를 위해 하나 이상의 <style> 태그를 사용하거나 CSSStyleSheet API를 사용하여 스타일을 직접 CSSOM(CSS Object Model) 내에서 관리합니다. SSR(Server-Side Rendering) 중에는 스타일은 항상 렌더링된 HTML 페이지의 <head> 내에 <style> 태그로 추가됩니다.
이 접근 방식에는 몇 가지 주요 이점과 선호되는 사용 사례가 있습니다.
1. SSR 중에 스타일을 인라인으로 처리하는 것은 FCP (First Contentful Paint)와 같은 페이지 로딩 성능 지표를 향상시킵니다. 이는 서버에서 별도의 .css 파일을 가져와서 렌더링이 차단되지 않기 때문입니다.
2. 초기 HTML 페이지를 렌더링하는 데 필요한 스타일만 인라인으로 처리하여 SSR중에 즉시 사용 가능한 Critical CSS 추출을 제공합니다. 또한 모든 동적 스타일은 제거되므로 더 적은 코드를 다운로드하여 로딩 시간을 더욱 개선합니다. (예외 : 정적 css 추출을 사용하는 라이브러리나 100% 정적인 CSS인 경우)
3. 동적 스타일링은 일반적으로 구현이 더 쉽습니다. 이 접근 방식은 높은 상호작용성을 가진 사용자 인터페이스와 단일 페이지 애플리케이션(SPA)과 같은 경우에 더 적합해 보입니다. 이러한 경우 대부분의 컴포넌트가 클라이언트 측에서 렌더링되기 때문입니다.
단점은 일반적으로 총 번들 크기와 관련이 있습니다.
1. 브라우저에서 동적 스타일 지정을 처리하려면 추가 런타임 라이브러리가 필요합니다.
2. 인라인된 SSR 스타일은 기본적으로 캐시되지 않으며 서버에서 .html 렌더링된 파일의 일부이기 때문에 요청이 있을 때마다 브라우저에 제공되어야 합니다.
3. SSR 중에 .html 페이지에 인라인으로 포함된 스타일은 rehydration 과정에서 다시 브라우저로 JS리소스로 전송됩니다.
2. 정적 .css 파일 추출
styles DOM에 주입하는 대신, 이들은 정적 .css 파일을 생성합니다.
로딩 성능 측면에서 보면 일반적인 CSS 파일 작성 방식과 동일한 이점과 단점을 얻을 수 있습니다.
1. 출력되는 코드의 총량은 훨씬 작아지며, 추가적인 런타임 코드나 rehydration 오버헤드가 필요하지 않습니다.
2. 정적 .css 파일은 브라우저 내에서 기본적으로 캐싱되므로 동일한 페이지에 대한 후속 요청은 스타일을 다시 가져오지 않습니다
3. 이 접근 방식은 SSR(Server-Side Rendering)페이지나 정적으로 생성된 페이지에서 기본 캐싱 메커니즘을 활용하는 경우 매력적으로 보입니다.
단점
1. 캐시가 비어있는 상태로 처음 방문할 때 이 방법을 사용하면 일반적으로 이전에 언급한 방법에 비해 FCP가 더 길어집니다. 따라서 처음 방문자에게 최적화할지 또는 재방문자에게 최적화할지를 선택할 때 이러한 접근 방식 선택에 중요한 역할을 할 수 있습니다.
2. 페이지에서 사용 가능한 모든 동적 스타일은 미리 생성된 번들에 포함되어 잠재적으로 더 큰 .css 리소스를 미리 로드해야 합니다.
거의 대부분의 라이브러리는 스타일을 DOM에 주입하는 첫 번째 방법을 사용해서 구현합니다. css 정적 파일 추출을 지원하는 유일한 라이브러리는 Treat 입니다.
atomic css
일부 라이브러리는 한 단계 더 최적화하여 Tachyons 또는 Tailwind와 같은 프레임워크에서 영감을 받아 atomic CSS-in-JS라는 기술을 구현했습니다.
특정 요소에 대해 정의된 모든 속성을 포함한느 CSS 클래스를 생성하는 대신 각각의 고유한 CSS 속성/값 조합에 대해 고유한 CSS 클래스를 생성합니다.
/* classic, non-atomic CSS class */
._wqdGktJ {
color: blue;
display: block;
padding: 1em 2em;
}
/* atomic CSS classes */
._ktJqdG { color: blue; }
._garIHZ { display: block; }
/* short-hand properties are usually expanded */
._kZbibd { padding-right: 2em; }
._jcgYzk { padding-left: 2em; }
._ekAjen { padding-bottom: 1em; }
._ibmHGN { padding-top: 1em; }이렇게 하면 이러한 개별 CSS 클래스 각각을 코드 베이스의 어디에서나 재사용할 수 있기 때문에 높은 수준의 재사용이 가능합니다.
이론적으로 이것은 대규모 응용 프로그램의 경우에 정말 훌륭하게 작동합니다.
전체 애플리케이션에 필요한 고유한 CSS 속성의 수가 한정되어 있기 때문에입니다.
스케일링 계수는 선형이 아니라 대수적이기에 non-atomic CSS 보다 CSS 출력이 적습니다.
사용량
만족도
Reference
https://sebastienlorber.com/atomic-css-in-js
https://web.dev/rendering-on-the-web/#rehydration-issues
https://github.com/andreipfeiffer/css-in-js
https://webdesign.tutsplus.com/an-introduction-to-css-in-js-examples-pros-and-cons--cms-33574a
https://css-tricks.com/a-thorough-analysis-of-css-in-js/
https://www.samsungsds.com/kr/insights/web_component.html
https://bepyan.github.io/blog/2022/css-in-js
https://blog.bitsrc.io/css-vs-css-in-js-what-you-should-choose-in-2023-392a600cb977
'Javascript > 공부' 카테고리의 다른 글
| [JS] for vs forEach (0) | 2023.05.17 |
|---|---|
| [공부] 계산기 만들기 <이전자료> (0) | 2022.10.30 |
