Qual é o melhor CSS Framework e vale a pena o esforço?

Lendo em outro fórum, encontrei o mundo dos CSS Frameworks. O que estou examinando especificamente é o BluePrint . Gostaria de saber se mais alguém encontrou frameworks CSS, sugere qual é o melhor e se vale a pena o esforço?

As 'estruturas' CSS estão perdendo completamente o ponto.

CSS não é como JavaScript, onde você pode incluir uma biblioteca / estrutura base e, em seguida, chamar funções e objetos a partir dela para fazer um trabalho de nível superior. Tudo o que uma estrutura CSS pode oferecer são regras declarativas: algumas coisas de redefinição de regra do navegador padrão, alguns estilos de classe a serem forçados a criar sua página e regras de layout usando 'float' e 'clear'. Você mesmo pode escrever isso em algumas linhas de CSS, em vez de usar o inchaço de uma centena de regras do framework.

O 'layout de grade' em particular remonta aos velhos tempos de misturar sua apresentação em sua marcação. 'div class = "span-24"' não é melhor do que uma mesa, você terá que voltar lá e alterar a marcação para afetar o layout. E todos os frameworks que eu vi são baseados em caixas flutuantes de pixel fixo, tornando impossível criar um layout líquido acessível em uma ampla gama de tamanhos de janela.

É uma autoria reversa, útil apenas para alguém com muito medo de escrever uma regra CSS.

Então, ninguém respondeu a esta pergunta ainda (embora eu tenha visto alguns votos positivos), então Vou pelo menos tentar resolver a segunda questão neste prompt.

Frameworks CSS são ótimos; como qualquer outra estrutura, eles reduzem o tempo de desenvolvimento e permitem que você comece a trabalhar imediatamente no design específico do site e CSS. Eles pensam sobre decisões difíceis para que você não precise fazer isso.

Infelizmente, existem duas desvantagens em usar uma estrutura (em geral):

1. A estrutura dita a estrutura geral e a mecânica de seu código CSS. Agora, não estou falando sobre uma redefinição de CSS (eles são úteis por si só, mas não são estruturas verdadeiras); Estou falando de um framework honesto a bom, que já tomou as decisões sobre quais tags semânticas você usará em seu documento, etc. Como tal, você se torna dependente do framework e quando há um bug na estrutura, normalmente você terá que corrigi-lo sozinho.

2. Frameworks não são uma desculpa para ignorar os problemas de cross-browser / CSS avançado. Você invariavelmente os encontrará, assim como faria ao trabalhar com uma estrutura PHP ou JavaScript. E você precisa saber como lidar com eles. Existe um ditado comum que você deve escrever seu próprio framework primeiro, antes de usar o de outra pessoa.

Dando uma olhada rápida no Blueprint, eu realmente não o chamaria de framework; talvez uma redefinição com alguns itens extras no topo.

Eu olhei para BluePrint e alguns outros e a única 'estrutura' CSS que eu recomendo é YUI Grids

Prós:

• Escrito por um dos melhores engenheiros de front-end (IMO) (Nate Koechley)
• Muito pequeno. 4 KB
• Muito flexível (1000 layouts diferentes)
• Suporta layouts de largura de fluido (100%), bem como layouts de largura fixa predefinida em 750px, 950px e 974px, e a capacidade de personalizar facilmente para qualquer número.
• Suporta fácil personalização da largura para layouts de largura fixa.
• As colunas de modelo são independentes da ordem de origem, portanto, você pode colocar seu conteúdo mais importante primeiro na camada de marcação para melhorar a acessibilidade e a otimização do mecanismo de pesquisa (SEO).
• Rodapé de autolimpeza. Não importa qual coluna seja mais longa, o rodapé permanece na parte inferior.
• Layouts menores que 100% são centralizados automaticamente.
• Nomes de classe um tanto semânticos (melhor do que top, left, right, etc)

Contras:

• Muita marcação extra em comparação com HTML e CSS escritos à mão
• Requer algum aprendizado para descobrir como fazer layouts complexos

