CSS 프레임 워크는 언제 사용해야합니까?


11

CSS 프레임 워크 사용을위한 모범 사례 시나리오는 무엇입니까? 프레임 워크를 사용하지 않고 CSS를 처음부터 "롤"하는 것이 더 좋은 방법은 언제입니까?

답변:


11

CSS 프레임 워크는 실제로 프레임 워크가 아니기 때문에 약간 까다 롭습니다. 그들은 단순히 사전 정의 된 클래스입니다. 그러나 이것은 귀하의 질문이 아닙니다.

CSS 프레임 워크는 목업 및 와이어 프레임에 적합합니다. 태그에 의미없는 클래스를 추가하기 때문에 라이브 사이트에서 사용하지 않는 것이 좋습니다. ".span3"은 내용에 대해서는 아무 것도 말하지 않고 디자인 만 알려줍니다.

그러나 블루 프린트에는 프레임 워크 클래스와 시맨틱 클래스를 한 번 결합하는 데 도움이되는 멋진 도구가 있습니다.

나는 항상 내 CSS를 굴린다.


4
나는 이것에 Thorn007과 함께 있습니다. CSS는 당신이 그것을 얻을 때 꽤 대담합니다. 좋은 CSS 재설정을 사용하고 직접 롤백하십시오.
jessegavin

3

그냥 피하십시오, 그들은 귀찮은 것입니다.

특히 이것.

* { margin:0; padding:0; }

가장 큰 불만은 재설정 및 / 또는 프레임 워크를 사용하는 사이트를 상속 / 유지 관리하는 경우 사이트를 수정하기 전에 해당 프레임 워크를 알아야한다는 것입니다.

h1 태그를 추가하면 특정 사항이 필요합니다. 대부분의 재설정은 h1 태그가 더 이상 기본적으로 더 이상 작동하지 않도록 모든 패딩, 여백, 블록 등을 제거합니다. 그래서 돌아가서 처음에 있던 모든 것을 추가해야합니다.

일반적으로 (제 경험상) 재설정 및 프레임 워크를 사용하는 CSS를 이해하지 못하는 사람들은 더 많은 일을합니다.


1
Yahoo의 Eric Meyer와 웹 개발자는 CSS를 이해하고 CSS 재설정을 사용합니다. 내 경험상 그들은 브라우저 간 일관성을 달성하려고 할 때 많은 시간과 두통을 절약합니다. -CSS 프레임 워크는 불완전합니다.
jessegavin

내가 어떤 일을 기대 H1 태그를 추가 할 때 .. 불행하게도 당신이 필요 , 따라서, CSS 리셋 (의 필요성 각 브라우저에서 다른 것을 기대 ..와 하지 프레임 워크 )
가브리엘 Petrioli

브라우저는 다른 마진 등을 사용하는 경향이 있기 때문에 h1은 매우 나쁜 예입니다. 개인적으로 나는 "set"을 재설정하는 것을 선호합니다. 즉, 모든 것을 0으로 재설정하는 대신, 먼저 자신의 스타일 시트에 설정하십시오!
DisgruntledGoat

* {margin:0; padding:0;}가장 중요한 CSS 재설정입니다. margin-top/maring-bottom태그를 포함하여 모든 태그에서 제거 p하므로 각 줄 사이에 큰 공간이 표시되지 않습니다. 이 웹 사이트조차도 p {margin:0;}그렇지 않으면 브라우저가 각 줄 사이에 큰 공간을 차지할 것입니다. 나는 그들이 당신이 성가 신다고 말할 수 있는지 궁금합니다.
마르코 데마 이오

2

CSS Framework가 제공하는 유일한 서비스는 CSS에 익숙하지 않은 사람들을위한 출발점이라고 생각합니다.


2

Eric Meyer의 reset.css를 사용하는 것이 좋지만 CSS "frameworks"가 레이아웃에 도움이 될 수 있다고 생각합니다. Blueprint, YUI 그리드 및 960-grid를 사용하면 CSS를 직접 작성하지 않고도 매우 복잡한 레이아웃을 얻을 수 있습니다.

언급 된 단점이 있지만, 예를 들어 사용자 지정 코드를 롤링하는 대신 CMS에서 웹 사이트를 구축하는 것에 대해서도 마찬가지 일 수 있지만 여전히 유용 할 수 있으며 많은 사이트에서 얻은 이점은 외부 CSS 또는 성능 문제보다 중요합니다.


1

