도우미 클래스를 사용하여 CSS를 건조하고 확장합니다
- Jennifer Aniston원래의
- 2025-02-25 19:47:15319검색
, 덜 반복적 인 코드를 작성하는 데 도움이되는 것이 있습니다 : 도우미 클래스 (유틸리티 클래스라고도 함).
도우미 클래스 또는 유틸리티 클래스는 HTML 요소에서 반복적으로 사용할 수있는 추상 클래스 세트를 만들어 CSS의 반복을 제거하는 데 도움이 될 수 있습니다. 이로 인해 코드는 향후 추가를 위해 더 재사용 가능하고 확장 가능합니다.
- Smashing Magazine (@smashingmag) 2013 년 5 월 27 일 유틸리티 클래스의 모습과 사용 방법에 대한 간단한 예를 살펴 보겠습니다. 다음 코드 스 니펫을보십시오 :
-
이 CSS와 함께
-
다른 섹션의 경우 코드를 반복합니다 -
그러나 우리는 전체 높이라는 한 클래스 로이 모든 것을 줄일 수 있습니다.
아래는 위에서 사용 된 전체 높이 클래스를 포함하여 유사한 예제입니다.
-
위치 및 z-index
위치 관련 속성은 z-index와 같은 다른 속성과 결합하여 복잡한 레이아웃을 생성 할 수 있습니다. 뷰포트 또는 조상 요소 (오른쪽, 왼쪽, 왼쪽 등)와 관련하여 요소의 정확한 위치를 설정하기 위해 클래스 세트를 만들 수 있습니다.
"핀"도우미 클래스는 Mapbox의 CSS에서 영감을 얻었습니다 - 예, 여러 헬퍼 클래스를 적용 할 수 있습니다. 단일 HTML 요소로. 이를 통해 각 조합에 대해 별도의 클래스를 만들지 않고도 다양한 스타일과 효과를 결합 할 수 있습니다. 예를 들어, 텍스트를 중심하고 색상을 변경하기위한 도우미 클래스가있는 경우 다음과 같은 요소에 둘 다 사용할 수 있습니다.
<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>
<span><span><span><div</span> class<span>="box"</span>></span> </span><span><span><span></div</span>></span></span>Foundation은 스크린 크기에 대해 서로 다른 폭을 가진 그리드 시스템을 생성하기 위해 함께 사용할 수있는 수많은 클래스를 제공합니다. 이 유연성은 개발자가 그리드 자체의 CSS를 편집하지 않고 새로운 맞춤형 레이아웃을 더 빠르게 만들 수 있도록 도와줍니다. 예를 들면 :
<span><span>.box</span> {
</span> <span>float: left;
</span> <span>text-align: center;
</span><span>}</span>
.
<span><span><span><div</span> class<span>="left text-center"</span>></span> </span><span><span><span></div</span>></span></span>
.
데모
데모
가시성 클래스
가시성 클래스는 화면 크기, 장치 방향, 터치 스크린 또는 기타 요인에 따라 요소의 가시성을 제어합니다. 이것들은 반응 형 디자인에 편리 할 수 있습니다
위의 요소는 작은 화면에 숨겨져 있지만 더 큰 화면에서는 볼 수 있습니다.
타이포그래피
<span><span><span><div</span> class<span>="box"</span>></span> </span><span><span><span></div</span>></span></span>색상 모든 응용 프로그램마다 다른 가이드와 브랜드 규칙이있어 인터페이스를 '피부'하는 클래스에서 정의 할 수 있습니다. 여기에는 텍스트 색상, 배경 등이 포함됩니다
그런 다음 변수에 따라 도우미 클래스를 정의합니다.
<span><span>.box</span> {
</span> <span>float: left;
</span> <span>text-align: center;
</span><span>}</span> 목록
<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>
경계
디스플레이 값
결론
<span><span><span><div</span> class<span>="box"</span>></span> </span><span><span><span></div</span>></span></span>.
다음 프로젝트의 구조를 배우고 탐색 할 수 있습니다.
basscss
<span><span>.box</span> {
</span> <span>float: left;
</span> <span>text-align: center;
</span><span>}</span>
추가 읽기
CSS 도우미 클래스는 많은 혜택을 제공합니다. 그들은 프로그래밍의 기본 개념 인 건조 (자신을 반복하지 말) 원칙을 홍보합니다. 도우미 클래스를 사용하면 스타일 시트에서 동일한 CSS 속성과 값을 반복하지 않을 수 있습니다. 이를 통해 코드를 더 깨끗하고 읽기 쉽게 만들뿐만 아니라 파일 크기를 줄여로드 시간이 더 빠릅니다. 또한, 도우미 클래스는 다른 요소와 구성 요소에서 재사용 될 수있어 CSS 코드의 확장 성을 향상시킬 수 있습니다. 또한 한 곳에서만 변경해야하므로 유지 보수 및 업데이트가 더 쉬워집니다.
CSS 헬퍼 클래스를 만드는 방법CSS 도우미 클래스를 만드는 방법은 간단합니다. 스타일 시트에서 클래스를 정의하고 원하는 속성과 값을 할당합니다. 예를 들어, 텍스트를 중앙에 자주 해야하는 경우 다음과 같은 도우미 클래스를 만들 수 있습니다. 그런 다음이 클래스를 HTML 요소에 적용하여 텍스트를 중앙에 적용 할 수 있습니다.
- 단일 요소에서 여러 도우미 클래스를 사용할 수 있습니까?
"도우미 클래스"와 "유틸리티 클래스"라는 용어는 종종 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 헬퍼 클래스를 구성하는 방법에는 여러 가지가 있습니다. 일반적인 접근법 중 하나는 기능별로 그룹화하는 것입니다. 예를 들어, 타이포그래피 관련 클래스에 대한 스타일 시트의 한 부분, 레이아웃 클래스 등의 섹션을 가질 수 있습니다. 또 다른 접근법은 각 클래스의 기능을 나타내는 이름 지정 규칙을 사용하는 것입니다. 예를 들어, Bootstrap은 클래스 이름의 첫 번째 부분이 속성 (예 :“M”)을 나타내는 명명 규칙을 사용하고 두 번째 부분은 값 (예 : 0 단위의 "0")을 나타냅니다. 이렇게하면 이름을 보면 각 수업이 무엇을하는지 쉽게 이해할 수 있습니다.
위 내용은 도우미 클래스를 사용하여 CSS를 건조하고 확장합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
css bootstrap less html sass edge Float Object define if for while include break using class Interface Property number function this display position margin padding viewport background ul Foundation Other
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.