Como outros postaram, não existem 'frameworks' reais para CSS. Redefinir folhas de estilo também ajuda muito com o layout. Eu geralmente fico com uma folha de estilo de redefinição e começo a partir daí. Mas se você não tem muita experiência em CSS, o YUI Grids pode economizar algum tempo.

Compass é uma estrutura CSS real no sentido de que fornece não apenas modelos (YUI e blueprint), mas também construções reutilizáveis ​​e declarações de nível superior, ao mesmo tempo que fornece a sintaxe CSS familiar.

Reserve um tempo para estudar e entender (realmente entenda!) Alguns frameworks css como BluePrint e YUI, e redefinições css como Eric Meyer. Em seguida, reserve um tempo para montar sua própria redefinição e / ou estrutura com base em seus métodos de trabalho e no tipo de sites que você construiu.

Pessoalmente, eu uso a maior parte da redefinição de Eric Meyer com algumas classes e redefinições minhas, além de algumas idéias do BluePrint e YUI.

Recentemente assisti Eric Meyer fazer uma apresentação sobre CSS Frameworks na qual ele fez a pergunta: "então, qual é o certo para mim?" Ele então respondeu à pergunta mostrando um slide em branco. O que ele quis dizer é que certamente existem alguns conceitos úteis incorporados à maioria das redefinições e estruturas, mas aquele que mais se adequa a você é aquele que você mesmo escreve (vale o esforço).

Por que usar 'frameworks' de CSS?

• Se você está pressionado pelo tempo.

• Se você não conhece css, e não conhece alguém que possa escrevê-lo para você.

• Se você não se preocupa muito com os padrões, etc.

Eu conheço programadores que ficaram muito felizes em usar o blueprint ou 960, pois permite que eles montem um layout por conta própria, sem recorrer a um desenvolvedor front-end. Isso é ideal para projetos pessoais ou startups com recursos limitados.

Se você já tem um conhecimento decente de CSS, então provavelmente você já tem uma biblioteca decente de layouts de estoque, então você claramente não precisará de um framework.

No entanto, se você é um iniciante e precisa apenas de algo instalado e funcionando, você pode recorrer a uma estrutura, pois torna o layout básico muito mais simples e também aborda a compatibilidade do navegador.

Dito tudo isso, muitos frameworks prontos para uso fazem uso de alguns nomes de classes horríveis, etc. Eu conheço alguns sites que pegaram um framework como ponto de partida e, em seguida, o personalizaram com suas próprias tags de classe e id. Mas claramente há um pouco de trabalho envolvido nessa reescrita também. Usar algo como o Compass, como mencionado acima, ajuda a contornar isso.

Portanto, frameworks CSS - eles podem economizar seu tempo, ao custo da semântica. Eles também podem prejudicar seu conhecimento de CSS, mas isso depende mais do quanto você investe no aprendizado do assunto em geral. Se você vai usá-los, depende de você.

Você teria que se perguntar até que ponto as estruturas disponíveis são eficazes para resolver seus problemas. Eles atendem aos seus requisitos?

Usando uma estrutura, você pode definir algumas regras ou detalhes no nível do pixel e dedicar o resto do seu tempo à implementação e produção. É um grande aumento de produtividade. Se você está gastando tempo ajustando coisas alguns pixels no final do projeto (microgerenciando o design), é um sinal de que uma estrutura pode ser útil.

Dica # 17 em The Pragmatic Programmer diz: "Programe próximo ao domínio do problema". Usar uma camada de abstração pode aproximá-lo da solução dos problemas reais de layout. Por exemplo: você pode ser capaz de se concentrar em aprimorar a experiência do usuário com o tempo extra de que dispõe, em vez de pequenos ajustes de pixels.

Isso não quer dizer que você deva sacrificar a qualidade pela quantidade. É uma questão de eficiência.

Em um projeto recente, fiz meu próprio framework porque tínhamos recursos muito limitados e os frameworks populares não faziam o que eu queria. Em seguida, configurei os PSDs da equipe de design para se encaixarem na mesma grade que implantei.

