도우미 클래스를 사용하여 CSS를 건조하고 확장합니다

당신은 새로운 웹 프로젝트를 시작하고 코드를 확장하는 데 도움이되는 새로운 CSS 방법론을 찾고 있습니다. SMACSS, BEM 및 기타 유사한 방법론을 포함하여 모듈 식 CSS를 작성하기위한 점점 더 많은 기술 세트를 사용할 수 있습니다. 보시다시피, CSS를 작성하고 구성하는 기술이 많이 있습니다.

이 모든 방법론 외에, 우리가 건식

, 덜 반복적 인 코드를 작성하는 데 도움이되는 것이 있습니다 : 도우미 클래스 (유틸리티 클래스라고도 함). 이 개념은 얼마 전에 Smashing Magazine에 관한 Thierry Koblentz의 기사에서 논의되었지만, 나는 여기서 내 자신의 말로이 방법을 설명 할 것이라고 생각했습니다.

. 키 테이크 아웃

도우미 클래스 또는 유틸리티 클래스는 HTML 요소에서 반복적으로 사용할 수있는 추상 클래스 세트를 만들어 CSS의 반복을 제거하는 데 도움이 될 수 있습니다. 이로 인해 코드는 향후 추가를 위해 더 재사용 가능하고 확장 가능합니다. 도우미 수업은 한 작업을 수행하고 잘 수행 할 책임이 있습니다. 새 구성 요소를 만들 때 일부 클래스를 결합하여 구축하면됩니다.

헬퍼 클래스는 여백 및 패딩, 너비 및 높이, 위치 및 Z- 인덱스, 정렬 요소, 타이포그래피, 색상, 목록, 경계 및 디스플레이 값을 관리하는 데 사용될 수 있습니다. 헬퍼 클래스는 SASS 이하와 같은 CSS 전 처리기와 함께 사용할 수 있으므로 이러한 클래스를보다 쉽게 ​​만들고 관리 할 수 ​​있습니다. 도우미 클래스는 많은 혜택을 제공하지만, 여러 클래스를 단일 요소에 적용 할 수 있으므로 HTML Bloat로 이어질 수 있습니다. 이로 인해 HTML 코드가 읽고 유지하기가 더 어려워 질 수 있습니다.

도우미 클래스 란 무엇입니까? 도우미 클래스는 HTML 요소에서 계속 사용할 수있는 초록 클래스 세트를 만들어 반복을 제거하는 데 도움이 될 수 있습니다. 각 도우미 수업은 한 작업을 수행하고 잘 수행 할 책임이 있습니다. 이렇게하면 향후에 추가 될 많은 기능에 대해 코드가 더 재사용 가능하고 확장 가능하게됩니다. 따라서 새로운 구성 요소를 만들려면 일부 클래스를 결합하여 구축하면됩니다. “레고처럼 코드를 처리하십시오. 가능한 작은 작은 블록으로 코드를 나눕니다.” - @csswizardry (@stubbornella를 통해) #btconf

- Smashing Magazine (@smashingmag) 2013 년 5 월 27 일 유틸리티 클래스의 모습과 사용 방법에 대한 간단한 예를 살펴 보겠습니다. 다음 코드 스 니펫을보십시오 :

여기에서는 새로운 구성 요소를 구축 할 때 나중에 사용할 수있는 일련의 CSS 규칙을 만들었습니다. 예를 들어 일부 내용을 왼쪽에 정렬하려면 Text-Left 클래스를 사용할 수 있습니다. 마찬가지로 왼쪽 또는 오른쪽 클래스를 사용하여 필요한 방향으로 요소를 부유 할 수 있습니다. 내부 컨텐츠를 중심으로 왼쪽에 있어야하는 상자의 또 다른 예를 보자. 우리는 보통 다음과 같은 일을합니다

이 CSS와 함께 :

<span><span>.left</span>        { float: left; }
</span><span><span>.right</span>       { float: right; }
</span>
<span><span>.text-left</span>   { text-align: left; }
</span><span><span>.text-right</span>  { text-align: right; }
</span><span><span>.text-center</span> { text-align: center; }</span>

