내 CSS 파일의 내용을 어떻게 구성해야합니까?

80

이 질문은 .css 파일 내에서 실제 CSS 지시문 자체를 구성하는 것에 관한 것입니다. 새 페이지 또는 페이지 집합을 개발할 때 일반적으로 .css 파일에 직접 지시문을 추가하고 가능한 한 리팩토링하려고합니다. 시간이 지나면 수백 (또는 수천) 줄의 줄이 생기고 레이아웃을 조정할 때 필요한 것을 찾기가 어려울 수 있습니다.

누구든지 지침을 구성하는 방법에 대한 조언이 있습니까?

  • DOM을 모방하여 하향식으로 구성해야합니까?
  • UI의 동일한 부분을 지원하는 요소에 대한 지시문을 함께 배치하여 기능적으로 구성해야합니까?
  • 선택기를 기준으로 모든 것을 알파벳순으로 정렬해야합니까?
  • 이러한 접근 방식의 조합?

또한 하나의 파일에 CSS를 얼마나 많이 보관해야하는지에 제한이 있습니까? 1000 줄? 아니면 모든 것을 한 곳에 보관하는 것이 항상 좋은 생각입니까?

관련 질문 : CSS 규칙을 구성하는 가장 좋은 방법은 무엇입니까?

css 
— 아담 벨레 어
소스
1
참고로- 더 많은 답변을 읽으 려면 <a href=" stackoverflow.com/questions/72911/… 같은 질문</a>을했습니다 .
— Nathan Long
1
훌륭한 질문, 훌륭한 답변을 생성했습니다. 유용한 정보를 많이 찾았습니다. 감사.
— Sebastien 2013

답변:

54

시작하려면 다음 세 가지 슬라이드 공유 프레젠테이션을 살펴보십시오.

첫째, 가장 중요한 것은 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

— Mercator
소스
참고 : reset.css데드 링크가되었습니다
— Braden Best
@BradenBest, 감사합니다, YUI 링크가 업데이트되었습니다. 하지만 reset.css 링크에 원래와 동일한 정보가 포함되어 있는지 확실하지 않습니다. 그리고 YUI는 더 이상 유지되지 않으므로 인터넷 검색을 사용하는 것이 좋습니다.
— mercator
18

나는 다음과 같이 내 CSS를 얻는 경향이 있습니다.

  1. reset.css
  2. base.css : 페이지의 주요 섹션에 대한 레이아웃을 설정했습니다.
    1. 일반 스타일
    2. 머리글
    3. Nav
    4. 함유량
    5. 보행인
  3. additional- [페이지 이름] .css : 한 페이지에서만 사용되는 클래스
— 우셔
소스
한 페이지에서만 사용되는 CSS를 추가하려는 경우 CSS 파일을 사용하지 않고 해당 페이지에 CSS를 추가하는 것은 어떻습니까?
— timetofly 2013
오 맙소사, 내가 왜 그렇게 생각하지 않았어?
— Sebastien 2013
2
@ user371699 일부는 태그로 <link>HTML 파일을 복잡하게 만드는 것보다 사용하는 것이 더 효율적 이라고 주장 할 것 <style>입니다.
— DylRicho 2014 년
1
@Sebastien CSS 파일에 CSS를 유지하면 다양한 스타일간에 쉽게 전환 할 수 있습니다. <style> 태그를 사용하면 모든 것을 다시 작성해야합니다.
— reinaldoluckman 2014 년
1
@AlexLeung 더 관리하기 쉽습니다. 내 말의 잘못된 선택!
— DylRicho 2016
9

그러나 읽기가 가장 쉽습니다!

진지하게, 당신은 수십억 개의 제안을 받게 될 것이지만 당신은 단지 몇 가지 방법을 좋아할 것입니다.

