Develop Note by J.S.

[CSS] CSS-in-CSS vs CSS-in-JS 본문

Language/CSS

[CSS] CSS-in-CSS vs CSS-in-JS

js-web 2023. 6. 23. 10:49
반응형

1. CSS in CSS

일반적으로 CSS 코드를 작성하는 것으로 내부 스타일시트, 외부 스타일시트, 인라인 스타일 방법으로 작성 할 수 있습니다.

  • 내부 스타일 시트
<head>...</head>
<body>...</body>

<style> 
body {
	background-color : grey;
}
h1 {
	color : red;
}
</style>
  • 외부 스타일 시트
//외부에 작성된 style.css 파일을 .html 에서 호출
<link rel="stylesheet" type="text/css" href="style.css">
  • 인라인 스타일
<h1 style="color:blue; margin-left:30px;">This is a heading</h1>

 

2. CSS in JS

자바스크립트 코드에서 CSS를 작성하는 것을 말하며 CSS를 작성할 때 발생되는 문제점들을 해결하기 위한 기능입니다. 예를들어 선택자의 네이밍이 복잡해지는 부분, 상속에 따른 독립성 문제 및 의존관계를 해결할 수 있습니다. 

 

대표적인 CSS in JS 라이브러리로는  'Styled Components'가 있습니다. 

// myComponent.vue
<templete>
	<CustomDiv />
</templete>

<script setup>
import styled from "styled-components"
const CustomDiv = styled.div`
	min-heigth : 400px;
    background-color : grey;
`
<script>

 

3. 장단점

앞서 말씀드린 CSS in JS는 개발단계의 작업 효율성 등의 측면이 더해지지만 실제 CSS in JS와 CSS in CSS의 경우 퍼포먼스 측면 (rendering time 등)은 월등히 CSS in CSS가 좋았던 결과가 있습니다. 따라서 개발 단계에서 선택은 개발 포커스를 어떻게 보느냐에 따라 선택하면 될 것 같습니다.

 

참고 사이트
https://www.samsungsds.com/kr/insights/web_component.html

https://dinfree.com/lecture/frontend/122_css_1.html

반응형

'Language > CSS' 카테고리의 다른 글

[CSS] 선택자(Selector)  (0) 2023.07.20
'Language/CSS' Related Articles more