소개

Atomic CSS는 HTML 클래스명을 기반으로 자동으로 CSS 규칙을 생성합니다. 사전 정의된 패턴을 인식하여 각 클래스에 대응하는 스타일을 즉시 생성함으로써 CSS 작성의 번거로움을 획기적으로 줄여줍니다. 이를 통해 Utility-Frist CSS 프레임워크를 쉽게 구축할 수 있으며, 개발 속도와 효율성을 극대화할 수 있습니다.

핵심 기능

1. HTML, JS, PHP 등과 같이 처리할 파일 확장자를 지정하여, 지정된 단일 또는 복수의 파일 내 클래스명을 기반으로 자동으로 CSS 규칙을 생성합니다.
2. .atomic.json 설정 파일을 통해 프로젝트별 처리할 파일 확장자 설정 및 처리된 파일의 경로를 개별적으로 설정할 수 있습니다.

사용법

1. 프로젝트 루트 경로에 .atomic.json 파일을 생성합니다. 생성하지 않을 경우 아래와 같이 기본 설정 값으로 처리됩니다.

• cssDirectoryPath: /assets/css/common/
• extensions: [".html"]

2. .atomic.json 파일에 다음과 같은 설정을 추가합니다.

// .atomic.json
{
    "extensions": [".html", ".tsx", ".vue"],
    "selectedLanguages": ["html", "php", "typescriptreact", "vue"],
    "cssDirectoryPath": "/src/assets/css/"
}

• cssDirectoryPath: 생성된 CSS 파일이 저장될 경로를 지정합니다.
• extensions: 처리할 파일의 확장자를 배열로 지정합니다.

동작 방식

1. 파일을 저장할 때마다 지정된 확장자의 파일에서 클래스명을 추출합니다.
2. 추출된 클래스명에 대한 CSS 규칙을 생성하여 지정된 경로에 CSS 파일로 저장합니다.

장점

• Utility-Frist CSS 방법론을 사용하여, 미리 정의되지 않은 클래스를 동적으로 생성하여 사용합니다. 핵심은 반복적으로 사용되는 원자 단위의 스타일 조각들을 유틸리티 클래스 규칙으로 사용하여 빠르고 유연하게 스타일을 적용할 수 있습니다.
• 특히 재사용 가능한 유틸리티 클래스를 사용하며, 클래스 이름이 곧 스타일 자체를 설명하기 때문에 누구나 쉽고 빠르게 클래스들을 조합하여 다양한 디자인을 만들 수 있습니다.
• 협업 시 HTML에서 바로 디자인 변경 및 조정이 가능하기 때문에 복잡하게 요청하고 처리하는 등의 작업 시간이 대폭 감소합니다.
• 전체 프로젝트에 걸쳐 동일한 유틸리티 클래스를 사용함으로써 스타일의 일관성을 유지할 수 있고 매번 새로운 클래스명을 고민하고 정의하는 대신 이미 만들어진 유틸리티 클래스를 사용하여 더욱 빠르고 효율적인 개발이 가능해 집니다.
• 다른 라이브러리와 종속성이 없기 때문에 확장팩 설치 이외 요구되는 까다로운 조건이 없습니다.
• 다른 라이브러리와는 달리 무제한의 값과 단위를 자유롭게 조합하여 사용할 수 있습니다.
• 또한, 총 7가지 해상도에 대응하는 미디어 쿼리 접두사를 이용하여 아주 간편하게 반응형 웹 어플리케이션을 구축할 수 있습니다.
• 별도의 학습없이 논리적으로 클래스명을 이해하고 예측하여 사용할 수 있도록 러닝커브를 최소화 하였습니다.
• 사용자가 저장한 클래스를 동적으로 스타일이 생성되며, CSS에서 가능한 모든 단위체계를 사용할 수 있으며 폭 넓은 자유도로 어떠한 환경에서도 사용할 수 있습니다.

특징

• 재사용 가능한 유틸리티 클래스
• 직관적인 스타일링
• 유지보수의 용이성
• 코드의 일관성
• 빠른 개발 속도

상세 클래스명에 대한 규칙들은 아래 가이드 문서를 참고하여 주시기 바랍니다. https://codpub.notion.site/Atomic-CSS-865ab692db854aa689735559952a8ab8?pvs=25

지원 및 문의

eorud0713@gmail.com