그래도 몇 가지 말할 것 :

  • 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 또는 JavaScript 파일을 5000 줄 이상으로 작업 한 적이 있습니까? 아마 아닐 것입니다. 그러나 모든 CSS를 최소화하고 prod environemtn (및 기타 파일)을 위해 큰 CSS로 병합하는 도구는 개발 단계에서 이러한 문제없이이 작업을 수행 할 수 있도록 존재합니다.
— forsberg
이 답변은 9 살입니다. 당시 존재했던 도구는 현재 사용하는 것만 큼 발전하지 않았습니다 (예 : LESS / SASS 전 처리기). 그러나 어쨌든, 그 당시에는 하나의 큰 스타일 시트가 드물지 않았습니다. 따라서 대답의 스타일. 인라인 이 아니었다면 10,000 줄이되었을 것 입니다. 요즘에는 다른 방식으로 작업을 수행하지만 도구도 다르고 다운로드 사이의 지연 시간을 최소화하기 위해 HTTP2와 같은 기능이 있습니다.
— Oli
9

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는 두 가지 주요 원칙을 기반으로합니다.

  1. 피부에서 구조 분리

즉, 반복되는 시각적 기능 (예 : 배경 및 테두리 스타일)을 별도의 "스킨"으로 정의하여 많은 코드없이 다양한 개체와 혼합하여 다양한 시각적 다양성을 얻을 수 있습니다. 모듈 개체 및 해당 스킨을 참조하십시오.

  1. 용기와 내용물의 분리

본질적으로 이것은 "위치 종속 스타일을 거의 사용하지 않는다"는 의미입니다. 물체는 어디에 두든 동일하게 보여야합니다. 따라서 .myObject h2 {...}를 사용하여 특정 스타일을 지정하는 대신 문제를 설명하는 클래스를 만들고 적용합니다. 이것은 다음과 같은 보증을 제공합니다. (1) 분류되지 않은 모든는 동일하게 보입니다. (2) 카테고리 클래스 (믹스 인이라고 함)의 모든 요소는 동일하게 보입니다. 3) 실제로 .myObject h2가 정상처럼 보이길 원하는 경우에 대한 재정의 스타일을 만들 필요가 없습니다.

SMACSS

SMACSS는 디자인 프로세스를 검토하는 방법이며 이러한 엄격한 프레임 워크를 유연한 사고 프로세스에 맞추는 방법입니다. CSS를 사용할 때 사이트 개발에 대한 일관된 접근 방식을 문서화하려는 시도입니다.

SMACSS의 핵심은 분류입니다. CSS 규칙을 분류함으로써 패턴을보기 시작하고 이러한 각 패턴에 대한 더 나은 사례를 정의 할 수 있습니다.

카테고리에는 5 가지 유형이 있습니다. 

/* Base */

/* Layout */

/* Modules */

/* State */

/* Theme */

기본 재설정 및 기본 요소 스타일을 포함합니다. 또한 특정 상황에서 나중에 문서에서 덮어 쓸 수있는 단추, 격자 등과 같은 컨트롤에 대한 기본 스타일을 가질 수 있습니다.

레이아웃 모든 탐색, 이동 경로, 사이트 맵 등을 포함합니다.

모듈 은 연락처 양식 스타일, 홈페이지 타일, 제품 목록 등과 같은 영역 별 스타일을 포함합니다.

State isSelected, isActive, hasError, wasSuccessful 등과 같은 상태 클래스를 포함합니다.

테마 테마 와 관련된 모든 스타일을 포함합니다.

여기에 자세히 설명 할 내용이 너무 많지만 다음 항목도 살펴보십시오.

— 크리스 스피 틀스
소스
4

나는이 순서대로 간다 :

  1. 일반적으로 베어 요소 (a, ul, ol 등)에 적용되는 일반 스타일 규칙이지만 일반 클래스 (.button, .error)도 될 수 있습니다.
  2. 대부분 / 모든 페이지에 적용되는 페이지 레이아웃 규칙
  3. 개별 페이지 레이아웃 규칙

