이것이 CSS 스타일 시트를 어떻게 구조화 하는가?

StackOverflow https://stackoverflow.com/questions/182528

  •  06-07-2019
  •  | 
  •  

문제

하나만 보내고 있다고 가정 할 때 단일 또는 여러 스타일 시트를 제공 해야하는지에 대한 의문을 제외하고는 이것을 기본 구조라고 생각하십니까?

/* 구조 */

모든 템플릿 레이아웃 물건은 여기에 넣어야하므로 헤더, 바닥 글, 신체 등을 넣어야합니다.

/ * 구조 끝 */

/* 공통 구성 요소*/

가입 양식, 목록 등과 같은 반복 요소 등

/* 공통 구성 요소 종료*/

/ * 특정 페이지 1 */

일부 페이지에는 특정 스타일이있을 수 있습니다.

/ * 특정 페이지 1 종료 */

/ * 특정 페이지 2 */

위와 같이

/ * 특정 페이지 2 종료 */

/ * 특정 페이지 등 */

등등.

/ * 특정 페이지 등 종료 */

도움이 되었습니까?

해결책

그것은 내가 나의 구조와 비슷하지만, 하위 헤드를 사용하는 것이 가장 좋은 방법이라는 것을 알 수 있으므로이 구조를 사용한다는 것을 알 수 있습니다.

/**************************글로벌******************** ****/

/ * 모든 일반적인 것들이 적절한 서브 제목 아래에 있습니다 */

/ * 제목 서식 */

/ * 텍스트 서식 */

/ * 양식 형식 */

/ * 테이블 서식 */

/* 등 */

/**************************레이아웃******************** ****/

/ * 모든 레이아웃이 여기 서브 헤드 아래로 이동 */

/* 헤더 */

/ * 왼쪽 사이드 바 */

/ * 오른쪽 사이드 바 */

/ * 바닥 글 */

/************************* * 항해 * ********************* ****/

/ * 하위 제목 아래에 여러 내비게이션 포인트가있을 수 있으므로 레이아웃과 별도로 내비게이션을 배치했습니다. */

/ * 메인 (수평) 내비게이션 */

/ * 왼쪽 탐색 */

/ * 올바른 탐색 */

/ * Breadcrumb Navigation */

/**************************양식******************** ****/

/ * 공통 형식과는 다른 형식 형식의 형식이 다르면 여러 가지 형식의 형식이있는 경우 하위 헤드를 사용하십시오 */

/**************************테이블******************** ****/

/ * 양식과 동일한 거래 */

/**************************목록******************** ****/

/ * 양식 및 테이블과 동일한 거래 */

/************************* * 콘텐츠 * ********************* ****/

/ * 양식, 테이블 및 목록과 동일한 방식으로 페이지에 대한 하위 헤드별로 그룹화 된 특정 페이지에 대한 특정 형식 */

/****************************CSS 지원********************** *****/

/* 이것은 모든 페이지의 모든 요소에 적용 할 수있는 특수 서식을위한 것이며 해당 항목의 일반 형식을 무시할 수 있습니다. 예를 들어, 이것은 다음과 같은 것들을 가질 수 있습니다. */

.float-right { float: right; }
.float-left { float: left; }
.float-center { margin-left: auto; margin-right: auto; }
.clear { clear: both }
.clear-block { display: block }
.text-left { text-align: left }
.text-right { text-align: right }
.text-center { text-align: center }
.text-justify { text-align: justify }
.bold { font-weight: bold }
.italic { font-style: italic }
.underline { border-bottom: 1px solid }
.nopadding { padding: 0 }
.nobullet { list-style: none; list-style-image: none }

/* 등 */

도움이되기를 바랍니다.

나는 일반적으로 그와 같은 단일 줄에 글을 쓰는 것이 좋지 않거나 Adam이 게시 한 링크에서 제안한 것처럼 오래 걸리면 탈지기가 매우 어렵습니다. 위의 예제의 경우, 모든 줄을 들여 쓰지 않아도되는 방식으로 입력하는 것이 더 빠릅니다.

서식을 위해서는이 구조를 권장합니다.

.class {
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
}

그래서, 나는 클래스 또는 ID의 구조를 맨 위에 놓은 다음 글꼴 등과 같은 다른 형식을 그 아래에 놓았습니다. 훑어 보는 것이 매우 빠르고 명확하게 만듭니다.

다른 팁

당신에게 의미가있는 것은 충분히 좋습니다. 솔직히, 다른 사람이 스타일 시트에서 무언가를 찾고 있거나, 무언가를 찾을 때, 그 문제에 대해 - 조직 구조가 무엇인지 알아 내려고하지 않을 것입니다. 그들은 단지 그들이 볼 필요가있는 클래스 나 요소를 검색 할 것입니다. 당신이 일반적으로 관련된 물건을 유지하고 @matt가 제안한 것과 같은 의견으로 물건을 섹션하는 한 괜찮습니다.

문제의 사실은 매우 잘 생각 된 조직 구조 (잘 생각한 출원 시스템과 마찬가지로, 어디로 가는지 항상 분명하지는 않습니다. 따라서 당신은 단지 다소 합리적이지 않고 물건을 정리하는 데 많은 시간을 할애하지 않고 검색 도구에 의존하여 필요한 것을 찾는 것이 좋습니다.

나는 당신과 비슷한 방식으로 내 CSS를 조직하지만 재설정 섹션으로 시작합니다. 주요 아이디어는 일반에서 구체적으로 이동하는 것입니다. 그래서 여기는 다음과 같습니다.

  • 초기화
  • 구조
  • html_tags
  • 항해
  • 특정 섹션
  • 오류 메시지 - 이것이 내 마지막 섹션입니다

당신이 제시 한 구조는 내가 사용하는 것입니다. 그러나 새로운 규칙이 서로가 나타나고 서로를 무시하는 데 여전히 너무 복잡한 것 같습니다 ... 아마도 나는 대신 Adam과 연결된 주제에서 제안 된 솔루션을 고수하려고 노력해야합니다.

새 CSS 파일을 만들 때마다 새로운 CSS 파일을 구성하는 것 같습니다. 그리고 그들은 모두 이전보다 낫습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top