[css] 최고의 CSS 프레임 워크는 무엇이며 그만한 가치가 있습니까?

Program / 글쓴이

다른 포럼에서 읽기 저는 CSS 프레임 워크의 세계를 접했습니다. 제가 특별히 살펴본 것은 BluePrint 입니다. 다른 사람이 CSS 프레임 워크를 접한 적이 있는지 궁금합니다. 어떤 것이 가장 좋은지 그리고 노력할만한 가치가 있는지 제안합니까?

답변

CSS ‘프레임 워크’는 요점을 완전히 놓치고 있습니다.

CSS는 기본 라이브러리 / 프레임 워크를 포함시킨 다음 더 높은 수준의 작업을 수행하기 위해 여기에서 함수와 객체를 호출 할 수있는 JavaScript와 다릅니다. CSS 프레임 워크가 제공 할 수있는 모든 것은 선언적 규칙입니다. 일부 기본 브라우저 규칙 재설정 항목, 페이지를 강제로 작성해야하는 클래스 스타일, ‘float’및 ‘clear’를 사용하는 레이아웃 규칙입니다. 수백 개의 프레임 워크 규칙을 부풀리기보다는 CSS 몇 줄로 직접 작성할 수 있습니다.

특히 ‘그리드 레이아웃’은 프레젠테이션을 마크 업에 혼합하던 과거로 거슬러 올라갑니다. ‘div class = “span-24″‘는 표보다 낫지 않습니다. 다시 들어가서 레이아웃에 영향을 미치려면 마크 업을 변경해야합니다. 그리고 제가 본 모든 프레임 워크는 고정 픽셀 플로팅 상자를 기반으로하므로 다양한 창 크기에서 액세스 할 수있는 유동적 인 레이아웃을 만들 수 없습니다.

CSS 규칙을 작성하기에는 너무 무서워하는 사람에게만 사용하는 역방향 저작입니다.

답변

따라서 아직이 질문에 아무도 응답하지 않았습니다 (몇 번의 찬성 투표를 보긴했지만). 나는 적어도이 프롬프트에서 두 번째 질문을 다루려고 시도 할 것입니다.

CSS 프레임 워크는 훌륭합니다. 다른 프레임 워크와 마찬가지로 개발 시간을 단축하고 사이트 별 디자인 및 CSS 작업을 즉시 시작할 수 있습니다. 그들은 어려운 결정에 대해 생각하므로 당신이 할 필요가 없습니다.

안타깝게도 프레임 워크 사용에는 일반적으로 두 가지 단점이 있습니다.

  1. 프레임 워크는 CSS 코드의 전체 구조와 메커니즘을 결정합니다. 이제 저는 CSS 재설정에 대해 말하는 것이 아닙니다 (이것들은 그 자체로는 유용하지만 진정한 프레임 워크는 아닙니다). 저는 정직하고 좋은 프레임 워크에 대해 이야기하고 있습니다.이 프레임 워크는 문서에서 사용할 의미 태그 등을 이미 결정했습니다. 따라서 프레임 워크에 의존하게되며 버그가있을 때 프레임 워크에서는 가장 일반적으로 직접 수정해야합니다.

  2. 프레임 워크는 브라우저 간 / 고급 CSS 문제를 인식하지 못하는 이유가 아닙니다. PHP 또는 JavaScript 프레임 워크로 작업하는 것처럼 변함없이 실행됩니다. 그리고 그들을 다루는 방법을 알아야합니다. 다른 사람의 프레임 워크를 사용하기 전에 먼저 자신의 프레임 워크를 작성해야한다는 공통된 말이 있습니다.

블루 프린트를 잠깐 살펴보면 실제로 프레임 워크라고 부르지는 않겠습니다. 상단에 몇 가지 추가 기능이있는 재설정 일 수 있습니다.

답변

BluePrint와 다른 몇 가지를 살펴 봤고 제가 권장하는 유일한 CSS ‘프레임 워크’는 YUI Grids입니다.

장점 :

  • 최고의 프론트 엔드 엔지니어 중 한 명 (IMO) 작성 (Nate Koechley)
  • 매우 작은. 4KB
  • 매우 유연함 (1000 가지 다른 레이아웃)
  • 유동 너비 (100 %) 레이아웃은 물론 750px, 950px 및 974px의 사전 설정된 고정 너비 레이아웃과 원하는 수로 쉽게 사용자 지정할 수있는 기능을 지원합니다.
  • 고정 너비 레이아웃의 너비를 쉽게 사용자 지정할 수 있습니다.
  • 템플릿 열은 소스 순서와 무관하므로 접근성 향상 및 검색 엔진 최적화 (SEO)를 위해 가장 중요한 콘텐츠를 마크 업 레이어에 먼저 배치 할 수 있습니다.
  • 바닥 글 자체 삭제. 더 긴 열에 관계없이 바닥 글은 맨 아래에 유지됩니다.
  • 100 % 미만의 레이아웃은 자동으로 중앙에 배치됩니다.
  • 다소 의미 론적 클래스 이름 (상단, 왼쪽, 오른쪽 등보다 우수)

단점 :

  • 손으로 작성한 HTML 및 CSS에 비해 많은 추가 마크 업
  • 복잡한 레이아웃을 수행하는 방법을 알아 내기 위해 약간의 학습이 필요합니다.

다른 사람들이 게시했듯이 CSS에 대한 실제 ‘프레임 워크’는 없습니다. 스타일 시트 재설정 은 레이아웃에도 많은 도움이됩니다. 나는 보통 재설정 스타일 시트를 고수하고 거기에서 이동합니다. 그러나 CSS 경험이 많지 않다면 YUI Grids로 시간을 절약 할 수 있습니다.

답변

Compass 는 템플릿 (YUI 및 청사진 모두)뿐만 아니라 재사용 가능한 구조와 더 높은 수준의 선언을 제공하는 동시에 익숙한 CSS 구문을 제공한다는 점에서 실제 CSS 프레임 워크입니다.

답변

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로 확장하는 기본 요소의 집합으로 생각한다면 그것은 정의상 프레임 워크입니다.