유형 패턴 및 스타일 가이드

지난 6 년 동안 저는 웹 디자인에서 "유형 패턴"이라고 부르는 것을 활용하여 긍정적 인 결과를 얻었습니다. 이 기사에서는 이러한 패턴, CSS 구현 및 타이포그래피 워크 플로를 간소화하는 방법을 살펴 봅니다.

이것을 Quarkxpress, Indesign 또는 CorelDraw와 같은 데스크탑 게시 소프트웨어의 "단락 스타일"과 동등한 HTML/CSS로 생각하십시오. 도서 디자인에서는 전체 책 전체에서 헤딩 타이포그래피를 동적으로 조정해야 할 수도 있습니다. 이를 위해서는 타이포그래피 패턴에 대한 중앙 제어가 필요합니다.

대부분의 디자인 소프트웨어는 인터페이스가 다르지만이 기능을 제공합니다. "기본"단락 스타일은 일반적으로 존재하며, 그곳에서 다른 사람들이 도출됩니다. 단락 스타일은 블록 레벨 요소를 관리하는 반면 문자 스타일은 인라인 요소 (굵고 고유 한 스팬)를 처리합니다.

핵심 원칙은 일관성을 유지합니다. 키 : 값 쌍, 미러링 CSS 속성 : 값 쌍.

 H1 {
  Font-Family : "Helvetica Neue", Sans-Serif;
  글꼴 크기 : 20px;
  글꼴 중량 : 대담한;
  색상 : 자홍색;
}

정의되면 스타일이 텍스트에 적용됩니다. ""기호는 종종 스타일 수정을 나타냅니다. 스타일을 재정의하면 프로젝트 전체의 변경 사항이 적용됩니다.

이는 CSS 클래스와 비슷하지만 웹 사이트 디자인은 복잡성을 나타냅니다. 스크린 크기는 크게 다르며 그에 따라 적응하는 컨텍스트 인식 스타일을 요구합니다.

필수 인쇄 제어

초기 개발은 종종 시맨틱 HTML을 소개합니다.

<h1 id="제목-레벨"> 제목 1 레벨 1</h1>
<p>단락 텍스트.</p>
<h2 id="제목-수준">제목 수준 2</h2>
<p>더 많은 단락 텍스트.</p>

이러한 요소를 대상으로 CSS와 짝을 이룹니다.

 H1 {
  글꼴 크기 : 50px;
  색상 : #FF0066;
}

H2 {
  글꼴 크기 : 32px;
  색상 : RGBA (0,0,0, .8);
}

p {
  글꼴 크기 : 16px;
  색상 : Deepskyblue;
  라인 높이 : 1.5;
}

이것은 시각적 계층 구조를 설정합니다. 사용자 에이전트 스타일은 기본 스타일을 제공하여 CSS 없이도 기본 계층 구조를 보장합니다.

더 큰 프로젝트의 복잡성

웹 사이트가 증가함에 따라 복잡성이 증가합니다. 처음에는 독특한 수업으로 충분하지만 지속 불가능 해집니다. 특수 사례 수업이 나타납니다.

<h1 id="메인-제목"> 메인 제목</h1>
<p><em>강조된</em> 단락.</p>
<p>정기적 인 단락.</p>

그런 다음 수업은 다음과 같습니다.

<h1 id="메인-제목"> 메인 제목</h1>
<main><h2 id="소제목">소제목</h2>
<p> 단락 텍스트</p></main>

신규 개발자는 기본 글꼴 크기와 여백으로 어려움을 겪을 수있어 margin-top: -20px 와 같은 해킹을 초래할 수 있습니다. 이것은 CSS 캐스케이드에 대한 "싸움"을 만듭니다. 종종 사용자 에이전트 스타일의 인식이 없기 때문입니다.

실제 시나리오

수많은 색상, 레이아웃 및 타이포그래피 스타일의 픽셀-완벽한 Photoshop 문서를 수신한다고 상상해보십시오. 수많은 페이지에서 재사용 가능한 스타일을 식별하려면 상당한 노력이 필요합니다. 소규모 스크린 고려 사항은 종종 간과되며 다양한 화면 크기의 일관되지 않은 패턴은 문제를 더욱 복잡하게 만듭니다. 스타일 가이드는 존재할 수 있지만 프론트 엔드 개발에 필요한 특이성이 부족합니다.

