저는 최근에 대규모 다년 클라이언트 프로젝트를 시작했으며 프런트 엔드 개발의 첫 번째 단계는 프로젝트 전체에서 사용할 패턴 라이브러리를 만드는 것입니다. 그리드에 Compass와 Blueprint를 사용하고 있습니다. @include blueprint-grid믹스 인의 모습이 프로젝트에 대한 완벽한 : 자동 의미 클래스 이름 (즉, 생성 할 수 있습니다 .span5팀의 나머지 부분은 모든 페이지에 걸쳐 재사용 할 수 있음을).
그러나 Compass 설명서에는 다음과 같이 나와 있습니다 .
모범 사례는이 믹스 인 사용을 권장하지 않지만 레거시 웹 사이트를 지원하고 블루 프린트의 예제 페이지에 대해 sass 포트를 테스트하기 위해 제공됩니다.
왜 그런 겁니까? 현대 그리드 시스템에서 의미없는 클래스를 사용하려는 이유는 무엇입니까? 모두 동일한 격자 너비를 공유하는 다양한 페이지 요소에 대해 새 CSS 클래스를 만드는 것이 덜 건조 해 보입니다. 예를 들면 :
.dashboard__chart {
@include column(6);
}
.dashboard__news {
@include column(6);
}
.span6마크 업에 적용 할 클래스 만 가질 수 있습니다.
상황에 따라 달라질 수 있습니다. 전체 프로젝트가 비슷한 레이아웃 (예 : 뉴스 웹 사이트 또는 블로그)을 가지고 있다면 의미 론적이지 않은 클래스가 의미가 있습니다. 그러나이 대시 보드 /보고 도구 프로젝트는 모든 페이지에서 약간 다른 레이아웃을 가지고 있습니다.
다시 원래의 질문으로 돌아갑니다. 의미 론적 클래스를 사용하지 않는 것이 가장 좋은 이유는 무엇이며이를 피하는 가장 좋은 방법은 무엇입니까?
의미 론적 클래스 이름 (예 : .span5)을 자동으로 생성합니다.
"span5"는 내용을 전혀 설명하지 않고 상당히 구체적인 방식으로 레이아웃을 설명한다는 점에서 의미 론적 이름이라고 생각하지 않습니다.
물론 "의미 적"이라는 용어는 많이 사용되지만 가장 순수한 의미에서는 프레젠테이션과 관련이 거의 없거나 전혀 없어야합니다.
표현을 설명하는 이름을 사용하지 않는 이유 :
"span6"과 같은 제네릭 클래스의 가장 큰 단점은 남용된다는 것입니다 (비슷한 그리드 클래스가 정의 된 부트 스트랩에서 이것을 보았습니다). "이 요소는 2 개의 열에 걸쳐 있어야합니다 ... 좋습니다! 그냥 'span2'클래스를 치고 완료하겠습니다!"
이것은 재사용을 찾아서는 안된다는 의미는 아닙니다. 그러나 이러한 재사용은 콘텐츠와 관련된 클래스 이름 (당연히 약간의 노력이 필요할 수 있음)과 믹스 인 사용을 통해 올 수 있습니다.
저는 최근에 대규모 다년 클라이언트 프로젝트를 시작했으며 프런트 엔드 개발의 첫 번째 단계는 프로젝트 전체에서 사용할 패턴 라이브러리를 만드는 것입니다.
대부분의 프로젝트는 실용성을 위해 예외 / 타협으로 끝나지만 모범 사례 접근 방식으로 시작할 기회가 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다