최고의 CSS 프레임 워크는 무엇이며 그만한 가치가 있습니까?
다른 포럼에서 읽기 저는 CSS 프레임 워크의 세계를 접했습니다. 제가 특별히 본 것은 BluePrint 입니다. 다른 사람이 CSS 프레임 워크를 접한 적이 있는지 궁금합니다. 어떤 것이 가장 좋은지 그리고 노력할만한 가치가 있는지 제안합니까?
CSS '프레임 워크'는 요점을 완전히 놓치고 있습니다.
CSS는 기본 라이브러리 / 프레임 워크를 포함시킨 다음 더 높은 수준의 작업을 수행하기 위해 여기에서 함수와 객체를 호출 할 수있는 JavaScript와 많은 작업을 수행합니다. CSS 프레임 워크가 제공 할 수있는 모든 결정적 규칙입니다. 일부 기본 브라우저 규칙을 사용 항목, 페이지를 작성해야하는 클래스 스타일, 'float'및 'clear'사용하는 레이아웃 규칙입니다. 여러 개의 프레임 워크 규칙을 부풀리기보다는 CSS 몇 줄로 직접 수 있습니다.
특히 '그리드 레이아웃'은 프레젠테이션을 마크 업에 혼합하던 과거로 거슬러 올라갑니다. 'div class = "span-24"는 표보다 낫지입니다. 다시 돌아가서 레이아웃에 영향을 미치려면 마크 업을 변경해야합니다. 그리고 내가 본 모든 프레임 워크는 고정 픽셀 플로팅 상자를 기반으로 다양한 창 크기에서 액세스 할 수있는 유동적 인 레이아웃을 만들 수 없습니다.
CSS 규칙을 작성하기에는 너무 무서워하는 사람에게만 사용하는 역방향 저작입니다.
투표에 응답하지 않는 응답하지 않습니다 (몇 가지 찬성 투표를 투표지만). 나는 심판이 프롬프트에서 두 번째 질문을 다루려고 시도 할 것입니다.
CSS 프레임 워크는 훌륭합니다. 다른 프레임 워크와 디자인 개발 시간을 단축하고 사이트 및 CSS 작업을 즉시 시작할 수 있습니다. 그들이 생각하기에 어려운 결정에 대해 생각하지 않습니다.
안타깝게도 프레임 워크는 일반적으로 두 가지 문제가 있습니다.
워크는 CSS 코드의 전체 구조와 숫자를 나타냅니다. 이제 저는 CSS 성능에 대해 이야기하는 것이 아닙니다 (이는 그 자체로 유용하지만 진정한 프레임 워크는 아닙니다). 저는 정직하고 좋은 프레임 워크에 대해 이야기하고 있습니다.이 프레임 워크는 문서에서 사용할 의미 태그 등을 이미 결정했습니다. 따라서 프레임 워크에 의존하고 버그가있을 때 프레임에서 가장 일반적으로 직접 수정해야합니다.
프레임 워크는 브라우저 간 / 고급 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로 확장하는 기본 요소의 집합으로 생각한다면 그것은 정의상 프레임 워크입니다.
저는 실제로 지난 24 시간 동안이 문제를 직접 조사하는 데 많은 시간을 보냈습니다. 내 결론은 멋진 재설정 (나는 YUI 재설정을 사용함 )과 기본 항목을 설정하기위한 다른 무언가 ( 내 경우에는 YUI 글꼴 이 가치가 있었으며 BluePrint의 "추가 기능"이 귀하의 것이 될 수 있음)가 좋은 생각이라는 것입니다. 그러나 일반적으로 YUI 그리드 와 같은 "프레임 워크" 는 너무 제한적이어서 클래스 이름, ID 등을 사용해야하며 수제 CSS처럼 사이트에 거의 적합하지 않습니다.
간단히 말해서 재설정은 꽤 멋져 보입니다. 목록에 대한 margin-vs-padding, 단락 간격 등의 모든 변형을 제거하는 것이 좋습니다. 그러나 그것은 내가 받아들이는 한입니다.
나는 그것을 사용하지 않았다. 그러나 나는 emastic 이 체크 가치가있는 좋은 대안 이라고 생각한다 . 범위의 청사진과 비슷하지만 탄력적 인 레이아웃 (따라서 이름)도 지원하며 px, em 또는 %로 값을 지정하고 혼합 할 수도 있습니다.
나침반은 대단하다고 생각합니다. 스크린 캐스트가 표시되는지 확인합니다 .
저는 몇 개의 웹 사이트에 960.gs 를 사용 하고 있으며 매우 간단하고 쉽고 노력할만한 가치가 있습니다. 레이아웃 작업을 많이 줄여줍니다. 고정 너비 960 픽셀로 사라지는 사용자 지정 CSS 생성기를 확인하십시오.
Site Point CEO Kevin Yank 의이 비디오 프레젠테이션이 귀하의 질문에 대한 답이 될 것이라고 생각합니다 . 나는 그것을 보는 것을 정말로 추천합니다.
Compass를 사용하면 프레임 워크의 클래스와 ID를 고유 한 의미 이름으로 이름을 바꿀 수 있으므로 확인하고 싶을 수 있습니다. 또한 믹스 인과 같은 평범한 CSS로는 얻을 수없는 것들에 대한 액세스를 제공합니다.
나는이 도구들을 실제로 파고 들지 않고 사용하지 않고 비판하는 이른바 "CSS 전문가"에 놀랐다. 필수입니까? 아니요. 자신의 프레임 워크가 마음에 든다면 (자신 만의 프레임 워크가 있습니다. 그렇죠? CSS 프레임 워크는 신중하게 정의 된 라이브러리 일뿐입니다. 모든 사람이 하나를 사용해야 함) 반드시 계속 사용하십시오. 아무도 당신에게 다른 프레임 워크를 사용하도록 강요하지 않으며 프레임 워크를 사용하는 사람들이 CSS 순수 주의자들에게 그들이 "잘못하고있다"고 말하는 것을 보지 않습니다.
그러한 관점에서 프레임 워크를 비판하는 것은 무지뿐 아니라 불안정 함을 드러 낼뿐입니다. 예를 들어, 사람이 CSS를 몰라도 Compass와 같은 도구를 사용할 것이라는 생각은 웃을 수 있습니다. 프레임 워크가 일반적으로 모든 CSS를 작성하지 않는다는 것을 알고 있습니까? 여전히 대부분의 프레임 워크 컨텍스트 내에서 자체 CSS를 분리하고 작성할 수 있습니다. 사실, CSS를 모른다면 금방 좌절 할 수 있습니다.
나 자신을 위해 프레임 워크가 이미 문서화되어 있고 수백 명의 다른 사용자가 테스트했으며 Compass를 통해 자체 클래스와 ID를 적용 할 수 있기 때문에 감사합니다. 프레임 워크가 적합하지 않은 것이 필요하면 직접 코딩하겠습니다.
AppFuse 명성의 Matt Raible은 AppFuse 용 CSS 프레임 워크를 개발하기 위해 CSS 프레임 워크 콘테스트를 개최했습니다. 결과는 여기 에 게시 됩니다 . 몇 가지 변형이 있으며 AppFuse를 사용하고 매우 좋은 것을 발견했기 때문에 일부를 직접 사용했습니다.
이러한 CSS 프레임 워크는 테마 응용 프로그램에서 사용되기 때문에 잘 작동한다는 점을 추가해야합니다. 즉, 규칙을 고수하면 속성 파일에서 하나의 값을 변경하는 것만 큼 간단합니다.
저는 BluePrint를 사이트에서 성공적으로 사용했습니다 (여기에서 사이트를 언급 할 수는 있지만 게시물이 스팸으로 표시 될 것이라고 확신합니다!). 나는 CSS의 아이디어 중 하나가 레이아웃 로직을 하드 코딩하지 않았다고 생각했기 때문에 앞으로 그것을 사용할지 확실하지 않습니다. 레이아웃을 정의하기 위해 span-24 및 span-12라는 CSS 요소가 없어야하지만 searchBox 및 mainContent와 같은 것입니다. 적어도 그것이 내가 보는 방식입니다.
내가 찾은 좋은 링크 : 상위 12 가지 CSS 프레임 워크 및이를 이해하는 방법
다음은 CSS 프레임 워크에 대한 블로그 게시물입니다. 언제 CSS 프레임 워크를 사용합니까?
내가 아는 유일한 방법은 CSS 프레임 워크를 사용하고 시맨틱 마크 업을 유지하는 방법은 더 높은 수준의 추상화를 사용하는 것입니다. 현재로서는 Compass가 사용하기에 충분히 성숙하다는 것을 알고있는 유일한 제품이지만 Nicole Sullivan은 "Object-Oriented CSS"프로젝트에서 흥미로운 작업을하고있는 것 같습니다.
나는 Compass의 Sass 믹스 인의 영리한 사용이 훌륭하고 유지 가능한 의미 마크 업의 성배를 향한 큰 발걸음을 내딛었습니다. 프레젠테이션 클래스를 마크 업에서 제외하기 위해 Compass와 같은 추상화없이 Blueprint 또는 YUI와 같은 프레임 워크를 사용하고 싶지는 않습니다.
BTW, Elastic이라는 멋진 CSS 프레임 워크가 있습니다.이 프레임 워크는 Compass에 추가하는 것을 고려하고있을 정도로보기 좋습니다.
CSS는 단순성에 관한 것입니다. 목표는 HTML과 스타일 시트를 참조 할 때 한두 곳을 확인하는 것입니다. 더 많은 행, 특히 작성하지 않았고 익숙하지 않은 행을 추가하면 복잡성이 기하 급수적으로 증가하여 CSS 코드의 변동성이 증가합니다.
레이아웃을 작성하고 그로부터 일반적인 템플릿 시스템을 개발할 때 레이아웃을 제안합니다. 저는 CSS를 좀 더 모듈 식으로 만드는 것을 좋아하지만, 종종 디자인에 따라 CSS가 매우 경우에 따라 다르며 전혀 모듈식이 아닐 수 있습니다.
저는 몇 개의 일회성 사이트에서 Blueprint를 사용했으며 주로 브라우저 간 테스트에서 시간을 확실히 절약했습니다.
밝은면에서는 읽을 수 있지만 마크 업에 프레젠테이션 코드를 추가하는 것은 확실히 짜증납니다. 저는 "마크 업을 건드리지 않고 재 설계 할 수 있습니다"라는 개념을 좋아하지만, 이런 일이 실제로 일어나지 않을 사이트를 제작하는 경우 어제 완료해야한다면 Blueprint를 살펴 보겠습니다.
또한 어떤 유형의 레이아웃을 만들 수 있는지에 대한 장단점이 있습니다. 처음부터 엄격한 그리드에서 사이트를 와이어 프레임하면 최소한의 번거 로움으로 프레임 워크로 전치하는 것이 훨씬 쉽습니다.
BluePrint와 YUI를 사용했지만 ID와 클래스에 부여한 이름 중 일부에 항상 답답합니다.
각각 자신에게,하지만 저는 처음부터 작업하는 것을 선호하지만 잠시 후에 이전 작업을 사용하여 새 프로젝트에 적용하고 웹 사이트를 원하는 방식으로 보이도록 조정하는 프로세스를 개발합니다. 좋아합니다.
다른 사람이 CSS를 편집하기 위해 오는 경우를 대비하여 좋은 명명 규칙을 사용해야합니다. 그러면 각 스타일 이름이 무엇을 가리키는 지 알 수 있습니다.
크레이그,
Compass는 여러분이 찾고있는 것입니다. "span-24"와 같은 블루 프린트 CSS 클래스의 이름을 자신의 이름으로 바꿀 수 있습니다. 또한 변수 및 믹스 인으로 CSS 기능을 확장합니다. 사실, Compass를 확인하지 않고 프레임 워크를 조기에 판단하는 사람들은 "요점을 놓치고 있습니다". 레이아웃에 HTML 테이블 대신 CSS를 사용하여 요점을 놓치고 있다고 몇 년 전에 말했던 사람들과 비슷합니다.
-매트
http://www.ez-css.org/를 확인 하세요 . 작업하기 가장 쉽고 가벼운 CSS 프레임 워크 중 하나입니다. :)
이 데모를보십시오 : http://www.richstyle.org/demo-web.php 이 프레임 워크는 "HTML 태그로 충분해야한다"는 생각을 기반으로합니다. 재사용 성은 웹 프레임 워크를 포함한 소프트웨어 구성 요소를 선택하는 가장 중요한 요소라고 생각합니다. 웹 프레임 워크 개발자의 경우 표준에 더 많이 투입할수록 재사용 가능성이 더 많이 보장됩니다.
'IT' 카테고리의 다른 글
| AngularJS ng-repeat에서 반복되는 요소의 계산 (0) | 2020.08.09 |
|---|---|
| params [: something]에서 필드를 제거하는 방법 (0) | 2020.08.09 |
| UITextField 자동 대문자 화 유형 -iPhone 앱 (0) | 2020.08.09 |
| 두 버킷 보관 AWS S3 복사 파일 및 폴더 (0) | 2020.08.09 |
| 기본 터미널을 터미네이터로 설정 비용 지불? (0) | 2020.08.09 |