단일 페이지 또는 소규모 그룹 페이지에 적용되는 스타일 규칙의 경우 본문을 ID 및 클래스로 설정하여 특정 페이지를 쉽게 타겟팅 할 수 있도록합니다. id는 파일의 기본 이름이고 클래스는 파일이있는 디렉토리 이름입니다.

— 조나단 아켈
소스
나는 이것을 설명하는 방법에 약간의 차이를두고 이에 동의하는 경향이 있습니다. 1) 글로벌 규칙 (설명한 것과 동일하지만 사이트의 거의 모든 것에 영향을 미침), 2) 마스터 페이지 규칙 (이는 머리글, 바닥 글, 콘텐츠 영역 및 사이드 바 (있는 경우)는 대부분 또는 모든 페이지이고 3) 필요에 따라 개별 페이지 규칙은 각 페이지에 대한 파일로 구분됩니다. 이러한 방식으로 스타일 시트를 분할하면 요청이 너무 많이 발생한다는 의견이 몇 개 있었지만 실제로는 두 번의 요청 일 뿐이며 불필요한 스타일이 모든 페이지에로드되지 않도록합니다.
— MQuiggGeorgia
이 원래 답변은 10 년 전이며 최첨단으로 간주되어서는 안됩니다.
— Jonathan Arkell
편집하지 않고 몇 살인지 고려하여 면책 조항을 추가합니다. 그게 다야.
— Jonathan Arkell
4

저는 다양한 전략을 시도해 보았고 항상이 스타일로 돌아 왔습니다.

.class {border: 1px solid #000; padding: 0; margin: 0;}

이것은 많은 양의 선언과 관련하여 가장 친절합니다.

Snook 씨는 거의 4 년 전에 이것에 대해 썼습니다 . :) .

— 닉 상사
소스
다른 날 ... 2 년 전 =)
— Oli
하아! 실제로 그는했다 – 흥미 롭다 :) 그는 최근 기사에서 그것과 연결 했음에 틀림 없다. 아니면 그냥 미쳤을 수도 있습니다.
— Nick Sergeant
2

일반적인 스타일을 고려하십시오. 똑같은 스타일이 아니라 하도록 의도 된 -한 선택기의 스타일을 변경하면 다른 선택기도 변경하고 싶을 수 있습니다. 이 스타일의 예를 다른 게시물에 추가했습니다. CSS 파일에서 해당 CSS 파일 내에서 사용할 변수를 만듭니다 .

그 외에도 관련 규칙을 함께 그룹화하십시오. 모든 페이지에 실제로 모든 규칙 이 필요 하지 않는 한 규칙을 여러 파일로 분할하십시오 .

— Shog9
소스
1

실제 순서는 CSS가 적용되는 방식의 중요한 부분이므로 "알파벳순"제안을 진행하는 것은 약간 어리석은 것 같습니다.

일반적으로 항목이 영향을 미치는 페이지 영역별로 항목을 그룹화하려고합니다. 예를 들어 모든 것에 영향을 미치는 기본 스타일이 먼저 이동하고 머리글 및 바닥 글 스타일, 탐색 스타일, 기본 콘텐츠 스타일, 보조 콘텐츠 스타일 순으로 이동합니다.

유지 관리가 더 어려울 수 있으므로이 시점에서 여러 파일로 나누는 것을 피할 것입니다. (6 개의 CSS 파일이 열려있을 때 캐스케이드 순서를 유지하는 것은 매우 어렵습니다.) 그러나 페이지의 하위 집합에만 적용되는 경우 스타일을 다른 파일로 이동하기 시작할 것입니다. 예를 들어, 양식 스타일은 페이지에 실제로 양식이 포함되어있을 때만 페이지에 링크됩니다.

— 팀 부커
소스
1

나는 이것에 대해 끊임없이 걱정했지만 Firebug가 구출했습니다.

요즘에는 스타일이 Firebug를 통해 어떻게 상호 연관되어 있는지 살펴보고 수행해야 할 작업을 파악하는 것이 훨씬 쉽습니다.

