Twitter's Bootstrap library을 사용하여 기본 버튼을 만들려면 class="btn btn-primary"과 같은 두 가지 CSS 클래스를 사용해야합니다.Twitter Bootstrap에서 버튼에 대해 여러 클래스가 필요한 이유는 무엇입니까?
왜 그들은 btn-primary가 btn에 포함 된 CSS를 모두 포함 할 수 있었는지 이런 식으로 API를 설계 했습니까? 순전히 코드 복제 및 파일 크기를 절약 할 수 있습니까? 아니면 더 복잡한 이유가 있습니까?
이것은 OOCSS 원칙 때문입니다. 요소에서 특정 스타일을 분리하면 코드 및 스타일 재사용을 개선하고 CSS의 모든 객체를 신속하게 수정할 수 있습니다. 예를 들어 .btn 클래스의 버튼에는 기본 회색 색상의 스타일이 적용되어 있으므로 .btn 클래스의 모든 버튼은 동일한 스타일을 갖지만 미리 정의 된 스타일을 사용하면 동일한 버튼 클래스를 확장하여 기본 .btn 속성을 반복 작성해야하므로 관리하기가 쉽습니다. .btn-warning 및 기타 모든 버튼 상태 클래스에 대한 CSS를 보면 버튼의 색상과 스타일을 정의하고 버튼 클래스를 다시 한번 다시 작성해야 할 필요가 없다는 것을 알 수 있습니다.
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
background-color: #F89406;
}
이렇게하면 읽기 쉽고 짧아지고 더 깨끗한 스타일 시트가 허용됩니다.
btn-primary이 기본 단추가 아니기 때문에. btn-success처럼 파란색으로 바뀌는 추가 CSS입니다.
기본 버튼은 회색입니다.
오른쪽. 그리고 스티브, 코드 반복에 절약에 대해서입니다 *; '.btn'은 버튼 룩앤필의 모든 주요 구조를 가지고 있습니다 만, 클래스를 추가하면 색상 변경이 아주 쉽습니다. 트위터 부트 스트랩을 사용하지는 않지만, 많은 개인 프로젝트와 직장에서 나는 일반적인 버튼 클래스를 사용하고 다른 클래스를 채색하는 것과 동일한 방법을 사용했습니다. –
이것은 좋은 점이지만 트위터가 LESS로 컴파일되어 있으므로 개발자로서 이러한 DRY 이점을 모두 얻을 수 있으며 결과 만 반복적이라고 생각하십시오. – Steve
@Steve Less less는 OOCSS와 동일한 이점을 제공해야합니다. 반복을 전혀 쓰지 않는 다른 방법입니다. 다음 버전의 부트 스트랩 구성 요소는 [로드맵] (http://blog.getbootstrap.com/2012/03/coming-up-in-bootstrap/)에 따라이 원칙에 따라 개발됩니다. –