좋은 CSS 작성을위한 팁은 무엇입니까?

Question

저는 몇 달 전에 웹 개발을 시작했습니다. 나는 HTML을 알고 있고 의미 론적으로 정확한 페이지를 마크 업하는 방법을 알고있다. (HTML5의 새로운 의미 론적 요소를 올바르게 사용하는 등 레이아웃을위한 테이블을 사용하지 않는다.) 나는 W3C 디자인 권고안을 고수하려고 노력한다. 그러나 "좋은"CSS를 작성하는 데 문제가 있습니다.

자손 선택기 대신 자식 선택기와 같은 효율적인 선택기를 사용하는 방법을 알고 있습니다. 내 문제는 제 CSS가 마크 업의 의미와 일치하지 않는다는 것입니다. CSS는 재사용이 가능하기 때문에 여러 페이지의 여러 요소에 동일한 클래스를 사용할 수 있습니다. 하지만 필자가 작성한 CSS 클래스는 몇 가지 요소 (한 페이지에만있는 경우가 많음)에만 적용되며 다시는 사용되지 않습니다. 저는 종종 같은 스타일을 쓰고 있지만, 많은 변화가 있었지만 많은 수업을 듣기도했습니다. 이는 개발의 DRY 원칙에 위배됩니다.

CSS를 최대한 활용하지 않습니까? .right-align { } .blue-text { } 같은 것을하지 않고 스타일 재사용을 가능하게하는 몇 가지 방법은 무엇입니까?

Answer 1

현재 가장 좋은 제안은 Object Oriented CSS입니다. 그것은 관점의 약간의 변화이지만, 단단한 개념이며, 분명 볼만한 가치가 있습니다.

Answer 2

CSS가있는 DRY를 준수하지 않을 것입니다. 반복적으로 나타날 것입니다. 내가하고 싶은 것은 좀 더 일반적인 테마 요소를 지정하고 그 위에 ID를 사용하여 차별화하는 것입니다.

이을 읽어야 할 사람 : 난 단지 몇 가지 요소 (종종에 한 페이지 만)에 적용 쓰기 다시 사용되지 않습니다 http://www.codinghorror.com/blog/2010/04/whats-wrong-with-css.html

Answer 3

그러나 CSS 클래스. 저는 종종 같은 스타일을 쓰고 있지만, 많은 변화가 있었지만 많은 수업을 듣기도했습니다. 이는 개발의 DRY 원칙에 위배됩니다.

DRY 문제와 같은 소리는 코딩이 아닌 디자인에 있습니다. 디자인이 모든 페이지에서 다르게 보이는 것을 요구하면 재사용 범위가 그다지 넓지 않습니다. 구성 요소의

1. 디자인 전화, 예를 들면 :

   나는 일반적으로 클래스를 만드는 보장 두 가지 상황이 있습니다 발견 로그인 패널은 개념적으로 한 가지입니다 (아마 하나 이상의 HTML 요소로 구성 될지라도). 그리고 자체 스타일이 필요합니다. 그 때 나는 log-in-panel과 같은 클래스를 만들 것입니다.

2. 합리적인 정도로 복잡한 스타일 (예 : 드롭 섀도우, 둥근 모서리, 테두리 및 그라디언트 배경이있는 상자, IE의 경우처럼 보입니다.)은 특정 개념이없는 여러 곳에서 사용됩니다 그들 사이의 링크. 그 때 나는 .box1과 같은 클래스를 만들 것입니다. 만약 내가 다른 컴퍼넌트들 사이에 세미 컴플렉스 코드를 공유했다면 (IE6에서 이것을 구현하는 것은 내가 프리랜서 한 회사에서 가장 좋아하는 악몽 임), 나는 이것을 box과 같은 클래스로 나눌 것입니다.

비슷한 스타일을 사용하는 클래스가 여러 개있는 경우 반드시 그런 것은 아닙니다. CSS는 일반적으로 매우 간단합니다. DRY는 코드 조각에 대한 유지 보수 및 버그 수정이 여러 곳에서 일어나지 않아도 될 때 유용합니다. 반복 된 CSS가 그렇게 복잡하지 않으면 걱정할 필요가 없습니다.