답변:
CSS '프레임 워크'는 요점을 완전히 놓치고 있습니다.
CSS는 기본 라이브러리 / 프레임 워크를 포함시킨 다음 더 높은 수준의 작업을 수행하기 위해 여기에서 함수와 객체를 호출 할 수있는 JavaScript와 다릅니다. CSS 프레임 워크가 제공 할 수있는 모든 것은 선언적 규칙입니다. 일부 기본 브라우저 규칙 재설정 항목, 페이지를 강제로 작성해야하는 클래스 스타일, 'float'및 'clear'를 사용하는 레이아웃 규칙입니다. 수백 개의 프레임 워크 규칙을 부풀리기보다는 CSS 몇 줄로 직접 작성할 수 있습니다.
특히 '그리드 레이아웃'은 프레젠테이션을 마크 업에 혼합하던 과거로 거슬러 올라갑니다. 'div class = "span-24"'는 표보다 낫지 않습니다. 다시 들어가서 레이아웃에 영향을 미치려면 마크 업을 변경해야합니다. 그리고 제가 본 모든 프레임 워크는 고정 픽셀 플로팅 상자를 기반으로하므로 다양한 창 크기에서 액세스 할 수있는 유동적 인 레이아웃을 만들 수 없습니다.
CSS 규칙을 작성하기에는 너무 무서워하는 사람에게만 사용하는 역방향 저작입니다.
따라서 아직이 질문에 아무도 응답하지 않았습니다 (몇 번의 찬성 투표를 보긴했지만). 나는 적어도이 프롬프트에서 두 번째 질문을 다루려고 시도 할 것입니다.
CSS 프레임 워크는 훌륭합니다. 다른 프레임 워크와 마찬가지로 개발 시간을 단축하고 사이트 별 디자인 및 CSS 작업을 즉시 시작할 수 있습니다. 그들은 어려운 결정에 대해 생각하므로 당신이 할 필요가 없습니다.
안타깝게도 프레임 워크 사용에는 일반적으로 두 가지 단점이 있습니다.
프레임 워크는 CSS 코드의 전체 구조와 메커니즘을 결정합니다. 이제 저는 CSS 재설정에 대해 말하는 것이 아닙니다 (이것들은 그 자체로는 유용하지만 진정한 프레임 워크는 아닙니다). 저는 정직하고 좋은 프레임 워크에 대해 이야기하고 있습니다.이 프레임 워크는 문서에서 사용할 의미 태그 등을 이미 결정했습니다. 따라서 프레임 워크에 의존하게되며 버그가있을 때 프레임 워크에서는 가장 일반적으로 직접 수정해야합니다.
프레임 워크는 브라우저 간 / 고급 CSS 문제를 인식하지 못하는 이유가 아닙니다. PHP 또는 JavaScript 프레임 워크로 작업하는 것처럼 변함없이 실행됩니다. 그리고 그들을 다루는 방법을 알아야합니다. 다른 사람의 프레임 워크를 사용하기 전에 먼저 자신의 프레임 워크를 작성해야한다는 공통된 말이 있습니다.
블루 프린트를 잠깐 살펴보면 실제로 프레임 워크라고 부르지는 않겠습니다. 상단에 몇 가지 추가 기능이있는 재설정 일 수 있습니다.
BluePrint와 다른 몇 가지를 살펴 봤고 제가 권장하는 유일한 CSS '프레임 워크'는 YUI Grids입니다.
장점 :
단점 :
다른 사람들이 게시했듯이 CSS에 대한 실제 '프레임 워크'는 없습니다. 스타일 시트 재설정 은 레이아웃에도 많은 도움이됩니다. 나는 보통 재설정 스타일 시트를 고수하고 거기에서 이동합니다. 그러나 CSS 경험이 많지 않다면 YUI Grids로 시간을 절약 할 수 있습니다.
BluePrint 및 YUI와 같은 몇 가지 CSS 프레임 워크와 Eric Meyer와 같은 CSS 재설정을 연구하고 이해하는 데 시간을 투자하십시오 (정말 이해합니다!). 그런 다음 시간을내어 작업 방법과 구축하는 사이트의 종류에 따라 자신 만의 재설정 및 / 또는 프레임 워크를 구성하십시오.
개인적으로 저는 Eric Meyer 재설정의 대부분을 일부 클래스 및 내 자신의 재설정과 함께 BluePrint 및 YUI의 몇 가지 아이디어와 함께 사용합니다.
저는 최근 Eric Meyer가 CSS 프레임 워크에 대한 프레젠테이션을보고 "그러면 어떤 것이 나에게 적합한가?"라는 질문을 던졌습니다. 그런 다음 빈 슬라이드를 보여 주면서 질문에 답했습니다. 그의 요점은 대부분의 재설정 및 프레임 워크에 몇 가지 유용한 개념이 내장되어 있지만 자신에게 가장 적합한 것은 직접 작성하는 것입니다 (노력할만한 가치가 있음).
CSS '프레임 워크'를 사용하는 이유는 무엇입니까?
시간에 대한 압박을받는 경우.
당신이 CSS를 모르고 당신을 위해 그것을 쓸 수있는 사람을 모르는 경우.
표준 등에 대해 지나치게 소중하지 않은 경우
저는 블루 프린트 나 960을 사용하는 것에 정말 만족 한 프로그래머를 알고 있습니다. 프론트 엔드 개발자에게로 향하지 않고도 스스로 레이아웃을 만들 수 있기 때문입니다. 이것은 개인 프로젝트 또는 제한된 자원이있는 스타트 업에 이상적입니다.
이미 CSS에 대한 적절한 지식을 가지고 있다면 아마도 이미 적절한 재고 레이아웃 라이브러리를 가지고있을 것이므로 분명히 프레임 워크가 필요하지 않을 것입니다.
그러나 초보자이고 무언가를 시작하고 실행해야하는 경우 프레임 워크로 전환 할 수 있습니다. 기본 레이아웃을 훨씬 간단하게 만들고 브라우저 호환성 문제도 해결하기 때문입니다.
모든 것을 말했듯이, 많은 프레임 워크는 끔찍한 클래스 이름 등을 사용합니다. 프레임 워크를 시작점으로 삼고 자체 클래스 및 ID 태그로 사용자 정의한 일부 웹 사이트를 알고 있습니다. 그러나 분명히 그 재 작성에도 약간의 작업이 필요합니다. 위에서 언급했듯이 Compass와 같은 것을 사용하면 문제를 해결하는 데 도움이됩니다.
따라서 CSS 프레임 워크는 의미론을 희생하면서 시간을 절약 할 수 있습니다. 그들은 또한 CSS에 대한 지식을 손상시킬 수 있지만 일반적으로 주제를 배우는 데 얼마나 많은 투자를하는지에 달려 있습니다. 그것들을 사용하는지 여부는 당신에게 달려 있습니다.
사용 가능한 프레임 워크가 문제 해결에 얼마나 효과적인지 자문해야합니다. 요구 사항을 충족합니까?
프레임 워크를 사용하면 픽셀 수준에서 몇 가지 규칙이나 세부 정보를 설정하고 나머지 시간을 구현 및 제작에 할애 할 수 있습니다. 엄청난 생산성 향상입니다. 프로젝트 후반에 몇 픽셀 씩 조정하는 데 시간을 소비한다면 (디자인을 마이크로 관리) 프레임 워크가 유용 할 수 있다는 신호입니다.
The Pragmatic Programmer의 팁 # 17은 "문제 영역에 가까운 프로그램"이라고 말합니다. 추상화 계층을 사용하면 레이아웃의 실제 문제를 해결하는 데 더 가까워 질 수 있습니다. 예를 들어, 픽셀을 약간 조정하는 대신 추가 시간을 사용하여 사용자 경험을 향상시키는 데 집중할 수 있습니다.
양을 위해 질을 희생해야한다는 말은 아닙니다. 효율성에 관한 것입니다.
최근 프로젝트에서는 리소스가 매우 제한되어 있고 인기있는 프레임 워크가 내가 원하는대로하지 않았기 때문에 자체 프레임 워크를 만들었습니다. 그런 다음 배포 한 동일한 그리드에 스냅되도록 디자인 팀의 PSD를 설정했습니다.
프레임 워크는 CSS의 특정 구현 일 필요는 없습니다. 인터넷 웹에서 다운로드 한 부풀어 오른 내용이나 오래된 아이디어를 구현하는 무언가 일 필요는 없습니다. 일을 끝내기위한 기술 일뿐입니다. 일부 코더가 이미 자체 프레임 워크를 가지고 있고 그것을 알지 못한다고해도 놀라지 않을 것입니다. 사실, DOM을 CSS로 확장하는 기본 요소의 집합으로 생각한다면 그것은 정의상 프레임 워크입니다.
저는 실제로 지난 24 시간 동안이 문제를 직접 조사하는 데 많은 시간을 보냈습니다. 내 결론은 멋진 재설정 (나는 YUI 재설정 사용 )과 기본 설정을위한 다른 무언가 ( 내 경우에는 YUI 글꼴 이 가치가 있었으며 BluePrint의 "추가 기능"이 귀하의 것이 될 수 있음)가 좋은 생각이라는 것입니다. 그러나 일반적으로 YUI 그리드 와 같은 "프레임 워크" 는 너무 제한적이어서 클래스 이름, ID 등을 사용해야하며 수제 CSS처럼 사이트에 거의 적합하지 않습니다.
간단히 말해서 재설정은 꽤 멋져 보입니다. 목록에 대한 margin-vs-padding, 단락 간격 등의 모든 변형을 제거하는 것이 좋습니다. 그러나 그것은 내가 받아들이는 한입니다.
Site Point CEO Kevin Yank 의이 비디오 프레젠테이션이 귀하의 질문에 답할 것이라고 생각합니다 . 나는 그것을 보는 것을 정말로 추천합니다.
Compass를 사용하면 프레임 워크의 클래스와 ID의 이름을 고유 한 의미 이름으로 바꿀 수 있으므로 확인하고 싶을 수 있습니다. 또한 믹스 인과 같은 평범한 CSS로는 얻을 수없는 것들에 대한 액세스를 제공합니다.
이러한 도구를 실제로 파고 사용하지 않고 비판하는 이른바 "CSS 전문가"에 놀랐습니다. 필수입니까? 아니요. 자신의 프레임 워크가 마음에 든다면 (자신 만의 프레임 워크가 있습니다. 그렇죠? CSS 프레임 워크는 신중하게 정의 된 라이브러리 일뿐입니다. 모든 사람이 하나를 사용해야 함) 반드시 계속 사용하십시오. 아무도 당신에게 다른 프레임 워크를 사용하도록 강요하지 않으며 프레임 워크를 사용하는 사람들이 CSS 순수 주의자들에게 그들이 "잘못하고있다"고 말하는 것을 보지 않습니다.
그러한 관점에서 프레임 워크를 비판하는 것은 무지뿐 아니라 불안 함을 드러 낼뿐입니다. 예를 들어, 사람이 CSS를 몰라도 Compass와 같은 도구를 사용할 것이라는 생각은 웃을 수 있습니다. 프레임 워크가 일반적으로 모든 CSS를 작성하지 않는다는 것을 알고 있습니까? 여전히 대부분의 프레임 워크 컨텍스트 내에서 자체 CSS를 분리하고 작성할 수 있습니다. 사실, CSS를 모른다면 금방 좌절 할 수 있습니다.
나 자신에게는 이미 문서화되고 수백 명의 다른 사용자가 테스트 한 프레임 워크가 있고 Compass를 통해 고유 한 클래스와 ID를 적용 할 수 있기 때문에 프레임 워크가 있다는 점에 감사합니다. 프레임 워크가 적합하지 않은 것이 필요하면 직접 코딩하겠습니다.
내가 찾은 좋은 링크 : 상위 12 가지 CSS 프레임 워크 및이를 이해하는 방법
다음은 CSS 프레임 워크에 대한 블로그 게시물입니다. 언제 CSS 프레임 워크를 사용합니까?
내가 아는 유일한 방법은 CSS 프레임 워크를 사용하고 시맨틱 마크 업을 유지하는 방법은 더 높은 수준의 추상화를 사용하는 것입니다. 현재로서는 Compass가 사용하기에 충분히 성숙하다는 것을 알고있는 유일한 제품이지만 Nicole Sullivan은 그녀의 "Object-Oriented CSS"프로젝트에서 흥미로운 일을하고있는 것 같습니다.
나는 Compass의 Sass 믹스 인의 영리한 사용이 훌륭하고 유지 가능한 의미 마크 업의 성배를 향한 큰 발걸음을 내딛었습니다. 프레젠테이션 클래스를 마크 업에서 제외하기 위해 Compass와 같은 추상화없이 Blueprint 또는 YUI와 같은 프레임 워크를 사용하고 싶지는 않습니다.
BTW, Elastic이라는 멋진 CSS 프레임 워크가 있습니다.이 프레임 워크는 Compass에 추가하는 것을 고려하고있을만큼 좋아 보입니다.
저는 몇 개의 일회성 사이트에서 Blueprint를 사용했으며 주로 브라우저 간 테스트에서 시간을 확실히 절약했습니다.
밝은면에서는 읽을 수 있지만 마크 업에 프레젠테이션 코드를 추가하는 것은 확실히 짜증납니다. 저는 "마크 업을 건드리지 않고 재 설계 할 수 있습니다"라는 개념을 좋아하지만, 어제 실제로 그렇게되지 않을 사이트를 제작하고 어제 완료해야한다면 Blueprint를 살펴 보겠습니다.
또한 어떤 유형의 레이아웃을 만들 수 있는지에 대한 장단점이 있습니다. 처음부터 엄격한 그리드에서 사이트를 와이어 프레임하면 최소한의 번거 로움으로 프레임 워크로 전치하는 것이 훨씬 쉽습니다.
http://www.ez-css.org/를 확인 하세요 . 작업하기 가장 쉽고 가벼운 CSS 프레임 워크 중 하나입니다. :)
이 데모를보십시오 : http://www.richstyle.org/demo-web.php 이 프레임 워크는 "HTML 태그가 충분해야한다"는 생각을 기반으로합니다. 재사용 성은 웹 프레임 워크를 포함한 소프트웨어 구성 요소를 선택하는 데 가장 중요한 요소라고 생각합니다. 웹 프레임 워크 개발자의 경우 표준에 더 많이 헌신할수록 재사용 가능성이 높아집니다.