CSS 분리의 색상과 위치

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

문제

나는 그냥 무엇인지 궁금 다른 사람이 이런 점에서:

당신은 당신을 유지하려고 위치 CSS(layout)에서 별도 색상/맛 CSS(컬러,배경 색,배경 이미지를,글꼴 크기와 가족)?

사용 두 가지 스타일 시트?결합하는 두 스타일 시트 server-side?추상화 계층을 위한 CSS?또는 당신이 하려고도 하지 마십시오?

나는 알고 때로는 후에는 작업에 같은 웹사 프로젝트를 위한 여섯 개월 수 있습니다 일반적으로 라이브 위치 CSS 그러나 끝까지 원하는 색상을 변경하려면/이미지입니다.

도움이 되었습니까?

해결책

"위치 스타일"또는 "레이아웃 스타일"에서 "색상 스타일"을 분리하지 않고 모든 CSS를 함께 유지하는 경향이 있습니다. 특정 "모듈"을 디버깅하려고 할 때 모든 CSS 규칙을 하나의 선택기에 적용하고 스타일 시트 위에 퍼지지 않는 것이 더 쉽다는 것을 알았습니다.

그러나 나는 당신이 읽는 것이 좋습니다 섹시한 스타일 시트 제작 ThinkVitamin.com에서. 내가하는 한 가지는 매번 특정 순서로 규칙을 나열하는 것입니다.

Jina Bolton 's에 대한 자세한 정보 http://creatingsexystylesheets.com/

다른 팁

대규모 프로젝트에서 레이아웃 및 색상/풍미 CSS (똑똑하다면)는 일반적으로 별도로 발생합니다. 첫째, 색상/글꼴 크기/글꼴 가족 스타일 규칙을 계속해서 설정하는 경우 시간을 낭비하고 있습니다. 일반적으로 글꼴을 한 곳에서 정의해야합니다 : 바디 태그. 추가 글꼴은 해당 태그로 정의되어야합니다. 그들은 레이아웃을 담당하는 DIV 내부에 배치해야합니다. 색상과 글꼴 크기도 마찬가지입니다. 나는 규칙에 대한 유일한 예외는 일반적으로 배경 물건 일 것이라고 생각합니다. 그라디언트가 많고 멋진 것들이 있다면 특히 그렇습니다.

실제로 그것이 내려 오는 것은 계획입니다. 잘 계획된 프로젝트에는 색상/풍미 스타일 규칙이 거의 필요하지 않습니다. 따라서 귀하의 질문에 답하기 위해, 예, 보통 H1-H5, A, P 및 텍스트가 포함 된 기타 태그의 모든 글꼴과 색상을 정의하는 "Global.css"파일이 있습니다.

편집하다:

일반적으로 내가 일하는 프로젝트는 상당히 규모이며 여러 가지 모듈이 있기 때문에 스타일을 일종의 계층 구조로 분리합니다. 이것은 CSS의 작동 방식 때문에 의미가 있습니다. "기본"(또는 우리의 경우 Global.css)에있는 스타일 규칙을 변경하지 않는 한 라인 어딘가에있는 스타일은 스타일이 표시됩니다. 막대. 이는 사이트의 글꼴을 수정하려면 단순히 "Body"태그에서 글꼴 패밀리 규칙을 변경하면 전체 사이트에서 전파되기 때문에 도움이됩니다.

따라서 스타일 시트 레이아웃은 다음과 같이 작동합니다.