실제로 자신의 디자인을 구현하는 경우 다른 사람이 원하는 정확한 디자인을 작성하지 않은 한 자신의 CSS를 작성합니다.

CSS를 직접 작성한다고 가정하면 다음과 같은 스타일이있을 때“frameworks”가 유용 할 수 있습니다.

  1. 여러 곳에서 사용; 과
  2. 자신의 수업으로 나눌 수있을만큼 복잡함

정말 간단 스타일의 경우, 표시하는 클래스를 사용하는 것이 좋습니다 (예를 들면 무언가가 class="navigation"), 다음 스타일 시트 클래스에 스타일 규칙을 적용하여 그 모양을 정의합니다.

그러나 하나의 요소 (예 : 레이아웃 관련 스타일, 프레임 워크에서 이름을 지정하는 유형)와 관련이없는 복잡한 스타일 .span3의 경우 클래스에 배치하고 해당 클래스를 CSS에 적용하는 데 아무런 문제가 없습니다. 두 가지 방법을 함께 사용할 수 있습니다.

요소가 예측할 수없는 방식으로 결합 될 수있는 더 크고 복잡한 사이트에서 프레임 워크와 유사한 접근 방식은 실제로 코드를 관리 할 수 ​​있도록 도와줍니다.

그래도 자신 만의 "프레임 워크"를 작성할 수 있다고 말하고 싶습니다. CSS는 그다지 큰 언어가 아니기 때문에“프레임 워크”를 따옴표로 묶었습니다. CSS : Definitive Guide (Eric Meyer)를 하루에 읽은 다음 Blueprint (CSS "프레임 워크")의 모든 코드를 읽고 진행 상황을 거의 이해할 수 있습니다. IE 해결 방법을 조금 연구해야 할 수도 있지만 여기서는 jQuery와 같이 복잡도를 최소한으로 줄였습니다.


1

CSS에는 청사진을 사용합니다.
CSS는 위의 모든 사람들이 말했듯이 정말 간단합니다.

그러나 실제로는 플랫폼을 고려해야합니다.

CSS를 사용하면 렌더링 엔진이 복잡성을 더합니다.

Gecko vs WebKit vs Presto vs Trident ... 누가 그 모든 것을하고 싶습니까?

여기서 '프레임 워크'가 제공하는 것은 모든 브라우저에서 작동 할 수있는 레이아웃을 작성하는 기능이므로 'WTF-am-I-doing = -this-crap'IE 7 quirksmode에 대해 인터넷 검색을 할 필요가 없습니다. 고치거나 비슷한 소리로 말이다.

프레임 워크는 원하는 레이아웃의 90 %를 수행하며 나중에 언제든지 자신 만의 스타일을 추가 할 수 있습니다.

따라서 질문에 대답하기 위해 프레임 워크를 선택하고 그것이 효과가 있는지 확인하십시오. 그럴 수도 있습니다. 그렇다면 당신은 황금색이며, 당신이 실제로하고 싶은 것으로 돌아갈 수 있습니다. 그렇지 않은 경우 CSS를 사용하여 확장하고 작동하지 않는 것을 변경하십시오. 그렇게하면 크로스 브라우저 이점을 유지하면서도 사용자 정의 할 수 있습니다.

작은 혜택으로, 하나를 골라서 항상 사용하고 나서 병에 걸리거나 승진하여 후임자를 훈련시켜야하는 경우 다음과 같이 말할 수 있습니다.

"예, 프레임 워크 ABC를 사용했습니다. 문서는 여기에 있습니다. 코드는 있습니다. 교육은 끝입니다. 행운을 빌어 요."


0

그것이 당신의 모든 요구를 해결할 때 . (이것은 조정 의 아이디어에 근거합니다 .)

프레임 워크에 관한 유일한 책에서? http://www.oreilly.com/web-platform/free/book-of-html-css-frameworks.csp . (여기서는 무료이며 관련성이 있으므로 연결 만 가능합니다.)


링크 한 페이지의 관련 부분을 잘라 붙여 넣을 수있는 것이 가장 좋습니다. 그렇지 않으면 답으로 이것은 일종의 빛입니다. 링크는 종종 시간이 지남에 따라 끊어지기 때문에 링크 만 답변하지 않는 것이 좋습니다. 이 답변을 업데이트하여 OP 및 향후 사용자가 치아를 가릴 수있는 것을 도울 수 있습니까? 미리 감사드립니다!
closetnoc
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.