이 질문은 .css 파일 내에서 실제 CSS 지시문 자체를 구성하는 것에 관한 것입니다. 새 페이지 또는 페이지 집합을 개발할 때 일반적으로 .css 파일에 직접 지시문을 추가하고 가능한 한 리팩토링하려고합니다. 시간이 지나면 수백 (또는 수천) 줄의 줄이 생기고 레이아웃을 조정할 때 필요한 것을 찾기가 어려울 수 있습니다.
누구든지 지침을 구성하는 방법에 대한 조언이 있습니까?
- DOM을 모방하여 하향식으로 구성해야합니까?
- UI의 동일한 부분을 지원하는 요소에 대한 지시문을 함께 배치하여 기능적으로 구성해야합니까?
- 선택기를 기준으로 모든 것을 알파벳순으로 정렬해야합니까?
- 이러한 접근 방식의 조합?
또한 하나의 파일에 CSS를 얼마나 많이 보관해야하는지에 제한이 있습니까? 1000 줄? 아니면 모든 것을 한 곳에 보관하는 것이 항상 좋은 생각입니까?
관련 질문 : CSS 규칙을 구성하는 가장 좋은 방법은 무엇입니까?
답변
시작하려면 다음 세 가지 슬라이드 공유 프레젠테이션을 살펴보십시오.
첫째, 가장 중요한 것은 CSS를 문서화하는 것입니다. CSS를 구성하는 데 사용하는 방법이 무엇이든 일관성을 유지하고 문서화하십시오. 각 파일의 맨 위에 해당 파일에있는 내용을 설명하고, 아마도 목차를 제공하고, 고유 한 태그를 쉽게 검색 할 수 있으므로 편집기에서 해당 섹션으로 쉽게 이동할 수 있습니다.
CSS를 여러 파일로 분할하려면 반드시 그렇게하십시오. Oli는 추가 HTTP 요청이 비쌀 수 있지만 두 가지 장점을 모두 활용할 수 있다고 이미 언급했습니다. 일종의 빌드 스크립트를 사용하여 잘 문서화 된 모듈 식 CSS를 압축 된 단일 CSS 파일에 게시합니다. YUI 압축기는 압축에 도움이 될 수 있습니다.
지금까지 다른 사람들이 말한 것과 달리 각 속성을 별도의 줄에 작성하고 들여 쓰기를 사용하여 관련 규칙을 그룹화하는 것을 선호합니다. 예를 들어 Oli의 예를 따릅니다.
#content {
/* css */
}
#content div {
/* css */
}
#content span {
/* css */
}
#content etc {
/* css */
}
#header {
/* css */
}
#header etc {
/* css */
}
따라서 파일 구조를 쉽게 따를 수 있습니다. 특히 그룹 사이에 충분한 공백과 명확하게 표시된 주석 (빠르게 훑어 보는 것만 큼 쉽지는 않음)과 편집하기 쉽습니다 (단일 긴 CSS 줄을 훑어 볼 필요가 없기 때문에) 각 규칙에 대해).
캐스케이드 와 특이성을 이해하고 사용하십시오 (따라서 선택기를 알파벳순으로 정렬하는 것이 적절합니다).
내 CSS를 여러 파일로 분할할지 여부와 어떤 파일에서 사이트와 CSS의 크기와 복잡성에 따라 달라집니다. 나는 항상 최소한 reset.css. 사이트 탐색 메뉴가 약간 복잡해지고 양식 스타일 을 지정할 수있는 CSS가 많으면 layout.css일반적인 페이지 레이아웃 이 수반되는 경향이 있습니다 . 그 외에는 여전히 스스로 알아 내고 있습니다. 내가 가질 수 와 , 색상 / 그래픽과 타이포그래피 떨어져 분할하는 모든 HTML 태그에 대한 완전한 기본 스타일을 제공하기 위해 …nav.cssforms.csscolors.csstype.css/fonts.cssbase.css
답변
나는 다음과 같이 내 CSS를 얻는 경향이 있습니다.
- reset.css
- base.css : 페이지의 주요 섹션에 대한 레이아웃을 설정했습니다.
- 일반 스타일
- 머리글
- Nav
- 함유량
- 보행인
- additional- [페이지 이름] .css : 한 페이지에서만 사용되는 클래스
답변
그러나 읽기가 가장 쉽습니다!
진지하게, 당신은 수십억 개의 제안을 받게 될 것이지만 당신은 단지 몇 가지 방법을 좋아할 것입니다.
그래도 몇 가지 말할 것 :
- CSS 파일을 덩어리로 나누면 머리 속에 정리하는 데 도움이되지만 브라우저에서 더 많은 요청을 받게되므로 궁극적으로 서버 실행 속도가 느려지고 (더 많은 요청) 브라우저가 페이지를 표시하는 데 더 오래 걸립니다. 명심하십시오.
- 임의의 줄 수라고해서 파일을 분할하는 것은 어리석은 일입니다 (편집기가 끔찍하다는 점을 제외하면-이 경우 새 편집기를 가져옵니다).
개인적으로 CSS를 다음과 같이 코딩합니다.
* { /* css */ }
body { /* css */ }
#wrapper { /* css */ }
#innerwrapper { /* css */ }
#content { /* css */ }
#content div { /* css */ }
#content span { /* css */ }
#content etc { /* css */ }
#header { /* css */ }
#header etc { /* css */ }
#footer { /* css */ }
#footer etc { /* css */ }
.class1 { /* css */ }
.class2 { /* css */ }
.class3 { /* css */ }
.classn { /* css */ }
규칙을 한 줄로 유지하면 파일을 매우 빠르게 훑어보고 어떤 규칙이 있는지 확인할 수 있습니다. 그것들이 확장되면 어떤 규칙이 적용되는지 알아 내려고 노력하는 것과 너무 흡사합니다.
답변
CSS 형식을 지정하는 방법에는 여러 가지가 있습니다. 궁극적으로 가장 편하게 쓰는 것은 당신에게 달려 있지만 이것은 더 크고 복잡한 프로젝트를 위해 CSS를 관리하는 데 도움이 될 것입니다. 중요하지는 않지만 BEM과 SMACSS의 조합을 사용하는 경향이 있습니다.
BEM (블록, 요소, 수정 자)
BEM은 프런트 엔드 코드를보다 쉽게 읽고 이해하고, 작업하기 쉽고, 확장하기 쉽고, 더 강력하고 명시 적이며 훨씬 더 엄격하게 만드는 매우 유용하고 강력하며 간단한 명명 규칙입니다.
블록
다음과 같이 그 자체로 의미있는 독립형 엔티티 :
header, container, menu, checkbox, input
요소
블록의 일부이며 독립적 인 의미가 없습니다. 의미 론적으로 블록에 연결되어 있습니다.
menu item, list item, checkbox caption, header title
수정 자
블록 또는 요소에 대한 플래그. 이를 사용하여 모양이나 동작을 변경하십시오.
disabled, highlighted, checked, fixed, size big, color yellow
OOCSS
OOCSS의 목적은 코드 재사용을 장려하고 궁극적으로 추가 및 유지 관리가 더 쉬운 더 빠르고 효율적인 스타일 시트를 장려하는 것입니다.
OOCSS는 두 가지 주요 원칙을 기반으로합니다.
- 피부에서 구조 분리
즉, 반복되는 시각적 기능 (예 : 배경 및 테두리 스타일)을 별도의 “스킨”으로 정의하여 많은 코드없이 다양한 개체와 혼합하여 다양한 시각적 다양성을 얻을 수 있습니다. 모듈 개체 및 해당 스킨을 참조하십시오.
- 용기와 내용물의 분리
본질적으로 이것은 “위치 종속 스타일을 거의 사용하지 않는다”는 의미입니다. 물체는 어디에 두든 동일하게 보여야합니다. 따라서 .myObject h2 {…}를 사용하여 특정 스타일을 지정하는 대신 문제를 설명하는 클래스를 만들고 적용합니다. 이것은 다음과 같은 보증을 제공합니다. (1) 분류되지 않은 모든는 동일하게 보입니다. (2) 카테고리 클래스 (믹스 인이라고 함)의 모든 요소는 동일하게 보입니다. 3) 실제로 .myObject h2가 정상처럼 보이길 원하는 경우에 대한 재정의 스타일을 만들 필요가 없습니다.
SMACSS
SMACSS는 디자인 프로세스를 검토하는 방법이며 이러한 엄격한 프레임 워크를 유연한 사고 프로세스에 맞추는 방법입니다. CSS를 사용할 때 사이트 개발에 대한 일관된 접근 방식을 문서화하려는 시도입니다.
SMACSS의 핵심은 분류입니다. CSS 규칙을 분류함으로써 패턴을보기 시작하고 이러한 각 패턴에 대한 더 나은 사례를 정의 할 수 있습니다.
카테고리에는 5 가지 유형이 있습니다.
/* Base */
/* Layout */
/* Modules */
/* State */
/* Theme */
기본
재설정 및 기본 요소 스타일을 포함합니다. 또한 특정 상황에서 나중에 문서에서 덮어 쓸 수있는 단추, 격자 등과 같은 컨트롤에 대한 기본 스타일을 가질 수 있습니다.
레이아웃
모든 탐색, 이동 경로, 사이트 맵 등을 포함합니다.
모듈
은 연락처 양식 스타일, 홈페이지 타일, 제품 목록 등과 같은 영역 별 스타일을 포함합니다.
State
isSelected, isActive, hasError, wasSuccessful 등과 같은 상태 클래스를 포함합니다.
테마 테마
와 관련된 모든 스타일을 포함합니다.
여기에 자세히 설명 할 내용이 너무 많지만 다음 항목도 살펴보십시오.
답변
나는이 순서대로 간다 :
- 일반적으로 베어 요소 (a, ul, ol 등)에 적용되는 일반 스타일 규칙이지만 일반 클래스 (.button, .error)도 될 수 있습니다.
- 대부분 / 모든 페이지에 적용되는 페이지 레이아웃 규칙
- 개별 페이지 레이아웃 규칙
단일 페이지 또는 소규모 그룹 페이지에 적용되는 스타일 규칙의 경우 본문을 ID 및 클래스로 설정하여 특정 페이지를 쉽게 타겟팅 할 수 있도록합니다. id는 파일의 기본 이름이고 클래스는 파일이있는 디렉토리 이름입니다.
답변
저는 다양한 전략을 시도해 보았고 항상이 스타일로 돌아 왔습니다.
.class {border: 1px solid #000; padding: 0; margin: 0;}
이것은 많은 양의 선언과 관련하여 가장 친절합니다.
답변
일반적인 스타일을 고려하십시오. 똑같은 스타일이 아니라 하도록 의도 된 -한 선택기의 스타일을 변경하면 다른 선택기도 변경하고 싶을 수 있습니다. 이 스타일의 예를 다른 게시물에 추가했습니다.
CSS 파일에서 해당 CSS 파일 내에서 사용할 변수를 만듭니다 .
그 외에도 관련 규칙을 함께 그룹화하십시오. 모든 페이지에 실제로 모든 규칙 이 필요 하지 않는 한 규칙을 여러 파일로 분할하십시오 .