Global.css (Fonts/Text/Primary font colors)
--> genericBase.css (basic page structures such as columns that are used throughout the site)
--> nav.css (left-hand nav and/or top nav bar)
--> formLayout.css (labels, inputs, fieldsets, any other form stuff)
-----> forums.css (individual modules' styles that may deviate a bit from the usual structures, or simply things specific to those pages)
-----> blogs.css
-----> messages.css (etc etc etc)

여기의 화살표는 계층 구조에서 파일의 "순서"를 암시하기위한 것입니다. 화살표가 길수록 모든 스타일을 하나의 파일에 넣었다면 파일이 포함 된 규칙이 포함 된 스타일 시트가 더 아래로 내려갑니다.

알다시피, 전체 아이디어는 매우 일반적인 스타일로 시작하고 가장 구체적인 방법으로 내려가는 것입니다. CSS 파일로드 된 순서가 있음을 기억하십시오. 브라우저에 문제가 있습니다. 당신은 이것을 당신의 유리하게 사용할 수 있습니다. 흥미로운 점은 우리가 특정 모듈의 CSS 파일에 도달 할 때까지 다른 중요한 것들 대부분이 실제로 그 길을 따라 작동했기 때문에 쓸 스타일이 거의 없습니다.

내가 말했듯이 계획은 매우 중요합니다. 이 방법론이 내 스타일을 "디버그"하는 것이 더 쉬워지고, 거의 해킹을 전혀 사용하지 않으며, 보통 어리석은 IE6 물건에만 사용합니다.

더 많은 정보가 필요하면 알려주세요. 이것이 당신에게 도움이되어 기쁩니다.

나는 그것들을 분리했지만 유지하기가 더 어려웠습니다. 문제는 많은 "형식"속성이 레이아웃에 영향을 미치며 많은 "레이아웃"속성이 실제로 설계 될 수 있다는 것입니다.

몇 가지 예 :

"국경"은 "형식"속성으로 간주 될 수 있지만, 어느 정도의 공간을 차지하므로 경계를 설정하거나 제거 할 때 레이아웃을 조정해야합니다.

"라인 높이"는 글꼴 크기에 연결되어 있으며 "형식"속성으로 간주 될 수 있지만 요소의 크기와 서로 수직으로 정렬되는 방식에 큰 영향을 미칩니다.

여백과 패딩은 때때로 레이아웃에 필요하며 때로는 서식에만 사용됩니다.

당신이 그것에 대해 열심히 생각한다면, 실제로 순수한 형식 또는 순전히 레이아웃 인 속성은 거의 없습니다.

종종 같은 파일에 모든 것을 보관하고 선언 주문, 관련 속성 그룹 등을 통해 깨끗하게 유지하는 것이 더 쉽습니다.

나는 모든 것을 단일 파일로 유지하고 폴더 기능을 사용합니다. CSSEDIT 정리하기 위해. 웹 디자인 회사 인 Viget 은이 기술에 대한 블로그 게시물을 가지고 있습니다. 여기.

최근에 레이아웃과 색상 스타일을 분리했으며 이제 여러 CSS 파일이 있습니다.이 파일은 다음과 같이 가져옵니다.

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style-default.css" title="Default Style" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="style-bw.css" title="Black and White" media="screen" />

모든 레이아웃은 style.css에 있고 색상은 style-default.css입니다. 이렇게하면 표준 스타일이 있지만 사용자는 색상을 변경할 수있는 옵션도 있습니다. 이것은 사용자에게 옵션을 제공 할뿐만 아니라 레이아웃을 터치하지 않고 색상을 쉽게 변경할 수 있습니다 (색상을 훨씬 자주 변경하는 경향이 있습니다).

Firefox에서 내 색상 옵션은 "페이지 스타일"아래보기 메뉴에 나타납니다.

CSS를 다음과 같이 분리하는 패턴에 빠졌습니다.

  • 레이아웃 (헤더, 바닥 글, 로고 - 일반 크롬)
  • 타이포그래피 (글꼴, 크기, 재사용 가능한 인라인 글꼴 스타일)
  • 위젯

후자의 범주는 일반적으로 프로젝트 간 재사용 CSS 코드로 구성되며 일반적으로 다음으로 분할됩니다.

  • 양식 (왼쪽 정렬, 올바른 정렬, 필수 필드에 대한 스타일 등)
  • 그리드 (2 색, 4 색 등 등-약 20 개 정도)
  • 해킹 (즉, 기타 CSS 해킹)
  • 기타 물건 (Ajax 위젯, 툴바, 댓글 상자 등 - 재사용 가능한 모든 것)

색상의 경우 치트 시트 텍스트 파일을 보관합니다. 별도의 스타일 시트에 보관하는 것은 아마도 매우 훈련 된 경우에만 효과가있을 것입니다.

수업을 사용하여 색상을 구체적으로 처리하기 시작했습니다.

.Element {마진, 패딩, 레이아웃 물건}

.ourcolor {#some color}

그러나 클래스 속성을 길게 만듭니다.

그러나 색상을 재사용 할 수 있습니다 : <span class = "ourcolor"> 일부 텍스트

지금까지 나는 색상 조정이 훨씬 쉽기 때문에 선호합니다.

으로 표시 W,지적 을 만드는 섹시 스타일 시트 환상적인 읽기입니다.한 그들을 옹호가 분리 스타일링의 우려를 통해 프레임워크:

  • 니다.css 화면 CSS 파일이 있을 수 있습 귀하의 모든 원하는 스타일을 사용되는 화면에서,그리고/또는 가져올 수 있습니다 추가적인 스타일과 같은 다음과 같다:
    • 재설정합니다.css-reset CSS 파일을 사용할 수 있습을"reset"모든 기본 브라우저 스타일을 만들 수 있습니다 그것은 쉽게 달성하는 크로스 브라우저 호환성.
    • typography.css-타이포그래피 CSS 파일을 정의할 수 있습 귀하의 서체,크기,주요,자간,그리고 아마도 색상입니다.
    • 니다.css-그리드 CSS 파일의 레이아웃 구조(고 행동으로 와이어프레임의 사이트를 정의하여 기본 헤더,바닥,열정).
  • 인쇄합니다.css 인쇄 CSS 파일을 포함 할 것 당신의 스타일을 사용할 경우 페이지가 인쇄됩니다.

을 따르는 경우,이 패턴은 색 갈 것에서 타이포그래피.css,레이아웃 것에서 당신의 그리드.css.

모든 것을 하나의 파일로 유지하고 대체 스타일 (예 : 인쇄용)에 대해서만 다른 파일 만 제공합니다.

이 파일 내에서 전체 레이아웃 (열, 헤드 리어 및 바닥 글)을 실제 내용 (단락, 제목, 목록 ...)에서 분리합니다.

나는 객체 지향을 생각하는 데 익숙하기 때문에 다른 객체 (메뉴, 블로그 게시물)에 대한 스타일을 함께 그룹화합니다. 그 관점에서, 색상과 위치는 둘 다 같은 물체에 속하므로 함께 유지됩니다.

스타일 시트에서 색상을 한 번 정의하고 선언적 이름 (예 : 'headingColour')을 할당 한 다음 색상을 선택기에 할당 할 때 이름을 사용하는 기능을 원합니다 ...

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