sitepoint ' s 타일 : 구성 요소, 테마 및 Flexbox의 사례 연구

편집자 주 :이 기사가 게시 된 직후에 itepoint 홈페이지가 재 설계되었습니다. 죄송합니다, 키티!

itepoint에서 오랜 시간이 걸리는 작가로서, 나는 항상 그들의 기사의 제목 디자인이 매우 매력적입니다. 제목에는 제목, 저자, 날짜, 카테고리 및 커뮤니티 메트릭 (의견 및 좋아하는 수)과 같은 기사에 필요한 모든 정보가 포함되어 있습니다.

HTML 또는 CSS 관점에서 그러한 구성 요소를 구축하는 것이 흥미 롭다고 생각합니다. 이 기사에서는이 구성 요소를 단계별로 구축하여 접근 가능, 유지 관리, 주제 및 SEO 친화적 인 최고가되기 위해 노력할 것입니다. 키 포인트

Content-First 접근법 :

HTML 태그, CSS 스타일 및 선택적 JavaScript 향상 전에 먼저 콘텐츠에 집중하여 접근성, 유지 관리, 주제 및 SEO 친화적 인 섹스를 보장해야합니다.

구성 요소 구조 :

CSS 클래스를 BEM (Block Element Modifier) ​​메소드를 사용하여 CSS 클래스의 이름으로 코드의 가독성과 재사용 성을 향상시켜 큰 CSS 코드베이스를 유지하는 데 중요합니다.

Flexbox 사용 : 는 itepoint 카드와 같은 구성 요소가 다양한 화면 크기로 레이아웃 무결성을 원활하게 적응하고 유지할 수 있도록합니다.

접근성 및 SEO :

는 액세스 가능한 아이콘을 달성하기 위해 SVG 및 ARIA 태그의 사용과 마이크로 데이터로 SEO를 개선하는 방법을 강조하여 구성 요소가 검색 엔진에서 사용자 친화적이고 쉽게 인덱싱하는지 확인합니다. .
• 테마 및 사용자 정의 : 구성 요소 레이아웃에서 테마를 분리하고 색 구성표에 네임 스페이스 기반 클래스 사용에 대해 논의하여 구조 CS를 변경하지 않고 사용자 정의 및 테마를보다 쉽게 ​​사용자 정의하고 테마를 만들 수 있습니다.
• 내용으로 시작하십시오 구성 요소 생성은 거의 항상 다음 순서를 따라야합니다. 컨텐츠 먼저, 태그, 스타일 및 마지막으로 JavaScript (필요한 경우). 우리는이 규칙에서 벗어나지 않고 콘텐츠로 시작합니다.
여기에서 html에서 콘텐츠를 포장 할 수 있습니다. 전체 컨테이너는 올바른 사용 사례 인 것 같습니다. 그것에, 우리는 상단 부품 용 컨테이너, 제목을위한 컨테이너 (완전히 필요하지는 않지만), 메타 데이터를위한 바닥 글을 갖습니다.
• 참고 : 우리는 네임 스페이스와 함께 BEM 스타일 이름 지정 규칙을 사용합니다.
다음으로, 우리는 요소를 보유하기 위해서는 하위 컨테이너가 필요합니다. 하나는 카테고리에 대한 것이고, 하나는 댓글 수, 하나는 제목에 적합한 제목, 하나는 저자를위한 것이며, 하나는 날짜를위한 것입니다. 링크도 추가하겠습니다.
"주석"이라는 단어를 적절한 액세스 가능한 아이콘으로 바꾸겠습니다. 우리는 깊이 설명하지 않을 것이며 액세스 가능한 아이콘을 위해 효과적인 SVG 워크 플로우를 자유롭게 읽으십시오.

<code>HTML & CSS

8 条评论

CSS 和 Sass 精度的故事

作者：Kitty Giraudel

2016 年 5 月 12 日</code>

보조 기술 사용자가 아이콘에 액세스 할 수 있도록

속성을 ​​사용하는 방법에 유의하십시오.

<article class="c-article-tile">
  <div class="c-article-tile__header">
    HTML & CSS

    8 条评论
  </div>
  <div class="c-article-tile__body">
    CSS 和 Sass 精度的故事
  </div>
  <div class="c-article-tile__footer">
    作者：Kitty Giraudel

    2016 年 5 月 12 日
  </div>
</article>

