이것이 CSS 스타일 시트를 어떻게 구조화 하는가?
-
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 파일을 구성하는 것 같습니다. 그리고 그들은 모두 이전보다 낫습니다.