Uma estrutura não precisa ser nenhuma implementação particular de CSS. Não precisa ser algo inchado que você baixou da internet ou algo implementando ideias desatualizadas. É apenas uma técnica para realizar um trabalho. Eu não ficaria surpreso se alguns programadores já tivessem seus próprios frameworks e nem soubessem disso. Na verdade, se você considerar o DOM como um conjunto de elementos padrão que você estende com CSS, isso é uma estrutura por definição.

Na verdade, passei boa parte das últimas 24 horas investigando isso sozinho, heh. Minha conclusão foi que uma boa reinicialização (usei YUI Reset ) e talvez algo mais para definir a linha de base ( fontes YUI valeram a pena no meu caso; talvez os "extras" do BluePrint estariam no seu) é uma boa ideia. Mas, um "framework" --- que geralmente é algo como grades YUI --- é muito restritivo, forçando você a usar seus nomes de classe, ids, etc. e raramente se encaixando em seu site como o CSS feito à mão faria.

Resumindo: as reinicializações parecem muito boas; é bom eliminar toda a variação, por exemplo, de preenchimento de margem vs para listas, ou espaçamento de parágrafo, ou qualquer outra coisa. Mas isso é o mais longe que eu levaria.

Não usei sim, mas acho que emastic pode ser uma boa alternativa que vale a pena conferir. é semelhante ao blueprint no escopo, mas também suporta layouts elásticos (daí o nome) e você pode especificar valores em px, em ou% e até mesmo misturá-los.

Bússola eu acho incrível. Certifique-se de ver o screencast .

Estou usando 960.gs para alguns sites e acho que é muito simples e fácil e vale o esforço. Me poupa muito trabalho no layout. Certifique-se de verificar o gerador de CSS personalizado que sai com a largura fixa de 960 pixels.

Acho que esta apresentação em vídeo do CEO da Site Point, Kevin Yank, responderá à sua pergunta. Eu realmente recomendo assistir.

O Compass permite renomear as classes e ids do seu framework com seus próprios nomes semânticos, então você pode querer dar uma olhada. Ele também fornece acesso a coisas que você simplesmente não obtém com CSS simples, como mixins.

Estou surpreso com os chamados "especialistas em CSS" que criticam essas ferramentas sem realmente ter pesquisado e usado. Eles são essenciais? Não. Se você gosta da sua própria estrutura (você tem uma, certo? Uma estrutura CSS é apenas uma biblioteca cuidadosamente definida - todos deveriam estar usando uma), então continue usando-a. Ninguém está forçando você a usar outras estruturas e não vejo pessoas usando estruturas dizendo aos puristas CSS que estão "fazendo errado".

Criticar os frameworks de tal ponto de vista apenas revela uma insegurança, assim como uma ignorância. Por exemplo, é risível pensar que uma pessoa usaria uma ferramenta como o Compass sem conhecer CSS. Você percebe, certo, que um framework geralmente não escreve todo o CSS para você? Você ainda pode criar seu próprio CSS dentro do contexto da maioria dos frameworks. Na verdade, se você não conhece CSS, pode se frustrar rapidamente.

Para mim, agradeço ter um framework porque ele já está documentado, testado por centenas de outros usuários, e posso aplicar minhas próprias classes e ids via Compass. Se eu precisar de algo para o qual a estrutura não é adequada, irei codificar o meu próprio.

Matt Raible, do famoso AppFuse, teve um concurso de CSS Framework há um tempo para desenvolver CSS Frameworks para AppFuse. Os resultados são publicados aqui . Existem algumas variações e eu mesmo usei algumas porque uso o AppFuse e as considero muito boas.

Devo acrescentar que esses frameworks CSS funcionam bem porque são usados ​​em aplicativos temáticos. Ou seja, se você seguir as regras, alternar de um para o outro será tão simples quanto alterar um valor em um arquivo de propriedades.

