CSS 컨벤션/코드 레이아웃 모델[마감]

Question

이 있었는 모든 시도를 만드는 공식화 방법에 대한 조직 CSS 코드?기 전에 나는 가서 내 자신의 전략을 유지하는 것을 읽을 수 있는,내가 무엇인지 궁금 다른 사람은 밖에 있습니다.Google 되지 않은 매우 도움으로 나는 완전히 확실하지 않 어떤 용어를 검색한다.

나는 더 많은 생각의 라인을 따라 들여쓰기/간격을 사용하는 경우 새로운 라인,이름 지정 규칙,etc.

어떤 아이디어가?

Answer 1

Clearleft 명성의 Natalie Down 이이 주제 등을 다루는 정말 멋진 슬라이드 쇼를 제작했습니다. http://natbat.net/2008/sep/28/css-systems/

슬라이드 쇼보다 더 많은 정보가 포함되어 있으므로 PDF를 다운로드하십시오. 나는 이것을 모든 기술 수준의 CSS 개발자에게 추천합니다.

Answer 2

이 모든 것은 매우 주관적인 의 일반적인 코드 서식 논쟁과 나는 알지 못한 모든 공식 규칙을 따릅니다.

이 방법을 선택했을 사용하여 모두 소문자로 클래스와 id 를 가진 밑줄을 분리하는 단어(#page_container 예를 들어).나는 나의 모든 선언 태그 스타일 먼저(html, body, ul,etc.), 모든 클래스와 id,알파벳 순으로 정렬됩니다.또한,모든 스타일에 정의된 각 클래스,id,또는 꼬리표가 정의된 알파벳순으로뿐만 아니라.를 사용하여 이 협약이 보다 쉽게 추적하는 특정한 스타일입니다.

포맷을 위해,나는 항상 그것을 압축 가능한 한 작은,하지만 여전히 읽을 수 있습니다.나는 모든 것이 한 줄로 적절한 공백이 있을 수 있습니다.이 있는 경우 Visual Studio 지정할 수 있습니다 이 형식은 자동으로 포맷이 당신을 위해 방법(세트 스타일 컴팩트한 규칙 아 도구,옵션,텍스트 편집기,CSS,형식).

이름 규칙은 매우 주관적이지만,여기에 이상을 유지해야 한다는 것에 마음은 이름의 요소로 그들의 목적지,자신의 스타일을 의미합니다.예를 들어 있는 경우 회사는 슬로건하려는 스타일에,큰 붉은 글꼴 이름 id #slogan 대 #red_bold.

여기에는 전체 예제는 아이디어를 줄:

body { background-color: #fff; color: #999; font-family: verdana, arial, helvetica, sans-serif; font-size: 76%; padding: 0; margin: 0; }
a { color: #2c5eb4; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { color: #f70; font-family: helvetica, verdana, arial, serif; font-weight: bold; margin: 1.2em 0; }
h1 { font-size: 2.4em; line-height: 1.2em;  margin-bottom: 0em; margin-top: 0em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; font-weight: bold; }
h5 { font-size: 1.0em; font-weight: bold; }
h6 { font-size: 0.8em; font-weight: bold; }
img { border: 0; }
li, ol, ul { font-size: 1.0em; line-height: 1.8em; list-style-position: inside; margin-bottom: 0.1em; margin-left: 0; margin-top: 0.2em; }
#content { clear: both; margin: 0; margin-top: -4em; }
#columns { height: 36em; }
#column1, #column2, #column3, #column4 { border-right: 1px solid #dbdbdb; float: left; width: 18%; margin: 0 0.5em; padding: 0 1em; height: 100%; }
#column1 { width: 28%; }
#column1 input { float: right; }
#column1 label { color: #999; float: left; }
#column2 a, #column3 a { font-weight: bold; }
#column4 { border-right: 0; }
#form { margin: 0 2em; }
.help_button { float: right; text-align: right; width: 30px; }

Answer 3

다음은 CSS 속성을 주문하는 방법에 대한 초안입니다. 포지셔닝 및 레이아웃을 먼저 수행 한 다음 타이포그래피, 배경 및 기타 사소한 일을 수행하는 지침을 대략적으로 따릅니다. 합리적으로 가능한 한 상자 모델에 어떻게 영향을 미치는지에 따라 속성을 주문하려고합니다. 그러나 내 주문은 조금 전환하는 경향이 있습니다. 이것에 대한 의견에 감사드립니다.

el {
    display:;
    float:;
    clear:;
    visibility:;
    position:;
    top:;
    right:;
    bottom:;
    left:;
    z-index:;
    width:;
    min-width:;
    height:;
    min-height:;
    overflow:;
    margin:;
    padding:;
    border:;
    border-top:;
    border-right:;
    border-bottom:;
    border-left:;
    border-width:;
    border-top-width:;
    border-right-width:;
    border-bottom-width:;
    border-left-width:;
    border-color:;
    border-top-color:;
    border-right-color:;
    border-bottom-color:;
    border-left-color:;
    border-style:;
    border-top-style:;
    border-right-style:;
    border-bottom-style:;
    border-left-style:;
    border-collapse:;
    border-spacing:;
    outline:;
    list-style:;
    font:;
    font-family:;
    font-size:;
    line-height:;
    font-weight:;
    text-align:;
    text-indent:;
    text-transform:;
    text-decoration:;
    white-space:;
    vertical-align:;
    color:;
    opacity:;
    background:;
    background-color:;
    background-image:;
    background-position:;
    background-repeat:;
    cursor:;
    }

개인적으로 나는 한 줄 당 하나의 속성을 하나의 탭으로 들여 쓰기하는 것을 선호하며, 닫힌 곱슬 브레이스는 하나의 탭을 들여 쓰기로 간주합니다. 나에게 그것은 이런 식으로 더 읽을 수 있지만, 그것은 확실히 의견/선호의 문제입니다.

나는 HTML 부모/자식 관계를 가능한 한 많이 일치시키기 위해 CSS 선언을 들여 쓰기에 사용했지만 더 이상 그렇게하지 않습니다. CSSEDIT의 그룹화 기능은 그렇게하려는 유혹을 크게 줄이는 데 도움이됩니다.

CSS에는 실제로 코드 구조에 대한 규정 된 규칙이 없습니다. 그래서 그것은 당신에게 가장 적합한 것에 달려 있습니다.

Answer 4

글쎄, 나는 개인적으로 어떤 컨벤션 자체에 대해 알지 못하지만, 정말 좋은 아이디어 인 많은 권장 사항이 있다는 것을 알고 있지만 기본적으로 CS를 구현하려는 방법에 달려 있습니다. 당신에게 가장 적합합니다.

Answer 5

파일은 모듈화되어야하므로 @import에스. 일반적으로 기본 클래스 (예 : 타이포그래피 및 색상) 용 Base.css 파일이 있습니다. 사이트 구조에 따라 사용자를 향한 스타일 시트 전체에서 재사용 할 다른 CSS "부분"도 유리할 수 있습니다. 이 자손 스타일 시트는 필요에 따라 더 세분화 된 기본 스타일을 확장 할 수 있습니다 (예 : .warn {color:red;} 연장 될 수 있습니다 p.warn {font-style:italic;}, 또는 h1.warn {border:5px solid red;}), 소위 구현을위한 훌륭한 디자인 패턴입니다. 객체 지향 CS.

파일 자체 내에서 나는 선택기와 속성 목록을 알파벳순으로 만들고 싶습니다. 다른 유형의 선택기 (ID 목록, 클래스 목록 및 요소 선택기 목록)에 대해 별도의 목록을 유지하려고 시도했지만 불필요하게 어렵다는 것을 알았으므로 동일한 알파벳순에 모든 선택기가 있습니다. 목록. 그렇게하면 모든 복잡한 선택기의 근본 또는 간단한 선택기에게 제공되는 스타일을 신속하게 찾을 수 있습니다.

복잡한 선택기 내에서 각 선택기를 알파벳순으로 나열합니다.

어떤 이유로 Sass를 사용할 수 없다면, 나는 그것의 둥지 패턴 (이것이 아직 잘 작동하는지 여부는 확실하지 않습니다).

@import url('/css/base.css');

a {
  color:#369;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: underscore; }
  a img {
    border: 0; }

blockquote, .nav, p {
  margin-bottom: 10px; }
blockquote {
  background: #eee;
  padding: 10px; }

h1, h2, h3, h4 {
  font-family: Georgia, serif; }
h1.warning {
  border: 5px solid red; }

.nav a {
  font-size: 150%;
  padding: 10px; }
.nav li {
  display: inline-block; }

p.warning {
  font-style: italic; }
  p.warning a {
    background: #fff;
    border-bottom: 2px solid #000;
    padding: 5px; }
  p.warning .keyword {
    text-decoration: underline; }

불행히도, 당신은 여백을 찾을 수 있습니다 p 그리고 그것이 일부라는 것을 깨닫지 못합니다 blockquote, .nav, p. 이것은 또한 "객체 지향적"디자인은 아니지만 스타일링이 필요한 거의 모든 요소에 클래스 문자열을 넣는 것보다 낫습니다.

따라서이 접근법은 완벽하지 않으며 때로는 파일을 찾는 데 완전히 해방되지는 않지만 제어 할 수없는 이유로 CSS 템플릿 도구를 사용할 수 없을 때 개발 한 최선의 방법입니다. 이 방법을 개선하는 것에 대한 제안을 듣고 싶습니다. :)