대신, 우리는 재사용 가능하고 단일 책임 도우미 클래스를 사용하여 동일한 것을 달성 할 수 있습니다.

Box 클래스를 제거하고 사전 정의 된 클래스를 남겨두고 텍스트 중심을 추가했습니다. float를 변경하고 정렬 방향을 변경하려면 재사용 할 수없는 .Box 클래스 에서이 작업을 수행하는 대신 다른 도우미 클래스를 사용할 수 있습니다.

그리드 시스템은 사용중인 도우미 클래스의 좋은 예입니다. Foundation 's Grid의 예는 다음과 같습니다

<span><span><span><div</span> class<span>="box"</span>></span>
</span><span><span><span></div</span>></span></span>

Foundation은 스크린 크기에 대해 서로 다른 폭을 가진 그리드 시스템을 생성하기 위해 함께 사용할 수있는 수많은 클래스를 제공합니다. 이 유연성은 개발자가 그리드 자체의 CSS를 편집하지 않고 새로운 맞춤형 레이아웃을 더 빠르게 만들 수 있도록 도와줍니다. 예를 들면 :
.small-2 및 .large-4 클래스는 화면 크기에 따라 요소의 너비를 설정합니다. .ROW 클래스는 열을 고정하는 컨테이너의 너비를 설정합니다. .Columns 클래스는 패딩을 설정하고 부유물을 설정합니다

이제 도우미 수업이 무엇인지 이해 했으므로 아래에 다른 범주로 제시된 프로젝트에 추가 할 수있는 재사용 가능한 클래스를 살펴 보겠습니다. 또한 예제는 일부 SASS 변수를 사용하지만 당연히 필요하지 않습니다.

. 마진과 패딩 마진과 패딩은 아마도 CSS에서 가장 많이 사용되는 속성 일 것입니다. 이것을 처리 할 수있는 초록 클래스를 추가하면 코드가 건조됩니다.

<span><span>.box</span> {
</span>    <span>float: left;
</span>    <span>text-align: center;
</span><span>}</span>

우리는 디자인의 기본 공간 장치에 대한 변수 (SASS 사용)를 정의하는 것으로 시작합니다. 1EM부터 시작하고 그 위에 다른 공간 크기에 대한 클래스를 만들 수 있습니다.

.

Basscsss의 아래 예제 코드에서와 같이 짧은 클래스 이름을 선택할 수 있습니다.

<span><span><span><div</span> class<span>="left text-center"</span>></span>
</span><span><span><span></div</span>></span></span>

당신과 당신의 팀에 맞는 것을 선택하십시오. 긴 이름은 분명히 HTML 요소를 더 크게 만들 것이지만 짧은 이름과 달리 읽을 수 있으므로 CSS를보고 일이 어떻게 작동하는지 알아 내야 할 수도 있습니다.

. 너비와 높이 웹 사이트의 다른 장소에서 섹션을 전체 높이로 설정하고 싶다고 상상해보십시오. 우리가하는 전통적인 방식은 다음과 같습니다.

