# 3. CSS in JS

## 1. CSS

Cascading Style Sheets\
HTML이나 XML([SVG](https://ko.wikipedia.org/wiki/%EC%8A%A4%EC%BC%80%EC%9D%BC%EB%9F%AC%EB%B8%94_%EB%B2%A1%ED%84%B0_%EA%B7%B8%EB%9E%98%ED%94%BD%EC%8A%A4), [XHTML](https://ko.wikipedia.org/wiki/XHTML) 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어\
웹 페이지에 스타일과 레이아웃을 적용할 때 사용

<figure><img src="https://github.com/ShinjungOh/TIL/blob/main/Images/css-declaration.png?raw=true" alt="css-declaration" width="100%"><figcaption></figcaption></figure>

> **🙋🏻‍♀️️ 주의 사항**
>
> CSS 를 잘 사용하기 위해선 CSS 자체에 대해서 잘 알고 있어야 합니다. 레퍼런스를 참고하여 CSS 를 정리해봅시다. 스타일 자체는 굉장히 많기 때문에 자주 사용하는 것들 위주로 찾아서 정리하시면 좋습니다. 특히나 선택자, 박스모델, media query, Flexbox, Grid 정도는 필수적으로 알고 계셔야 합니다.
>
> 💡 참고 레퍼런스
>
> * [CSS - MDN](https://developer.mozilla.org/ko/docs/Web/CSS/Reference)
> * [flexbox - CSS-tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
> * [Grid - CSS-tricks](https://css-tricks.com/snippets/css/complete-guide-grid/)

<br>

## 2. CSS in JS

[CSS in JS](https://en.wikipedia.org/wiki/CSS-in-JS)

자바스크립트를 이용해 **스타일 컴포넌트** 형태로 사용하는 것이 핵심

```tsx
import styled from 'styled-components';
// Create a component that renders a <p> element with blue text
const BlueText = styled.p`
 color: blue;
`;

<BlueText>My blue text</BlueText>
```

### 라이브러리

* [Emotion](https://emotion.sh/docs/introduction)
* [Styled Components](https://styled-components.com/)
* [JSS](https://cssinjs.org/?v=v10.10.0)
* [Tailwind CSS](https://tailwindcss.com/)

### 참고 레퍼런스

#### [A Unified Styling Language (2017)](https://blog.rhostem.com/posts/2017-06-24-unified-styling-language)

1. Scoped styles
2. Critical CSS
3. Smarter optimisations
4. Package management
5. Non-browser styling

#### [All You Need To Know About CSS-in-JS (2017)](https://d0gf00t.tistory.com/22)

1. **Thinking in components** ✅ 컴포넌트로 사고할 수 있다는 것이 핵심
2. CSS-in-JS **leverages the full power of the JavaScript ecosystem** to enhance CSS.
3. True rules isolation
4. Scoped selectors
5. Vendor Prefixing
6. Code sharing
7. **Only the styles which are currently** in use on your screen are also in the DOM (react-jss).
8. Dead code elimination
9. Unit tests for CSS

#### [Most popular CSS-in-JS libraries](https://npmtrends.com/aphrodite-vs-emotion-vs-glamorous-vs-jss-vs-radium-vs-styled-components-vs-styletron)

2023년 4월 기준으로 styled-components > JSS > Emotion 순서

### 성능 이슈

[CSS-in-JS와 성능 (2021)](https://hyeonseok.com/blog/877)\
[Why We're Breaking Up with CSS-in-JS (2022)](https://bit.ly/3g6QufF)\
→ CSS 파일과 JS 파일 로딩의 차이

CSS는 병렬로 로딩할 수 있고 속도가 빠른데,\
JS를 이용하면 로딩이 다 끝나고 나서야 무언가를 진행할 수 있음

### 대안

* [Linaria](https://linaria.dev/)
  * Zero-Runtime CSS in JS
  * CSS를 평범한 텍스트로 작성
  * React에 종속적이지 않지만, React Styled Component도 지원함
* [vanilla-extract](https://vanilla-extract.style/)
  * Zero-runtime Stylesheets in **TypeScript**
  * CSS를 오브젝트 형태로 표현
  * React의 Inline Style과 유사
  * React와 무관하게 사용 가능


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shinjungohs-dev-road.gitbook.io/megaptera-frontend/undefined/week8/cssinjs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.