Usei o BluePrint com muito sucesso em um site (poderia mencionar o site aqui, mas tenho certeza que a postagem seria marcada como spam!). Não tenho certeza se vou usá-lo no futuro porque uma das ideias do CSS que pensei era não ter a lógica de layout codificada. Você não deve ter elementos css chamados span-24 e span-12 para definir o layout, mas algo como searchBox e mainContent. Pelo menos é assim que eu vejo.

Bom link que encontrei: 12 principais frameworks CSS e como entendê-los

Aqui está o meu post sobre CSS Frameworks Quando usar CSS Framework?

A única maneira que conheço de usar uma estrutura CSS e reter a marcação semântica é usar uma abstração de nível superior. No momento, Compass é o único que estou ciente que é maduro o suficiente para ser usado, mas Nicole Sullivan parece estar fazendo algumas coisas interessantes com seu projeto "CSS Orientado a Objetos".

Acho que o uso inteligente dos mixins Sass do Compass é brilhante e um grande passo em direção ao Santo Graal da marcação semântica sustentável. Não acho que gostaria de usar uma estrutura como Blueprint ou YUI sem uma abstração como Compass para manter as classes de apresentação fora da marcação.

BTW, existe uma estrutura CSS de boa aparência chamada Elastic que parece boa o suficiente para que eu esteja pensando em adicioná-la ao Compass.

Eu acredito que CSS é simplicidade. O objetivo é ter um ou dois lugares para verificar quando você está fazendo referência entre o HTML e sua folha de estilo. Adicionar mais linhas, especialmente linhas que você não escreveu e provavelmente não está familiarizado, aumentará exponencialmente a complexidade e, portanto, a volatilidade do código CSS.

Eu sugeriria seus layouts conforme você os escreve e desenvolve um sistema de modelo genérico a partir disso. Embora eu adore tornar o CSS mais modular, muitas vezes e dependendo do design, seu CSS pode ser muito específico para cada caso e não ser modular.

Usei o Blueprint em alguns sites únicos e ele definitivamente economizou tempo, principalmente em testes entre navegadores.

Definitivamente, é uma pena adicionar código de apresentação à sua marcação, embora pelo lado positivo seja legível. Embora eu ame o conceito de "você pode redesenhar sem tocar na marcação", se você está produzindo um site onde isso realmente não vai acontecer de qualquer maneira e você só precisa fazer isso ontem, Blueprint é algo para se olhar.

No entanto, também existem compensações nos tipos de layouts que ele pode criar. Se você criar um wireframe do site desde o início em uma grade estrita, será muito mais fácil transpor para a estrutura com um mínimo de confusão.

Eu usei o BluePrint e o YUI, mas sempre fico frustrado com alguns dos nomes que eles dão a seus id e classes.

Cada um no seu, mas eu prefiro fazer as coisas do zero, mas depois de um tempo você desenvolve um processo no qual usará seu trabalho anterior e o aplicará a novos projetos e apenas fará alguns ajustes para deixar o site da maneira que você gostaria gosto disso.

Certifique-se de usar uma boa convenção de nomenclatura, apenas no caso de alguém vir para editar o css, então eles terão uma boa ideia a que cada nome de estilo está se referindo.

Craig,

Compass é o que você está procurando: ele permite que você renomeie suas classes CSS do Blueprint como "span-24" com seus próprios nomes. Ele também expande a funcionalidade CSS com variáveis ​​e mixins. Na verdade, aqueles que julgam estruturas prematuramente sem ter verificado o Compass estão "perdendo o ponto". É como aquelas pessoas que nos disseram anos atrás que estamos perdendo o ponto ao usar CSS em vez de tabelas HTML para nossos layouts.

-Matt

verifique http://www.ez-css.org/ . um dos frameworks css mais fáceis e leves para trabalhar. :)

Dê uma olhada neste demo: http://www.richstyle.org/demo-web.php Este framework é baseado na ideia de que "tags HTML devem ser suficientes". Acho que a reutilização é o fator mais importante para escolher um componente de software, incluindo uma estrutura da web. Para desenvolvedores de frameworks web, quanto mais você se compromete com os padrões, mais você garante a reutilização.