그리고 우리의 CSS :
• 다른 섹션의 경우 코드를 반복합니다
및 CSS :
• 그러나 우리는 전체 높이라는 한 클래스 로이 모든 것을 줄일 수 있습니다.
아래는 위에서 사용 된 전체 높이 클래스를 포함하여 유사한 예제입니다.
• 위치 및 z-index 위치 관련 속성은 z-index와 같은 다른 속성과 결합하여 복잡한 레이아웃을 생성 할 수 있습니다. 뷰포트 또는 조상 요소 (오른쪽, 왼쪽, 왼쪽 등)와 관련하여 요소의 정확한 위치를 설정하기 위해 클래스 세트를 만들 수 있습니다.
"핀"도우미 클래스는 Mapbox의 CSS에서 영감을 얻었습니다 오른쪽 하단에 배치 된 요소를 포함하도록 최대 높이 예제를 확장하겠습니다.
데모 둘 이상의 클래스를 결합함으로써 필요한 결과를 적은 코드로 얻을 수 있습니다. 내부 요소를 오른쪽 상단에 놓으려면 핀 바닥 오른쪽 대신 핀 탑 오른쪽을 사용할 수 있습니다. 위의 코드에서도 다른 도우미 클래스를 추가했을 수도 있습니다. 패딩 1 클래스는 요소가 컨테이너 또는 뷰포트의 가장자리에 플러시되지 않도록합니다. 플로팅 요소 <span><span>.left</span> { float: left; } </span><span><span>.right</span> { float: right; } </span> <span><span>.text-left</span> { text-align: left; } </span><span><span>.text-right</span> { text-align: right; } </span><span><span>.text-center</span> { text-align: center; }</span> 왼쪽 또는 오른쪽으로 떠 다니는 요소는 왼쪽 또는 오른쪽 클래스를 사용하여 수행 할 수 있습니다. 잘 알려진 ClearFix 클래스는 부모 요소에서 플로트를 클리어링하는 데 사용될 수 있으며, 아래 Sass의 상위 선택기를 사용하여 표시됩니다.
데모 정렬 요소 정렬 기반 도우미 클래스를 사용하여 텍스트 및 기타 컨텐츠를 어느 방향으로도 정렬 할 수 있습니다.

가시성 클래스 가시성 클래스는 화면 크기, 장치 방향, 터치 스크린 또는 기타 요인에 따라 요소의 가시성을 제어합니다. 이것들은 반응 형 디자인에 편리 할 수 ​​있습니다 우리는 미디어 쿼리 내부에 다음 클래스를 가질 수 있습니다.

및 우리의 HTML :

위의 요소는 작은 화면에 숨겨져 있지만 더 큰 화면에서는 볼 수 있습니다. 우리는이 클래스를 사용하여 터치 장치의 요소를 제어 할 수 있습니다.

위의 예에서 .touch 클래스는 Modernizr에 의해 요소에 추가 된 클래스에서 나옵니다. 가시성 클래스의 좋은 예는 Foundation and Bootstrap의 반응 형성에 대한 것입니다.

타이포그래피 타이포그래피에서는 타원 텍스트와 같은 글꼴 무게 및 텍스트 조작과 같은 클래스를 만들 수 있습니다.

<span><span><span><div</span> class<span>="box"</span>></span>
</span><span><span><span></div</span>></span></span>

색상 모든 응용 프로그램마다 다른 가이드와 브랜드 규칙이있어 인터페이스를 '피부'하는 클래스에서 정의 할 수 있습니다. 여기에는 텍스트 색상, 배경 등이 포함됩니다 이 코드로 어떻게 변환 될 수 있는지 보자. 먼저 변수를 sass : 로 정의 해 봅시다

그런 다음 변수에 따라 도우미 클래스를 정의합니다.

색상 및 배경 도우미 클래스 사용의 두 가지 좋은 예는 Mapbox 및 Google 웹 스타터 키트 프로젝트에 있습니다.
또 다른 사용 사례는 알림 구성 요소입니다. 배경 도우미 수업으로 이것을 어떻게 스타일링 할 수 있는지 봅시다.

<span><span>.box</span> {
</span>    <span>float: left;
</span>    <span>text-align: center;
</span><span>}</span>

목록 UL 요소에서 총알과 패딩을 제거하고 싶습니까? inuitcss에 사용 된 List-Bare라는 클래스는 당신을 위해 그렇게 할 수 있습니다.

<span><span>.left</span>        { float: left; }
</span><span><span>.right</span>       { float: right; }
</span>
<span><span>.text-left</span>   { text-align: left; }
</span><span><span>.text-right</span>  { text-align: right; }
</span><span><span>.text-center</span> { text-align: center; }</span>

