최고의 CSS 프레임 워크는 무엇이며 노력할 가치가 있습니까?

https://stackoverflow.com/questions/203069

03-07-2019
|

문제

다른 포럼에서 읽는 것은 CSS 프레임 워크의 세계를 만났습니다. 내가 구체적으로보고있는 것은입니다 청사진. 다른 사람이 CSS 프레임 워크를 발견했는지 궁금합니다. 어느 쪽이 최고인지, 그들이 노력할 가치가 있는지 제안합니까?

해결책

CSS의 프레임 워크는 포인트가 완전히 누락되었습니다.

CSS는 JavaScript와 같지 않습니다. 여기서 기본 라이브러리/프레임 워크를 포함한 다음 호출 기능 및 객체를 포함하여 더 높은 수준의 작업을 수행 할 수 있습니다. 모든 CSS 프레임 워크가 제공 할 수있는 모든 CSS 프레임 워크는 선언적 규칙입니다. 일부 기본 브라우저-룰 리셋, 일부 클래스 스타일은 페이지를 작성해야하며 'float'및 'Clear'를 사용하여 레이아웃 규칙을 강요합니다. 백 프레임 워크 규칙의 부풀어 오르는 대신 몇 줄의 CSS에 직접 쓸 수 있습니다.

특히 '그리드 레이아웃'물건은 프레젠테이션을 마크 업에 섞는 나쁜 옛날로 돌아갑니다. 'div class = "Span-24"'는 테이블보다 낫지 않으므로 레이아웃에 영향을 미치려면 마크 업을 변경해야합니다. 그리고 내가 본 모든 프레임 워크는 고정 픽셀 플로팅 상자를 기반으로하므로 광범위한 창 크기로 액세스 할 수있는 액체 레이아웃을 만들 수 없습니다.

CSS 규칙을 작성하기에는 너무 무서워하는 사람에게만 사용되는 것은 후진 저작입니다.

다른 팁

~~그래서 아무도이 질문에 아직 응답하지 않았습니다 (몇 가지 upvotes를 보았지만)~~ 나는이 프롬프트에서 두 번째 질문을 적어도 해결하려고 노력할 것입니다.

CSS 프레임 워크는 훌륭합니다. 다른 프레임 워크와 마찬가지로 개발 시간을 줄이고 현장 별 설계 및 CSS에서 즉시 작업 할 수 있습니다. 그들은 어려운 결정에 대해 생각해서 필요하지 않습니다.

불행히도 프레임 워크 사용에는 두 가지 단점이 있습니다 (일반적으로).

프레임 워크는 CSS 코드의 전체 구조 및 역학을 지시합니다. 이제 저는 CSS 재설정에 대해 이야기하지 않습니다 (이들은 그 자체로 유용하지만 진정한 프레임 워크는 아닙니다). 나는 정직한 프레임 워크에 대해 이야기하고 있습니다. 그것은 당신이 당신의 문서에서 어떤 의미 론적 태그를 사용할 것인지에 대한 결정을 내렸다. 따라서, 당신은 프레임 워크에 의존하고 버그가있을 때. 프레임 워크에서 가장 일반적으로 직접 해결해야합니다.
프레임 워크는 크로스 브라우저/고급 CSS 문제를 잊어 버린 것에 대한 변명이 아닙니다. PHP 또는 JavaScript 프레임 워크와 함께 작업하는 것처럼 항상 그들에게 실행됩니다. 그리고 당신은 그들을 다루는 방법을 알아야합니다. 다른 사람을 사용하기 전에 먼저 자신의 프레임 워크를 작성해야한다는 일반적인 말이 있습니다.

Blueprint를 빨리 들여다 보면서 나는 그것을 프레임 워크라고 부르지 않을 것입니다. 어쩌면 몇 가지 여분의 케이크가 위에있는 재설정 일 수도 있습니다.

나는 Blueprint와 몇몇 다른 사람들과 유일한 CSS의 프레임 워크를 보았습니다. 유위 그리드

장점 :

최고의 프론트 엔드 엔지니어 중 한 명 (IMO) (Nate Koechley)
매우 작은. 4KB
매우 유연한 (1000 개의 다른 레이아웃)
750px, 950px 및 974px에서 유체 폭 (100%) 레이아웃과 사전 설정된 고정형 레이아웃 및 모든 숫자에 쉽게 사용자 정의 할 수있는 기능을 지원합니다.
고정 폭 레이아웃의 폭을 쉽게 사용자 정의 할 수 있습니다.
템플릿 열은 소스 주문 독립적이므로 가장 중요한 컨텐츠를 Markup 레이어에 먼저 배치하여 접근성 및 검색 엔진 최적화 (SEO)를 향상시킬 수 있습니다.
자가 반응 바닥 글. 어떤 열이 더 길든 바닥에 바닥 글이 바닥에 남아 있습니다.
100% 미만의 레이아웃이 자동으로 중앙에 있습니다.
다소 시맨틱 클래스 이름 (상단, 왼쪽, 오른쪽 등보다 낫다)