물론 관련된 스타일을 함께 그룹화하는 합리적인 구조가 있는지 확인하십시오. Firebug를 사용하면 추적하기가 훨씬 쉬워 져 완벽한 CSS 구조를 만드는 것에 대해 걱정할 필요가 없습니다.

— Sarhanis
소스
1

여기 내가하는 일이 있습니다. 지시문이없고 다른 파일을 호출하는 CSS 색인 페이지가 있습니다. 다음은 간단한 샘플입니다.

@import url("stylesheet-name/complete-reset.css");
@import url("stylesheet-name/colors.css");
@import url("stylesheet-name/structure.css");
@import url("stylesheet-name/html-tags.css");
@import url("stylesheet-name/menu-items.css");
@import url("stylesheet-name/portfolio.css");
@import url("stylesheet-name/error-messages.css");

완전한 재설정으로 시작됩니다. 다음 파일은 쉽게 참조 할 수 있도록 색상 팔레트를 정의합니다. 그럼 스타일은 메인 <div/>등 그들이 맞는 레이아웃, 머리글, 바닥 글, 열 번호,, ... HTML 태그의 definses을 결정들 <body/>, <h1/>, <p/>, t는 등 ... 다음 사이트의 특정 부분을 온다.

그것은 매우 비판적이고 매우 명확합니다. 변경할 코드와 dd 새 섹션을 찾는 것이 훨씬 더 친숙합니다.

— Allesklar
소스
7
이는 브라우저가 페이지 렌더링을 시작하기 전에 서버에 9 개의 요청을해야 함을 의미합니다! 대부분의 브라우저는 한 번에 두 개 이상의 서버 연결을 허용하지 않습니다. 이것은 개발자에게는 괜찮지 만 프로덕션을 위해 이것을 하나의 파일로 압축하고 싶습니다! JS도 마찬가지입니다
— Oli
3
링크는 @import보다 훨씬 효율적입니다. Yahoo YSlow 규칙 # 13
— scunliffe
1

CSS 파일은 클라이언트에 캐시됩니다. 따라서 모든 스타일을 하나의 파일에 보관하는 것이 좋습니다. 그러나 개발할 때 도메인에 따라 CSS를 구성하는 것이 유용하다는 것을 알게되었습니다.

예를 들면 : reset.css, design.css, text.css등. 최종 제품을 출시 할 때 모든 스타일을 하나의 파일로 묶습니다.

또 다른 유용한 팁은 스타일이 아닌 규칙에 가독성에 초점을 맞추는 것입니다.

동안:

ul li
{
    margin-left: 10px;
    padding: 0;
}

예를 들어 100 줄의 코드가 있으면 규칙을 찾기가 쉽지 않습니다.

대신 다음 형식을 사용합니다.

rule { property: value; property: value; }

rule { property: value; property: value; }
— cllpse
소스
0

ITCSS

작성자 : Harry Roberts (CSS Wizardry)

전역 네임 스페이스 및 캐스케이드를 정의하고 선택기 특이성을 낮게 유지하는 데 도움이됩니다.

구조

처음 두 가지는 전처리기를 사용하는 경우에만 적용됩니다.

  1. (설정)
  2. (도구)
  3. 제네릭
  4. 집단
  5. 사물
  6. 구성품
  7. 트럼프
— Eric Harms
소스
-2

일반적으로 이렇게합니다.

  1. <link rel="stylesheet" href="css/style.css">

  2. style.css에서 다음을 @import합니다.

    @import url(colors.css);
@import url(grid.css);
@import url(custom.css); + some more files (if needed)

  3. 에서 colors.cssI @import(CSS의 사용자 지정 속성을 사용하는 경우) 다음 :

    @import url(root/variable.css);

모든 것이 정돈되어 있고 편집 할 코드 부분을 쉽게 얻을 수 있습니다. 어떻게 든 도움이된다면 기뻐할 것입니다.

— htmlstrap
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.