경계 도우미 클래스는 모든면이나 한쪽에 관계없이 요소에 테두리를 추가하는 데 사용될 수 있습니다. 따라서 CSS/Sass는 다음과 같이 보일 수 있습니다
디스플레이 값 다음 도우미 클래스는 CSS 디스플레이 속성에 다른 값을 사용할 수있는 기능을 제공합니다.
결론 이 추상화 원칙에 따라 CSS를 작성할 때 익숙한 것과 훨씬 다른 접근법 일 수 있습니다. 그러나 내 경험과 다른 사람들의 경험을 바탕으로 나는 이것이 당신의 다음 프로젝트에서 고려해야 할 아주 좋은 접근법이라고 말할 수 있습니다.

<span><span><span><div</span> class<span>="box"</span>></span>
</span><span><span><span></div</span>></span></span>

. CSS-Helpers라는 새 라이브러리 에서이 게시물의 모든 헬퍼 클래스를 확인할 수 있습니다. 관련 라이브러리 링크

다음 프로젝트의 구조를 배우고 탐색 할 수 있습니다.

mapbox styleguide - base.css

basscss 재단 유틸리티 클래스

부트 스트랩 헬퍼 클래스 Uikit 유틸리티 클래스

<span><span>.box</span> {
</span>    <span>float: left;
</span>    <span>text-align: center;
</span><span>}</span>

추가 읽기

도전적인 CSS 모범 사례 ACSS : CSS 모범 사례를 다시 생각합니다 Medium의 CSS
헬퍼 클래스를 사용하여 CSS를 건조시키고 확장하기 위해 자주 묻는 질문

CSS 도우미 클래스를 사용하면 어떤 이점이 있습니까?

CSS 도우미 클래스는 많은 혜택을 제공합니다. 그들은 프로그래밍의 기본 개념 인 건조 (자신을 반복하지 말) 원칙을 홍보합니다. 도우미 클래스를 사용하면 스타일 시트에서 동일한 CSS 속성과 값을 반복하지 않을 수 있습니다. 이를 통해 코드를 더 깨끗하고 읽기 쉽게 만들뿐만 아니라 파일 크기를 줄여로드 시간이 더 빠릅니다. 또한, 도우미 클래스는 다른 요소와 구성 요소에서 재사용 될 수있어 CSS 코드의 확장 성을 향상시킬 수 있습니다. 또한 한 곳에서만 변경해야하므로 유지 보수 및 업데이트가 더 쉬워집니다.

CSS 헬퍼 클래스를 만드는 방법
CSS 도우미 클래스를 만드는 방법은 간단합니다. 스타일 시트에서 클래스를 정의하고 원하는 속성과 값을 할당합니다. 예를 들어, 텍스트를 중앙에 자주 해야하는 경우 다음과 같은 도우미 클래스를 만들 수 있습니다. 그런 다음이 클래스를 HTML 요소에 적용하여 텍스트를 중앙에 적용 할 수 있습니다.
단일 요소에서 여러 도우미 클래스를 사용할 수 있습니까?
예, 여러 헬퍼 클래스를 적용 할 수 있습니다. 단일 HTML 요소로. 이를 통해 각 조합에 대해 별도의 클래스를 만들지 않고도 다양한 스타일과 효과를 결합 할 수 있습니다. 예를 들어, 텍스트를 중심하고 색상을 변경하기위한 도우미 클래스가있는 경우 다음과 같은 요소에 둘 다 사용할 수 있습니다. CSS의 도우미 클래스와 유틸리티 클래스의 차이점은 무엇입니까?
"도우미 클래스"와 "유틸리티 클래스"라는 용어는 종종 CSS의 맥락에서 상호 교환 적으로 사용됩니다. 둘 다 특정 단일 목적 기능을 제공하는 클래스를 말합니다. 그러나 일부 개발자는 둘을 구별합니다. 그들의 관점에서 볼 때, 도우미 클래스는 더 복잡하고 여러 속성을 포함 할 수 있지만, 유틸리티 클래스는 더 단순하고 일반적으로 하나의 속성 만 포함합니다.
헬퍼 클래스를 사용하여 생산성을 향상시키는 방법은 무엇입니까?

