누적 스타일 시트

"그냥 CSS입니다. 일어날 수 있는 최악의 상황은 무엇입니까?"리팩토링하기 몇 달 전의 일부 웹 개발자.

예부터 시작하겠습니다. 간단한 파란색 버튼을 만드는 것이 얼마나 어렵습니까? 하나의 선택기, 아마도 호버 상태 및 몇 가지 속성과 같습니다. 이 같은:

.button {
  font-size:18px;
  padding:8px 24px;
  background:#2196f3;
  color:#fff;
  border-radius:2px;
  border:0;
  display:inline-block;
  cursor:pointer;
}

.button:hover {
  background:#1e87db
}

동일한 접근 방식으로 다양한 드롭다운, 사이드바, 제목, 섹션 등을 만들 수 있습니다. 하지만...

위의 코드와 접근 방식이 올바른 방법입니까?

음... 🤷.

문제

새 구성 요소를 만들거나 섹션 스타일을 지정할 때마다 CSS 크기가 커집니다. 이미지에 테두리 반경을 추가하고 텍스트에 글꼴 크기를 추가하면 어떻게 될까요?

.button { /* ... */ border-radius:2px; /* ... */ }
img { border-radius:2px; /* Duplicated */ }
.subtitle { font-size:18px /* Duplicated */ }

해결책

버튼에 대한 CSS를 작성하는 더 나은 방법으로 생각되는 솔루션은 구성 요소와 유틸리티 선택기를 혼합하는 것입니다.

.hover\:background\:\#1e87db:hover,
.button:hover { background: #1e87db }

.font-size\:16px, .button { font-size: 16px }

.padding\:8px__24px, .button { padding: 8px 24px }

.background\:\#2196f3, .button { background: #2196f3 }

.color\:\#fff, .button { color: #fff }

.border-radius\:2px, .button { border-radius: 2px }

.border\:0, .button { border: 0 }

.display\:inline-block, .button { display: inline-block }

.cursor\:pointer, .button { cursor: pointer }

코드를 보면 아마 "도대체 저게 뭐지?"같은 생각이 들 것입니다.

설명하겠습니다. CSS에 추가하는 모든 property:value 유틸리티도 있어야 합니다.

어디서나 쉽게 재사용할 수 있습니다.

중복 속성이 적습니다

.

프로젝트가 클수록 더 많은 클래스가 재사용되므로 CSS 크기가 느리게 증가합니다

.

좋습니다. 하지만 누가 이와 같은 것을 수동으로 작성하고 싶겠습니까? 좋은 소식은 그럴 필요가 없다는 것입니다.

구출 스타일 화

위의 이유 때문에 저는 stylifycss.com 을(를) 개발해 왔습니다.

다음은 Stylify(HTML 탭 체크아웃)를 사용하여 동일한 버튼을 생성하는 방법에 대한 예입니다.



CSS 선택기도 축소할 수 있습니다when used in node.js.

<button class="_91rm6e"></button>
<style>
._79qtu:hover, ._91rm6e:hover { background: #1e87db }

._h0jma, ._91rm6e { font-size: 16px }

._gtcr, ._91rm6e { padding: 8px 24px }

._8kde4, ._91rm6e { background: #2196f3 }

._olqrj2, ._91rm6e { color: #fff }

._5s8un, ._91rm6e { border-radius: 2px }

._8r76, ._91rm6e { border: 0 }

._qprvp, ._91rm6e { display: inline-block }

._4gipbn, ._91rm6e { cursor: pointer }
</style>

또한 시간이 걸리고 레이아웃용 CSS와 각 페이지를 별도로 분리하는 경우(which is easy to do with Stylify) 각 페이지에 대해 정말 작은 CSS 청크를 가질 수 있습니다.
또한 중복에 대해 걱정할 필요가 없으며 선택기가 자동으로 축소됩니다.

당신이 무슨 생각을하는지 제게 알려주세요!

나는 어떤 피드백에도 기뻐할 것입니다! Stylify은 여전히 ​​새로운 라이브러리이며 개선할 여지가 많습니다 🙂.


연락을 유지하다:
👉
👉
👉 stylifycss.com
👉
👉 medium.com/@8machy