본문 바로가기
프로그래밍/CSS

[CSS 핵심강좌] 12. 툴링과 워크플로우 (CSS 프레임워크 및 BEM, OOCSS, SMACSS와 같은 CSS 방법론을 포함)

by 꾸션 2023. 3. 5.

CSS 툴링과 워크플로우는 CSS 코드의 개발 및 유지보수에 사용되는 도구, 방법론 및 프로세스를 말합니다.

 

일반적으로 사용되는 CSS 도구에는 CSS 프레임워크, 전처리기 및 빌드 툴이 있으며, 일반적으로 사용되는 CSS 방법론에는 BEM, OOCSS 및 SMACSS가 있습니다.

 

CSS 프레임워크

CSS 프레임워크는 특정 유형의 프로젝트를 시작하는 데 사용되는 기본 출발점으로 사용되는 미리 준비된 라이브러리입니다.

 

일관되고 기능적인 웹 사이트 또는 애플리케이션을 빠르고 쉽게 만들기 위해 CSS, JavaScript 및 기타 자산 세트를 제공합니다.

 

대표적인 CSS 프레임워크로는 Bootstrap, Foundation, Materialize 등이 있습니다.

 

CSS 전처리기

CSS 전처리기는 변수, 함수 및 믹스인과 같은 추가 기능을 제공하여 CSS의 기능성을 확장하는 스크립팅 언어입니다. 가장 인기있는 CSS 전처리기는 Sass와 Less입니다.

 

CSS 빌드 툴

CSS 빌드 툴은 CSS 코드를 빌드, 컴파일 및 최소화하는 프로세스를 자동화하는 도구입니다. 이를 통해 개발 프로세스를 간소화하여 CSS 코드를 더 빠르고 쉽게 작성, 테스트 및 배포할 수 있습니다.

 

대표적인 CSS 빌드 툴로는 Grunt, Gulp, Webpack 등이 있습니다.

 

 

BEM (Block Element Modifier)

BEM은 CSS 코드를 구조화하고 모듈성과 확장성을 촉진하기 위해 의미있는 네이밍 컨벤션을 강조하는 CSS 방법론입니다.

 

BEM에서 CSS 클래스는 블록-요소-수정자 구문을 사용하여 블록은 고수준 컴포넌트, 요소는 컴포넌트의 특정 부분을 나타내고 수정자는 컴포넌트 또는 요소의 변형을 나타냅니다.

 

 

OOCSS(Object-Oriented CSS)

OOCSS는 CSS 코드에서 구조와 피부의 분리를 장려하는 CSS 방법론으로 재사용 가능한 CSS 객체와 모듈형 CSS 객체의 생성을 촉진합니다.

 

그것은 유형 기반 선택기가 아닌 클래스 기반 선택기의 사용을 장려하고, 복잡한 설계를 만드는 데 필요한 코드의 양을 줄이기 위해 CSS 상속의 사용을 장려합니다.

 

 

SMACSS (Scalable and Modular Architecture for CSS)

SMACSS는 재사용 가능하고 모듈화된 CSS 코드를 생성하는 것을 장려하며, 유연하고 확장 가능한 CSS 개발 접근 방식을 제공합니다.

 

CSS 코드를 기본, 레이아웃, 모듈, 상태 및 테마 다섯 가지 스타일 유형으로 분류하고 CSS 코드를 조직화하고 구조화하기 위한 지침을 제공하여 유지 관리와 확장성을 높이도록 합니다.

 

 

이러한 CSS 도구와 방법론을 활용하여 CSS 코드의 품질과 유지 관리성을 향상시켜 웹 사이트나 애플리케이션의 복잡한 스타일을 개발하고 관리하기 쉽도록 할 수 있습니다.

 

이에 따라 CSS 도구와 워크플로우는 효율적이고 효과적인 CSS 개발의 중요한 구성 요소입니다.

반응형

댓글