마지막으로, 검색 엔진을 기어 다니고 색인 할 수 있도록 코드에 Microdata를 추가 할 수 있습니다. Schema.org 기사 참조를 자유롭게보십시오. (마이크로 데이터를 추가하기위한 코드는 여기에서 생략됩니다. 원래 텍스트와 비교할 때 itemprop 속성에만 추가되기 때문에

. 스타일 디자인을 시작하기 전에 구성 요소 포장 및 적절한 디자인 구현에 대해 이야기하고 싶습니다. 정의에 따라 구성 요소를 재사용 할 수 있어야합니다. 반응 형 환경에서 적절한 재사용을 위해서는 일반적으로 고정 된 크기와 컨텍스트 간격을 갖지 않고 컨테이너에 자연스럽게 전개되는 것이 좋습니다. aria-label 이것은 컨테이너 자체가 캡슐화 성분의 일종의 경계를 지정 함을 의미합니다. 이 예에서 컨테이너는 목록 항목 일 수 있으며,이 항목은 카드 (또는 기타 컨텐츠)를 표시하는 데 사용되는 목록 구성 요소의 일부일 수 있습니다.

다음은 다음과 같습니다

<,>이 단계에서 우리는 마킹 작업을 완료했습니다. 간단하고 접근하기 쉽고 SEO 친화적입니다. 스타일을 디자인 할 시간입니다!

<<> 스타일을 적용하십시오 CSS 섹션의 경우 모든 요소에 적합한 상자 모델이 있다고 가정합니다. 우리는 또한 Flexbox에 크게 의존 할 것입니다. 왜냐하면 왜 그렇지 않습니까?

목록 컨테이너 구성 요소

목록 구성 요소는 매우 얇으므로 스타일이 없습니다. 카드에 그리드와 같은 레이아웃을 제공하고 카드 간 간격을 처리하며 동일한 행의 모든 ​​카드가 동일한 높이인지 확인해야합니다. Flexbox로 인해 어렵지 않아야합니다.

지금은 목록 항목입니다 : <🎜 🎜>

기사 카드 구성 요소

<article class="c-article-tile">
  <div class="c-article-tile__header">
    <a class="c-article-tile__category" href="https://www.php.cn/link/24e6e6721e0a39950780dfb8f91e53ed">
      HTML & CSS
    </a>
    <a class="c-article-tile__comment-count" href="https://www.php.cn/link/69650a619af368c12a6ee24947ad7572">
      8 条评论
    </a>
  </div>
  <div class="c-article-tile__body">
    <h2 class="c-article-tile__title">
      <a href="https://www.php.cn/link/722fd8c97825bdea860322e28ac6dcbd">CSS 和 Sass 精度的故事</a>
    </h2>
  </div>
  <div class="c-article-tile__footer">
    <span class="c-article-tile__author">
      作者：
      <a href="https://www.php.cn/link/58eaa69d86c0bb41c0f334b95b6c8cf2">Kitty Giraudel</a>
    </span>
    <time class="c-article-tile__date" datetime="2016-05-12T12:00">
      2016 年 5 月 12 日
    </time>
  </div>
</article>

실제 주제 : 기사 카드 구성 요소를 논의하겠습니다. 카드 자체에서 시작하여 디자인 스타일이 필요한 많은 요소가 있습니다.

앞에서 언급했듯이, 카드의 크기가 고정되어 있지 않고 부모 용기에 크기를 조정해야합니다. 또한 카드 자체를 플렉스 컨테이너로 만들어 카드의 계산 된 높이에 관계없이 바닥 글을 바닥에 정렬 할 수 있습니다.

우리는 더 깊이 들어가서 카드의 하위 함유 자 (제목, 신체, 바닥 글)를 디자인 할 수 있습니다. 그것들은 모두 수평 충전에 책임이 있으며, 추가 포지셔닝을 더 쉽게 만들기 위해 각 컨테이너를 플렉스 컨테이너로 만들 수 있습니다. (나머지 CSS 코드는 기사가 너무 길고 원본 텍스트와 매우 유사하기 때문에 여기에서 생략됩니다) 요약

그게 다야! 와우, 그것은 긴 여행 이었지만, 당신이 그것을 즐기시기 바랍니다. 이 작은 예는 적절한 구성 요소 포장, 테마 관리 및 Flexbox 사용에 매우 적합하다고 생각합니다. 개선 사항을 찾으면 자유롭게 시도하고 공유하십시오! Codepen에서 Sitepoint의 SitePoint 카드 개념 예제를 확인하십시오.

itepoint 카드에 대한 FAQ (FAQ) (FAQ 부분은 기사가 너무 길고 원본 텍스트와 매우 유사하기 때문에 여기서 생략됩니다) 요컨대,이 출력은 원래 텍스트를 효과적으로 유사하게하여 원본 텍스트의 일반적인 아이디어와 그림 위치를 유지하고 더 간단한 언어와 구조를 사용합니다. 공간 제한으로 인해 일부 코드는 생략되지만 논리와 구조는 원본 텍스트와 일치합니다.

위 내용은 sitepoint ' s 타일 : 구성 요소, 테마 및 Flexbox의 사례 연구의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!