도우미 수업은 CSS를 작성할 때 생산성을 크게 향상시킬 수 있습니다. 재사용 가능한 클래스에서 일반적인 스타일을 캡슐화하면 작성하는 데 필요한 코드의 양을 줄이고 스타일 시트를보다 쉽게 ​​관리 할 수 ​​있습니다. 이렇게하면 특히 대규모 프로젝트에서 많은 시간을 절약 할 수 있습니다. 또한, 도우미 클래스는 다른 요소와 구성 요소에 동일한 방식으로 동일한 방식으로 적용되도록 디자인의 일관성을 유지하는 데 도움이 될 수 있습니다.

CSS 도우미 클래스를 사용하는 것의 단점이 있습니까?

도우미 클래스는 많은 혜택을 제공하지만 잠재적 인 단점도 있습니다. 주요 비판 중 하나는 여러 클래스를 단일 요소에 적용 할 수 있기 때문에 HTML Bloat로 이어질 수 있다는 것입니다. 이로 인해 HTML 코드를 읽고 유지하기가 더 어려워 질 수 있습니다. 또한, 도우미 수업에 대한 과도한 관계는 수업에서 의미 론적 의미가 부족하여 다른 개발자에게 스타일 시트를 이해하기 어려울 수 있습니다.

SASS 이외의 CSS 사전 처리기와 함께 도우미 클래스를 사용할 수 있습니까? ?

예, Sass 이외의 CSS 전 처리기와 함께 도우미 클래스를 사용할 수 있습니다. 실제로 이러한 도구를 사용하면 헬퍼 클래스를보다 쉽게 ​​만들고 관리 할 수 ​​있습니다. 예를 들어, Sass를 사용하면 논쟁을 받아 들일 수있는 도우미 클래스와 같은 Mixins를 사용할 수 있습니다. 이렇게하면보다 유연하고 재사용 가능한 스타일을 만들 수 있습니다.

헬퍼 클래스를 사용하여 CSS 코드를 확장하려면 어떻게해야합니까?

헬퍼 클래스는 CSS 코드를 스케일링하는 데 중요한 역할을 할 수 있습니다. 재사용 가능한 클래스에서 일반적인 스타일을 캡슐화하면 이러한 스타일을 다른 요소와 구성 요소에 쉽게 적용 할 수 있습니다. 코드의 다른 부분에 영향을 미치지 않고 스타일을 추가, 제거 또는 수정할 수 있으므로 코드를보다 모듈화하고 확장 가능하게 만듭니다. 또한, 도우미 클래스는 프로젝트가 커짐에 따라 디자인의 일관성을 유지하는 데 도움이 될 수 있습니다.

일반적으로 사용되는 CSS 도우미 클래스의 일부 예는 무엇입니까?
일반적으로 사용되는 CSS 도우미 클래스가 많이 있습니다. 일부 예에는 텍스트 정렬 클래스 (예 : .Text-Center), 디스플레이 속성 (예 : .d- 블록), 마진 및 패딩 (예 : .m-0 또는 .p-0) 및 가시성 (예 :. 숨겨져 있거나 가시적). 이 클래스는 동일한 CSS 속성과 값을 반복해서 쓰지 않고도 일반적인 스타일을 신속하게 적용하는 데 사용될 수 있습니다. CSS 도우미 클래스를 어떻게 구성 할 수 있습니까?
CSS 헬퍼 클래스를 구성하는 방법에는 여러 가지가 있습니다. 일반적인 접근법 중 하나는 기능별로 그룹화하는 것입니다. 예를 들어, 타이포그래피 관련 클래스에 대한 스타일 시트의 한 부분, 레이아웃 클래스 등의 섹션을 가질 수 있습니다. 또 다른 접근법은 각 클래스의 기능을 나타내는 이름 지정 규칙을 사용하는 것입니다. 예를 들어, Bootstrap은 클래스 이름의 첫 번째 부분이 속성 (예 :“M”)을 나타내는 명명 규칙을 사용하고 두 번째 부분은 값 (예 : 0 단위의 "0")을 나타냅니다. 이렇게하면 이름을 보면 각 수업이 무엇을하는지 쉽게 이해할 수 있습니다.

위 내용은 도우미 클래스를 사용하여 CSS를 건조하고 확장합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!