단점 :

손으로 쓴 HTML 및 CSS에 비해 추가 마크 업
복잡한 레이아웃을 수행하는 방법을 알아 내기 위해 학습을 취합니다.

다른 사람이 게시 한 것처럼 CSS에 대한 실제 '프레임 워크'는 없습니다. 초기화 스타일 시트는 레이아웃에도 많은 도움이됩니다. 나는 보통 재설정 스타일 시트를 고수하고 거기에서갑니다. 그러나 CSS 경험이 많지 않으면 Yui Grids는 시간을 절약 할 수 있습니다.

Compass is an actual CSS framework in the sense that it gives you not only templates (both YUI and blueprint), but also reusable constructs and higher-level declarations while still giving you familiar CSS syntax.

Take the time to study and understand (really understand!) a few css frameworks such as BluePrint and YUI, and css resets like Eric Meyer's. Then, take the time to put together your own reset and/or framework based on your work methods and the kind of sites you build.

Personally, I use most of the Eric Meyer reset with some classes and resets of my own, plus a few ideas from BluePrint and YUI.

I recently watched Eric Meyer give a presentation on CSS Frameworks in which he asked the question: "so which one is the right one for me?" He then answered the question by showing a blank slide. His point was, that there are certainly some useful concepts built into most resets and frameworks, but the one that will suit you the best is the one that you write for yourself (it's worth the effort).

Why use css 'frameworks'?

If you are pressured for time.
If you do not know css, and don't know someone who can write it for you.
If you are not overly precious about standards etc.

I know programmers who have been really happy to use blueprint or 960, as it allows them to put together a layout on their own, without turning to a front-end developer. This is ideal for personal projects, or startups with limited resources.

If you have decent knowledge of CSS already, then presumably you have a decent library of stock layouts already, so you clearly won't need a framework.

However, if you're a beginner and just need to get something up and running, then you might turn to a framework, as it makes basic layout much simpler, and tackling browser compatibility also.

Having said all that, many frameworks out of the box do make use of some horrible class names etc. I know of some websites that have taken a framework as a starting point and then customised it with their own class and id tags. But clearly there's a bit of work involved in that rewrite too. Using something like Compass, as mentioned above, does help to get around that.

So, CSS frameworks - they can save you time, at the cost of semantics. They might also hurt your knowledge of CSS, but that is more up to how much you invest in learning the subject in general. Whether you make use of them is up to you.

You'd have to ask yourself how effective the available frameworks are at solving your problems. Do they meet your requirements?

By using a framework, you can set some rules or details at the pixel level and devote the rest of your time to implementing and producing. It's a massive productivity boost. If you find yourself spending time adjusting things by a few pixels late in the project (micro managing the design), it's a sign that a framework can be useful.

Tip #17 in The Pragmatic Programmer says: "Program close to the problem domain". Using a layer of abstraction can get you closer to solving the real problems of layout. For example: you might be able to concentrate of enhancing the user experience with the extra time you have rather than minor adjustments of pixels.

This is not to say you must sacrifice quality for quantity. It's about efficiency.

On a recent project, I made my own framework because we had very limited resources and the popular frameworks didn't do what I wanted. Then, I set up the design team's PSDs to snap to the same grid I deployed.

A framework doesn't have to be any particular implementation of CSS. It doesn't have to be something bloated you downloaded from the interweb or something implementing outdated ideas. It's just a technique for getting a job done. I wouldn't be surprised if some coders already have their own frameworks and don't even know it. In fact, if you consider the DOM as a set of default elements you extend with CSS, then that's a framework by definition.

I actually spent a good portion of the last 24 hours investigating this on my own, heh. My conclusion was that a nice reset (I used YUI Reset), and maybe something else to set baseline stuff (YUI fonts was worthwhile in my case; maybe the "extra goodies" of BluePrint would be in yours) is a good idea. But, a "framework"---which is generally something like YUI grids---is too restrictive, forcing you to use their class names, ids, etc. and rarely fitting into your site like hand-made CSS would.

So in short: resets seem pretty nice; it's good to eliminate all the variation in e.g. margin-vs-padding for lists, or paragraph spacing, or whatever. But that's as far as I would take it.

i haven't used it yes, but i think emastic may be a good alternative worth a check. it it is similar to blueprint in scope, but also supports elastic layouts (hence the name) and you can specify values in px, em or %, and even mix them.

Compass I think is amazing. Make sure you see the screencast.

I am using 960.gs for a few websites and find it very simple and easy and worth the effort. Saves me a lot of work on layout. Make sure to check the custom CSS generator which goes away with the fixed width of 960 pixels.

I think that this video presentation by Site Point CEO Kevin Yank will answer your question. I really recommend to watch it.

Compass lets you rename your framework's classes and ids with your own semantic names, so you might want to check it out. It also provides access to stuff you just don't get with plain-vanilla CSS such as mixins.

I'm astounded by so-called "CSS experts" who criticize these tools without really having digged in and used them. Are they essential? No. If you like your own framework (you do have one of your own, right? A CSS framework is just a carefully defined library--everyone should be using one) then by all means, keep on using it. No one is forcing you to use other frameworks and I don't see people who are using frameworks telling CSS purists that they are "doing it wrong."

Criticizing frameworks from such a standpoint just reveals an insecurity as well as an ignorance. For example, the notion is laughable that a person would use a tool like Compass without knowing CSS. You realize, right, that a framework generally doesn't write all your CSS for you? You can still break out and write your own CSS within the context of most frameworks. In fact, if you don't know CSS you might get frustrated quickly.

For myself, I appreciate having a framework because it is already documented, tested by hundreds of other users, and I can apply my own classes and ids via Compass. If I need something that the framework isn't suitable for, then I'll code my own.

Matt Raible of AppFuse fame had a CSS Framework contest a while back to develop CSS Frameworks for AppFuse. The results are published here. There are a few variations and I have used some myself because I use AppFuse and find them very good.

I should add that these CSS Frameworks work well because they are used in themed applications. That is, if you stick to the rules then switching from one to the next is as simple as changing one value in a properties file.

I have used BluePrint with much success on a site (I could mention the site here but I am sure the post would be marked as spam!). I am not sure if I will use it in the future though because one of the ideas of CSS i thought was to not have layout logic hard coded. You shouldn't have css elements called span-24 and span-12 to define the layout but something like searchBox and mainContent. At least thats how I see it.

Good link I found : Top 12 CSS Frameworks and How to Understand Them

Here is my blog post about CSS Frameworks When to use CSS framework?

The only way I know of to use a CSS framework and retain semantic markup is to use a higher-level abstraction. At the moment, Compass is the only one I'm aware of that's mature enough to use, but Nicole Sullivan seems to be doing some interesting stuff with her "Object-Oriented CSS" project.

I find Compass' clever use of Sass mixins to be brilliant, and a big step toward the Holy Grail of maintainable semantic markup. I don't think I'd want to use a framework like Blueprint or YUI without an abstraction such as Compass to keep presentation classes out of the markup.

BTW, there's a nice-looking CSS framework called Elastic that looks good enough that I'm considering adding it to Compass.

I believe CSS is about simplicity. The goal is to have one or two places to check when you're referencing between the HTML and your stylesheet. Adding more lines, and especially lines that you did not write and are probably not that familiar with, will exponentially increase the complexity thereby volatility of the CSS code.

I would suggest your layouts as you write them and develop a generic template system from that. While I love making CSS more modular, often and depending on the design, your CSS may be very case-specific and not modular at all.

I've used Blueprint on a few one-off sites and it definitely saved time, primarily in cross-browser testing.

It definitely sucks adding presentation code to your markup, although on the bright side it's readable. While I love the concept of "you can redesign without touching the markup", if you're producing a site where that really isn't going to happen anyways and you just need it done yesterday, Blueprint is something to look at.

There are also tradeoffs in what types of layouts it can feasibly create though. If you wireframe the site from the start on a strict grid, it will be much easier to transpose into the framework with a minimum of fuss.

I have used BluePrint and YUI but I always get frustrated with some of the names they give their id and classes.

To each their own, but I prefer doing things from scratch, but after a while you develop a process in which you will use your previous work and apply it to new projects and just make some tweaks to make the web site look the way you would like it to.

Be sure to use a good naming convention, just in case someone else down the road comes in to edit the css, then they will have a good idea what each style name is referring to.

Craig,

Compass is what you're looking for: it allows you to rename your Blueprint CSS classes like "span-24" with your own names. It also expands CSS functionality with variables and mixins. Truly, those that prematurely judge frameworks without having checked out Compass are "missing the point." It's sort of like those folks who told us years ago that we are missing the point by using CSS instead of HTML tables for our layouts.

-Matt

check out http://www.ez-css.org/. one of easiest and lightest css framework to work on. :)

Take a look to this demo: http://www.richstyle.org/demo-web.php This framework is based on idea that "HTML tags should be enough". I think re-usability is the most important factor for choosing a software component, including a web framework. For web frameworks developers, the more you commit to standards, the more you guarantee re-usability.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow