흥미로운 CSS 사례 - 상위 6개 검색 결과의 흥미로운 아이디어

Google CSS Best Practices 유용하지만 중복된 아이디어를 많이 얻을 수 있습니다.

그러나 중복되지 않은 아이디어 중에는 공유가 필요할 수 있는 몇 가지 아이디어가 있습니다.

머리글-바닥글 구조를 사용하여 스타일시트 구성

또는 다르게 말하면 특정 스타일이 페이지의 특정 지점에만 존재하는 경우 CSS를 계층적 방식으로 정렬합니다. 이를 통해 귀하와 귀하의 팀은 관련 CSS가 있는 위치를 빠르게 감지할 수 있습니다(그렇지만 CSS 스타일 이름을 찾을 수 있습니다CTRL-F).

Generic classes (body, a, p, h1, etc.)
#header
#nav-menu
#main-content
#aside
#footer

HTML 구조를 먼저 만들고 CSS를 두 번째로 만듭니다.

HTML은 사용자, 브라우저, 검색 엔진 및 스크린 리더의 구조에 관한 것입니다. 최신 의미론적 요소(예: <form>, <table>, <article> )를 사용하여 먼저 구조를 구축한 다음 스타일을 추가합니다.

사이트 전체에서 스타일 텍스트 속성으로 텍스트를 "표준"으로 변환

데이터의 대소문자가 일치하지 않는 경우 text-transform를 사용하여 필요한 곳에 콘텐츠를 푸시하십시오.

각 단어를 대문자로 표기해야 하는 제목, 헤드라인, 이름에 적합합니다.

text-transform: capitalize;```





```javascript
text-transform: lowercase;

그 아트 하우스 모던 룩을 위해.

Mobile One Column 먼저 디자인

동일한 콘텐츠를 가져와서 하나의 열로 만드는 방법을 알아내는 것보다 더 많은 공간에 맞게 콘텐츠를 확장하는 것이 더 쉽습니다.
@media (min-width: 768px)를 사용하여 모바일 우선으로 전환하십시오. 따라서 이 예에서 브라우저가 768px 이상인 경우 데스크톱 버전으로 전환됩니다.)

SRP(Single Responsibility Principle) 사용(또는 사용하지 않음)

Dev에서 차용하여 스타일이 여러 가지 집안일을 하는 경우 주의하십시오. 책임을 없애면 스타일을 확장하고 다른 스타일과 쉽게 결합할 수 있습니다.

하지만! There is a good case for not following SRP.

// Do This:
/* Shared styles */
.button {
  padding: 1rem 2rem;
  font-weight: bold;
  color: #fff;
}

/* Style extensions */
.button--radialBorder {
  border-radius: 0.2rem;
}

.button--large {
  font-size: 2rem;
}

.button--primary{
  background-color: #eb4934;
}

.button--secondary {
  background-color: #888;
}


// Don’t Do This
.button {
  padding: 1rem 2rem;
  font-size: 2rem;
  border-radius: 0.2rem;
  background-color: #eb4934;
  color: #fff;
  font-weight: bold;
}

.button--secondary {
  border-radius: 0;
  font-size: 1rem;
  background-color: #888;
}

BEM 프레임워크 사용

BEM = 블록, 요소, 수정자는 스타일을 작성하고 이름을 지정하기 위한 패턴입니다.

사실 위의 CSS는 BEM을 따라 작성되었습니다.

MDN에서:

In BEM a block is a stand-alone entity such as a button, menu, or logo. An element is something like a list item or a title that is tied to the block it is in. A modifier is a flag on a block or element that changes the styling or behavior. You will be able to recognize code that uses BEM due to the extensive use of dashes and underscores in the CSS classes.

개요 하이라이트 유지

어떤 사람들은 키보드를 사용해야 하고 어떤 사람들은 그냥 키보드를 사용하는 것처럼 해야 합니다. 상자 윤곽선을 통해 키보드 사용자는 어떤 요소에 집중하고 있는지 알 수 있습니다.

// Bad Don’t Do This
:focus {
    outline: none;
}

개요가 제 역할을 하도록 하십시오.

참조

30 CSS Best Practices
HTML Semantic Elements


BEM
Organize Your CSS - MDN
10 Best Practices for Quickly Improving Your CSS