CSS의 역사와 CSS-in-JS

출저:orezytivarg.github.io CSS의 진화

CSS란?

먼저 CSS가 무엇인지 알아보자면 CSS란 Cascading Style Sheets의 약자로, HTML이나 XML 같은 마크업 언어로 작성된 문서의 시각적인 스타일과 레이아웃을 정의하는 스타일 시트 언어입니다. CSS는 웹 페이지나 앱에 디자인을 적용해서 예쁘게 보이고 화면을 직관적으로 만들어주는 역할을 합니다.

---

CSS의 발전 스토리

CSS는 1996년 W3C(World Wide Web Consortium)에서 처음 소개되었다고 합니다. 초기에는 HTML과 CSS를 함께 작성하고, 스타일 규칙을 적용할 HTML 요소를 선택하는 방법이 간단하게 설명되어 있었는데 이는 대규모 프로젝트에서 유지보수가 어렵고, 팀원 간 작업 효율성이 떨어진다는 문제점이 발생했대요! 

90년대 웹사이트. 사람의 이목을 끄는데만 목적이 있었다.

90년대에는 화려한 인터페이스를 만드는데 집중했어요 위에 이미지처럼.. 사람의 주목을 끄는게 제일 중요했으며 문제가 생겨도 신경쓰지 않는 인라인스타일의 CSS로 만들며 마치 웹페이지에 움짤 몇개와 재미난 요소를 넣어주며 사이트를 방문하는 사람을 잡아두는데 급했습니다.

!important를 마구잡이로 사용한 결과..

그 후, 동적 사이트를 만들기 시작했지만 CSS는 이미 엉망진창이었고 개발자들은 모두 기존의 CSS를 사용하는 방식이었으며 나중에 설정한 값이 적용되지 않게 속성값 뒤에 !important를 붙이게 되는 악순환으로 이어졌습니다.

프로젝트 규모가 커지고 복잡성 및 팀원이 증가하면서 이전에 이어지던 관행은 점점 더 크게 문제로 다가왔습니다. 따라서 스타일링을 할 수 있는 일관된 패턴이 없는 CSS에서 올바른 방법을 찾기위해 다양한 CSS 방법론이 등장하게 되었습니다.

CSS 방법론은 CSS 코드의 구조와 조직을 표준화하고 개선하며, 유지보수와 확장성을 개선하기 위해 만들어진 일련의 원칙과 규칙이에요. 대표적으로는 BEM(Block Element Modifier), SMACSS(Scalable and Modular Architecture for CSS), OOCSS(Object-Oriented CSS), ITCSS(Inverted Triangle CSS) 등이 있습니다.

최근 가장 많이 사용하는 방법론은 BEM(Block Element Modifier)입니다. BEM은 클래스 이름을 적극적으로 사용하여 HTML 요소를 나타내는 데 도움을 주고, 선택자에 대한 규칙을 명확하게 정의하여 중첩을 최소화하고 재사용성을 높이는 데 중점을 두고 있습니다. 이를 통해 유지보수성과 확장성을 높이고, 불필요한 선택자를 최소화하여 CSS의 성능을 향상시키는 효과를 갖는다고 합니다.

---

자바스크립트 안으로 들어오게 된 CSS

CSS-in-JS

CSS-in-JS는 JavaScript 코드 안에서 CSS를 생성하는 방식으로, 컴포넌트 단위로 CSS를 관리하고 스타일 규칙을 작성할 수 있습니다. 기존의 CSS 방식에서 CSS 파일을 외부에서 불러와 사용하는 것과는 다른 방식으로, JavaScript 코드 안에 CSS 코드가 포함되어 있어서 컴포넌트와 CSS가 결합된 형태로 동작합니다! (리액트에서도 이 방식으로 작성할 거에요!)

CSS-in-JS를 사용하면 컴포넌트를 좀 더 독립적으로 유지하면서, 스타일과 로직이 더 긴밀하게 결합되어 더 빠른 개발을 할 수 있습니다.
또한, 컴포넌트를 구성하는 스타일 규칙을 모두 포함하고 있기 때문에 다른 컴포넌트에 영향을 주지 않으므로 스타일 규칙 충돌이 발생하지 않는 이점이 있습니다.

덕분에 CSS-in-JS 방식으로 작성된 코드는 CSS 방식보다 유지보수와 확장성이 높다는 장점이 있습니다. 특히, React와 같은 JavaScript 기반의 프레임워크와 함께 사용하면 컴포넌트 기반 개발 방식을 적극적으로 활용할 수 있어서 더욱 효율적인 개발이 가능합니다.

근데 CSS-in-JS 방식은 CSS와 JavaScript 코드가 섞이는 형태로 작성되기 때문에, 스타일 규칙과 로직 코드가 뒤섞이는 형태로 코드가 작성되는 문제점도 있어요. 또한, CSS 파일을 외부에서 불러오는 방식에 비해 초기 로딩 속도가 느리고, 검색엔진 최적화(SEO) 측면에서도 불리할 수 있다는 점..

따라서, CSS-in-JS 방식을 사용할 것인지 CSS 파일을 외부에서 불러와 사용할 것인지는 프로젝트의 특성과 개발 환경에 따라 결정되어야 합니다.