Webpixels CSS 및 Bootstrap으로 앱을 10배 더 빠르게 구축

Webpixels CSS는 Bootstrap 5를 기반으로 하는 비교적 새로운 프로젝트입니다. 웹 앱을 빌드하는 방식을 개선해야 했기 때문에 시작했습니다. 가장 시간이 많이 걸리는 작업은 일반적으로 프로젝트 설정과 관련된 작업입니다. 새 프로젝트 만들기, 구조 설정, 일부 사용자 지정 코드 상용구를 포함한 스타일 및 스크립트 통합 등이 있습니다.

수백 개의 프로젝트 후에 대부분의 프로젝트에서 반복되는 것을 발견할 수 있었고 필요한 모든 곳에 설치하고 재사용할 수 있는 하나의 저장소에 포함했습니다.

그래서, 그것은 무엇입니까?

기본적으로 Webpixels CSS는 부트스트랩 기본 버전의 확장입니다. 너무 많은 사용자 지정 코드를 사용하지 않고 기본 구성 요소를 통합하고 그 위에 새 구성 요소를 추가합니다. 이를 통해 새 버전으로 더 빠르게 업데이트할 수 있습니다.

구성 요소를 구축하는 방식에서 흥미로운 점은 맞춤 CSS를 작성하지 않으려고 최대한 노력한다는 것입니다. 내가 하는 방식: 유틸리티 클래스

유틸리티 클래스는 새로운 것이 아닙니다. Bootstrap은 몇 년 전에 소개했습니다. 이 개념은 Tailwind CSS, Windi CSS 및 최근 출시된 Uno CSS와 같은 프로젝트에서 더욱 발전되었습니다.

그러나 부트스트랩에 대해 제가 좋아하는 점은 구성 요소와 유틸리티라는 두 개념 사이의 균형입니다.

올바른 균형 찾기

구성 요소는 특정 상황에서 일부 코드를 캡슐화하고 필요할 때 재사용할 수 있도록 도와주기 때문에 훌륭합니다(예: 버튼, 카드, 아바타 등). Sass 변수를 사용하여 이들의 기본 모양과 느낌을 사용자 지정하고 브랜드의 정체성에 맞게 조정할 수 있습니다.

하지만 더 필요하면 어떻게 됩니까? 특정 상황에서 일부 속성을 변경하는 것과 같습니다. 과거에는 이러한 스타일을 추가하기 위해 사용자 정의 CSS 수정자 클래스를 생성해야 했습니다.
.btn 클래스의 버튼이 있다고 가정해 보겠습니다.

.btn {
   background-color: red;
   border: 1px solid dark;
   padding: 1rem 2rem;
}

예를 들어 여백과 같은 몇 가지 추가 속성을 추가하려고 합니다. 새 클래스를 만드는 대신 다음을 수행합니다.

.btn-modifier {
   margin: 2rem;
}

이제 다른 방법이 있습니다. 유틸리티 클래스를 사용하면 동일한 작업을 HTML에서 바로 수행할 수 있습니다. 더 이상 맞춤 수업이 없습니다. 더 깨끗하고 빠르며 성능과 파일 크기 측면에서 많은 도움이 됩니다.

<a href="#" class="btn m-4">Button</a>

저는 이것이 아름답고 우아한 접근법이라고 생각합니다. 그리고 부트스트랩의 다음 버전에서는 팀이 꽤 멋진 것을 내놓을 것이라고 확신합니다.

작동 방식

Webpixels CSS를 사용하여 저는 이 두 가지 개념을 사용 사례의 80%를 포함하도록 확장했습니다. Bootstrap에 아직 존재하지 않는 몇 가지 새로운 구성 요소를 추가하고 포함된 API를 사용하여 유틸리티 클래스의 포괄적인 목록을 만듭니다. documentation 에 모두 문서화되어 있는 것을 볼 수 있습니다.

이 두 가지를 배치하고 구성 요소 라이브러리를 만들기 시작했습니다. 디자인 코드는 단순성입니다. 최대한 붙으려고 노력합니다.

현재 약 500개의 구성 요소와 40개 이상의 템플릿이 있습니다. 매주 새로운 항목을 작업하고 있습니다. 바라건대, 나는 계속해서 충분한 지원과 고객을 얻을 수 있지만 지금까지 피드백은 훌륭했습니다.

단일npm install을 사용하면 이 모든 항목에 액세스할 수 있으며 추가 단계가 필요하지 않습니다. 필요한 스니펫 복사를 시작하면 됩니다. 보기 좋게 유지하면서 기능에 더 집중할 수 있습니다.

마지막 생각들

나는 항상 이것을 쓰고 싶었지만 시간을 찾지 못했습니다. 그 코드는 스스로 작성하지 않을 것입니다 😂

또한 @webpixels/css를 최신 Bootstrap 버전으로 업데이트했습니다. 중요한 변경 사항이 발생하지 않았으므로 마이그레이션이 매우 원활하게 진행되어야 합니다. 사용 가능한 새 버전으로 package.json 파일을 업데이트해야 합니다.

저희 작업을 지원하고 싶다면 give it a ⭐ on GitHub .

🙏