React Native의 스타일시트 컴포넌트는 빌트인 스타일링 시스템으로, 개발자가 CSS를 사용하지 않고 자바스크립트 객체 형식으로 컴포넌트의 스타일을 정의할 수 있도록 해줍니다. 이 접근 방식은 처음에는 성능을 개선하고 런타임에 스타일을 파싱하고 적용하는 오버헤드를 줄이기 위해 채택되었습니다. 스타일시트는 플랫폼별 스타일 지정 및 자동 공급업체 접두사 추가와 같은 추가 기능도 제공합니다.
Inline CSS
Module CSS
CSS-in-JS
CSS 방법론에 대한 발전 알아보기
ITCSS
ITCSS(Inverted Triangle CSS)는 해리 로버츠가 2013년에 제안한 CSS 아키텍처를 구성하는 방법론입니다. CSS 코드를 구조화하고 구성하는 확장 가능하고 유지 관리 가능한 접근 방식입니다.
ITCSS의 주요 아이디어는 CSS 코드를 특수성과 종속성에 따라 구성하는 것입니다. 저수준 설정부터 고수준 추상화까지 CSS 코드를 여러 계층으로 나눕니다. 레이어는 스타일이 올바른 순서로 적용되고 특이성이 항상 유지되도록 하는 방식으로 배열됩니다.
ITCSS의 레이어는 다음과 같습니다
설정: 이 레이어에는 글꼴 패밀리, 글꼴 크기, 색상 등과 같은 변수, 기본값 및 전역 구성이 포함됩니다.
도구: 이 레이어에는 재사용 가능한 코드를 만드는 데 사용되는 믹스인 및 함수가 포함됩니다.
일반: 이 계층에는 상자 크기 재설정, 정규화.css 및 CSS 재설정과 같은 전역 규칙이 포함됩니다.
요소: 이 계층에는 제목, 단락, 링크 및 목록과 같은 기본 HTML 요소에 대한 스타일이 포함됩니다.
객체: 이 계층에는 그리드, 미디어 개체 및 카드와 같은 재사용 가능한 디자인 패턴이 포함됩니다.
컴포넌트: 이 계층에는 탐색, 양식, 버튼과 같은 특정 UI 구성 요소가 포함됩니다.
유틸리티: 이 레이어에는 여백, 패딩 및 텍스트 정렬과 같은 유틸리티 클래스가 포함됩니다.
ITCSS는 관심사를 명확하게 분리하여 CSS 코드를 쉽게 유지 관리, 확장 및 수정할 수 있도록 합니다. 또한 스타일을 효율적으로 정리하고 재사용할 수 있으므로 CSS 부피를 줄이는 데 도움이 됩니다.
ITCSS는 BEM, SMACSS 또는 OOCSS와 같은 다른 CSS 방법론만큼 대중적이지는 않지만 대규모 애플리케이션 및 조직에서 널리 사용됩니다. CSS 아키텍처에 대한 체계적이고 통합된 접근 방식을 제공하므로 여러 팀과 개발자가 참여하는 프로젝트에 특히 유용합니다.
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0