세부적인 스타일 가이드조차도 디자인 문서와 일치하지 않아 혼란을 초래할 수 있습니다. 경력 초기에, 당신은 픽셀 값을 CSS로 번역하여 모든 것을 해독해야 할 의무가 있다고 느낄 수 있습니다. 그러나 이것은 중복 규칙으로 이어집니다.

 .Blog 기사 p { / * ... 스타일 ... * /}
.welcome .main-message { / * ... 유사한 스타일 ... * /}
/ * ... 더 복제 된 스타일 ... */

body 선택기에서 스타일을 통합 시도 할 수도 있지만 지나치게 광범위해질 수 있습니다.

디자인 개정

설계 변경은 수많은 CSS 규칙을 업데이트해야하므로 갈등과 복잡성을 초래합니다. 솔루션에는 종종 클래스를 생성하고 요소에 적용하고 레이아웃 및 유형 패턴을 분리하는 것이 포함됩니다.

 . 주차-텍스트 { / * ... 스타일 ... * /}
.Heading-1 { / * ... 스타일 ... * /}
.medium-heading { / * ... 스타일 ... * /}

이를 통해 유지 관리 가능성이 향상되고 플러그 앤 플레이 스타일이 가능하지만 HTML 수정이 불가능한 상황 (예 : CMS)을 다루지 않습니다.

CMS와 협력합니다

CMS를 다룰 때 직접 HTML 제어가 부족합니다. Sass와 같은 사전 처리기의 Mixins는 해결책을 제공합니다.

 @Mixin Standard-Type () { / * ... 스타일 ... * /}
.context .thing {@include Standard-Type (); }

그러나 단순히 믹스 인과 제목 수준을 연관시키는 것이 제한 될 수 있습니다. 대신, "음성"(예 : calm-voice , loud-voice , attention-voice )으로 스타일을 구성하는 것을 고려하십시오.

 @mixin calm-voice () { / * ... 스타일 ... * /}
@mixin light-voice () { / * ... 스타일 ... * /}
@Mixin Interection-Voice () { / * ... 스타일 ... * /}

이 접근법은 의미를 향상시키고 학제 간 의사 소통을 촉진합니다. article 컨텍스트 내에 이러한 믹스 인 적용 :

 기사 {
  h1 {@include loud-voice (); }
  h2 {@include setture-voice (); }
  p {@include calm-voice (); }
}

이를 위해서는 다양한 컨텐츠 구조와 잠재적 불일치를 처리해야합니다. 간격 및 기타 요소를 관리하려면 추가 CSS 규칙이 필요할 수 있습니다.

또 다른 전처리 업체 인 Stylus는 간결한 구문을 제공하지만 현재 강력한 툴링이 부족합니다.

유형 패턴 : 솔루션

믹스 인 또는 클래스를 통해 구현하든 유형 패턴은 일관된 스타일을위한 플러그 앤 플레이 시스템을 제공합니다. 유틸리티 클래스와 결합 할 수 있습니다. 유형 패턴을 통합하는 라이브 스타일 가이드는 팀 협업을 용이하게하고 픽셀 푸싱을 줄입니다. 이 접근법은 모든 크기의 프로젝트에 도움이됩니다.

가변 글꼴 크기는 응답 디자인을 위해 clamp() 및 vmin 장치를 사용하여 관리 할 수 ​​있습니다. 이 접근법은 더 많은 CSS를 생성하지만 관리 가능성을 우선시하고 팀 협업이 중요합니다.

CSS를 넘어서 : 협업

유형 패턴은 디자이너와 개발자 간의 협업을 촉진합니다. 시각적 디자이너는 미학에 중점을 둘 수 있지만 개발자는 구조와 레이아웃을 관리합니다. 라이브 스타일 가이드는 디자인 프로세스를 간소화하는 단일 진실의 소스 역할을합니다. 이 접근법은 광범위한 픽셀-완벽한 모형의 필요성을 감소시켜 반복 설계 탐색을 가능하게합니다. Indesign과 Illustrator의 단락과 캐릭터 스타일은 영감을 주지만 반응이 부족합니다. 포괄적 인 스타일 가이드에는 패딩 비율, 색상 및 선 너비가 포함되어 설계 일관성을 촉진 할 수 있습니다. 최종 세부 사항은 실제 장치에서 협력 적으로 정제됩니다.

위 내용은 유형 패턴 및 스타일 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!