Qual é a melhor CSS Framework e são eles vale o esforço?

https://stackoverflow.com/questions/203069

03-07-2019
|

Pergunta

Reading em outro já fórum me deparei com o mundo da CSS Frameworks. O que eu estive olhando especificamente é BluePrint . Fiquei me perguntando se alguém tinha vindo através de quadros CSS, sugerem que é o melhor e se eles valem a pena o esforço?

Solução

CSS 'estruturas' estão faltando completamente o ponto.

CSS não é como JavaScript, onde você pode incluir uma biblioteca de base / quadro e, em seguida, chamar funções e objetos a partir dele para fazer um trabalho de nível superior. Todos quadro a CSS pode dar é regras declarativas: algumas coisas padrão do navegador-rule-reset, alguns estilos de classe a ser forçado ao autor sua página, e regras de layout usando 'float' e 'clear'. Você pode escrever que, em algumas linhas de CSS si mesmo, em vez de puxar para o inchaço de uma centena de regras de enquadramento.

O material 'grid', em particular, remonta aos maus velhos tempos de misturar sua apresentação em sua marcação. 'Div class = 'span-24'' não melhor do que uma mesa é, você vai ter que voltar lá e mudar a marcação para afetar o layout. E todos os quadros que eu vi são baseados em torno fixa-pixel flutuou caixas, tornando impossível para criar um layout líquido acessíveis a uma ampla gama de tamanhos de janela.

É trás autoria, de uso apenas para alguém com muito medo de escrever uma regra CSS.

Outras dicas

~~Então, ninguém da respondeu a esta pergunta ainda (embora eu tenha visto algumas upvotes), então~~ eu vou pelo menos tentar resolver a segunda questão no presente imediato.

CSS Frameworks são grandes; como qualquer outro quadro, reduzem o tempo de desenvolvimento e deixá-lo começar a trabalhar imediatamente no design e CSS site-specific. Eles pensam sobre decisões difíceis para que você não precisa.

Infelizmente, há duas desvantagens de usar um quadro (em geral):

Os ditames quadro da estrutura geral e a mecânica do seu código CSS. Agora, eu não estou falando de uma redefinição de CSS (estes são úteis em seu próprio direito, mas não são as verdadeiras molduras); Estou falando de um honesto a boa estrutura, que já fez as decisões sobre o que tags semânticas que você vai estar usando em seu documento, etc. Como tal, você está dependente do quadro, e quando há um erro no quadro, você vai mais comumente tem que consertá-lo sozinho.
Frameworks não são uma desculpa para ser alheio ao cross-browser / questões CSS avançados. Você sempre vai correr para eles, tal como seria trabalhar com um framework PHP ou JavaScript. E você precisa saber como lidar com eles. Há um ditado comum que você deve escrever sua própria estrutura em primeiro lugar, antes de usar de outra pessoa.

Tomar uma espiada no Blueprint, eu realmente não chamá-lo de um quadro; talvez um reset com alguns presentinhos extra em cima.

Eu olhei BluePrint e alguns outros ea única CSS 'quadro' eu recomendo é YUI Grids

Pros:

Escrito por um dos melhores engenheiros frontend lá fora (IMO) (Nate Koechley)
Muito pequeno. 4KB
Muito flexível (1000 layouts diferentes)
Suporta fluido de largura (100%), bem como disposições predefinidos layouts de largura fixa no 750px, 950px, e 974px, e a capacidade de facilmente adaptar para qualquer número.
Suporta fácil personalização da largura para layouts de largura fixa.
colunas modelo são-fim fonte independente, para que possa colocar o seu conteúdo mais importante em primeiro lugar na camada de marcação para melhor acessibilidade e search engine optimization (SEO).
auto-clearing rodapé. Não importa qual coluna é mais longo, as estadias de rodapé na parte inferior.
Layouts menos do que 100% são automaticamente centrado.
classnames pouco semânticas (melhor do que superior, esquerda, direita, etc)

Contras:

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

Como outros já publicados, não há 'estruturas' reais para CSS. estilo Redefinir ajudar muito com o layout também. Eu costumo ficar com uma folha de estilo de reset e de lá ir. Mas se você não tem muita experiência CSS YUI Grids poderia poupar algum tempo.

Compass é um framework CSS real em o sentido que lhe dá não só modelos (tanto YUI e modelo), mas também construções reutilizáveis ??e declarações de nível superior, enquanto ainda dando-lhe familiarizado sintaxe CSS.

Aproveite o tempo para estudar e compreender (realmente entender!) Alguns quadros CSS como Blueprint e YUI e redefine CSS como Eric Meyer. Em seguida, tomar o tempo para montar sua própria redefinição e / ou quadro com base em seus métodos de trabalho e o tipo de sites que você construir.

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

Recentemente assisti Eric Meyer fazer uma apresentação sobre Frameworks CSS em que ele fez a pergunta: "Então qual é o caminho certo para mim" Ele então respondeu à pergunta, mostrando um slide em branco. Seu ponto era, que certamente existem alguns conceitos úteis incorporado na maioria dos resets e estruturas, mas o que mais lhe o melhor é o que você escreve para si mesmo (vale a pena o esforço).

Por que usar css 'estruturas'?

Se você está pressionado pelo tempo.
Se você não sabe css, e não fazer Alguém sabe quem pode escrever para você.
Se você não são excessivamente sobre preciosa padrões etc.

Eu sei programadores que têm sido muito feliz de utilização modelo ou 960, uma vez que lhes permite montar um esquema por conta própria, sem recorrer a um desenvolvedor front-end. Isto é ideal para projetos pessoais, ou startups com recursos limitados.

Se você tem conhecimento razoável de CSS já, então provavelmente você tem uma biblioteca decente de layouts ações já, para que claramente não vai precisar de um quadro.

No entanto, se você é um novato e só precisa ter algo pronto e funcionando, então você pode voltar-se para um quadro, uma vez que torna layout básico muito mais simples, e combater a compatibilidade do navegador também.

Dito tudo isso, muitas estruturas de fora da caixa fazem uso de alguns nomes de classe horríveis etc. Eu sei de alguns sites que tiveram um quadro como um ponto de partida e, em seguida, personalizados com sua própria classe e id tags. Mas é evidente que há um pouco de trabalho envolvido nesse reescrita também. Usando algo como Compass, como mencionado acima, não ajuda a contornar isso.

Assim, quadros CSS - eles podem poupar tempo, ao custo de semântica. Eles também podem prejudicar o seu conhecimento de CSS, mas isso é mais até quanto você investe em aprender o tema em geral. Se você fazer uso deles é com você.

Você teria que perguntar a si mesmo como eficazes os quadros disponíveis são em resolver os seus problemas. Será que eles atender às suas necessidades?

Ao usar um quadro, você pode definir algumas regras ou detalhes no nível do pixel e dedicar o resto de seu tempo para implementar e produzir. É um enorme impulso a produtividade. Se você encontrar-se gastar ajustando vez as coisas por alguns pixels tarde no projeto (micro gestão do projeto), é um sinal de que um quadro pode ser útil.

Dica # 17 em The Pragmatic Programmer diz: "Programa perto do domínio do problema". Usando uma camada de abstração que você pode obter mais perto de resolver os problemas reais do layout. Por exemplo: você pode ser capaz de concentrar-se de melhorar a experiência do usuário com o tempo extra que você tem, em vez de pequenos ajustes de pixels.

Isto não quer dizer que você deve sacrificar a qualidade pela quantidade. É sobre a eficiência.

Em um projeto recente, eu fiz o meu próprio quadro porque tínhamos muito recursos limitados e os quadros populares não fez o que eu queria. Então, eu configurar PSDs da equipe de design para tirar a mesma grade I implantado.

Um quadro não tem que ser qualquer implementação particular de CSS. Ele não tem que ser algo inchado você baixou da interweb ou algo implementação de idéias ultrapassadas. É apenas uma técnica para obter um trabalho feito. Eu não ficaria surpreso se alguns codificadores já têm suas próprias estruturas e nem sequer sabem disso. Na verdade, se você considerar o DOM como um conjunto de elementos padrão que se estendem com CSS, então isso é um quadro por definição.

Na verdade, eu passei uma parte boa das últimas 24 horas investigando isso no meu próprio, heh. Minha conclusão foi que uma reposição agradável (eu usei YUI Repor ), e talvez algo mais para set material de base ( YUI fontes valia a pena no meu caso, talvez as "guloseimas extras" de BluePrint estaria em seu) é uma boa idéia. Mas, um "quadro" --- que geralmente é algo como YUI grades --- é demasiado restritiva, obrigando-o a usar seus nomes de classe, ids, etc. e raramente encaixe em seu site como CSS feitos à mão faria.

Assim, em breve: redefine parecem bastante agradável; é bom para eliminar toda a variação no exemplo margin-vs-preenchimento para listas, ou o espaçamento entre parágrafos, ou o que quer. Mas isso é tanto quanto eu iria levá-la.

i nunca usei isso sim, mas eu acho que emastic pode ser uma boa pena alternativa um cheque. que é semelhante ao projeto em seu alcance, mas também suporta layouts elásticos (daí o nome) e você pode especificar valores em px, em ou%, e até mesmo misturá-los.

Compass eu acho que é incrível. Certifique-se de ver a screencast .

Eu estou usando 960.gs por alguns sites e achar que é muito simples e fácil e vale o esforço . Salva-me um monte de trabalho no layout. Certifique-se de verificar o gerador de CSS personalizado que vai acabar com a largura fixa de 960 pixels.

Eu acho que este vídeo apresentação pelo site Ponto CEO Kevin Yank vai responder a sua pergunta. Eu realmente recomendo para vê-lo.

Compass permite renomear as classes do seu quadro e ids com seus próprios nomes semânticas, assim você pode querer verificá-la. Ele também fornece acesso a coisas que você simplesmente não entendo com CSS plain vanilla, como mixins.

Estou surpreendido pelos chamados "especialistas CSS" que criticam essas ferramentas sem realmente ter cavado no e usou-os. Eles são essenciais? Não. Se você gosta de seu próprio quadro (você tem uma de sua preferência, certo Um quadro CSS é apenas uma biblioteca cuidadosamente definidos? - todos devem estar usando um), em seguida, por todos os meios, manter a usá-lo. Ninguém está forçando-o a usar outros frameworks e eu não ver as pessoas que estão usando estruturas dizendo puristas CSS que eles estão "fazendo errado."

Criticando estruturas de tal ponto de vista um pouco revela uma insegurança, bem como uma ignorância. Por exemplo, a noção é risível que uma pessoa iria usar uma ferramenta como o Compass sem saber CSS. Você percebe, certo, que um quadro geralmente não escrever todo o seu CSS para você? Você ainda pode sair e escrever seu próprio CSS dentro do contexto da maioria dos frameworks. Na verdade, se você não sabe o CSS que você pode ficar frustrado rapidamente.

Para mim, eu gostar de ter um quadro porque já está documentado, testado por centenas de outros usuários, e eu posso aplicar minhas próprias classes e ids via Compass. Se eu preciso de algo que o quadro não é adequado para, então eu vou codificar meu próprio.

Matt Raible de AppFuse fama tinha um CSS Framework concurso de um tempo atrás para desenvolver CSS Frameworks para AppFuse. Os resultados são publicados aqui . Existem algumas variações e tenho usado algum eu mesmo porque eu uso AppFuse e encontrá-los muito bom.

Gostaria de acrescentar que estes Frameworks CSS funcionam bem porque eles são usados ??em aplicações temáticas. Isto é, se você seguir as regras em seguida, mudar de um para o outro é tão simples como mudar um valor em um arquivo de propriedades.

Eu tenho usado BluePrint com muito sucesso em um site (que eu poderia mencionar o site aqui, mas eu tenho certeza que o posto seria marcado como spam!). Eu não tenho certeza se vou usá-lo no futuro, porque embora uma das ideias de CSS achei que foi para não ter lógica de layout codificado. Você não deve ter elementos css chamado espaço-24 e span-12 para definir o layout mas algo como SearchBox e mainContent. Pelo menos isso é como eu vê-lo.

Boa link que eu encontrei: Top 12 Frameworks CSS e como entendê-los

Aqui é o meu blog post sobre CSS Frameworks Quando a estrutura CSS uso?

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

Eu acho uso inteligente Compass' de mixins Sass para ser brilhante, e um grande passo para o Santo Graal da sustentável semântica marcação. Eu não acho que eu gostaria de usar um framework como o Blueprint ou YUI sem uma abstração, como bússola para manter as classes de apresentação fora do markup.

BTW, há um quadro CSS aparência agradável chamada Elastic que parece ser bom o suficiente que eu estou pensando em adicioná-lo ao Compass.

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

Gostaria de sugerir seus layouts como você escrevê-los e desenvolver um sistema modelo genérico do que isso. Enquanto eu amo fazer CSS mais modular, muitas vezes e, dependendo do design, o CSS pode ser específico caso muito e não modular em tudo.

Eu usei Blueprint em alguns sites one-off e definitivamente economizou tempo, principalmente em testes de cross-browser.

Ele definitivamente suga a adição de código de apresentação para a sua marcação, embora o lado bom é legível. Enquanto eu amo o conceito de "você pode redesenhar sem tocar a marcação", se você está produzindo um site onde que realmente não vai acontecer de qualquer maneira e você só precisa-lo feito ontem, Blueprint é algo para olhar.

Há também desvantagens em que tipos de layouts que puderem criar embora. Se você wireframe do site desde o início em uma grade rígida, será muito mais fácil de transpor para o quadro com um mínimo de barulho.

Eu tenho usado BluePrint e YUI, mas eu fico sempre frustrado com alguns dos nomes que dão o seu ID e classes.

Para cada um na sua, mas eu prefiro fazer as coisas a partir do zero, mas depois de um tempo você desenvolver um processo em que você vai usar o seu trabalho anterior e aplicá-la a novos projetos e apenas fazer alguns ajustes para tornar o visual do site da maneira que você gostaria que ele.

Certifique-se de usar uma convenção de nomenclatura bom, apenas no caso de alguém na estrada entra para editar o css, então eles vão ter uma boa idéia do que cada nome de estilo está se referindo.

Craig,

Compass é o que você está procurando: ele permite que você renomear suas classes CSS 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 os quadros prematuramente juiz, sem terem verificado Compass estão "perdendo o ponto." É uma espécie de como aquelas pessoas que nos disse anos atrás que estamos perdendo o ponto, utilizando CSS ao invés de tabelas HTML para os nossos layouts.

-Matt

http://www.ez-css.org/ . um dos quadro mais fácil e mais leve css para trabalhar. :)

Dê uma olhada para esta demonstração: http://www.richstyle.org/demo-web.php Este quadro é baseado na idéia de que "tags HTML deve ser suficiente". Acho reutilização é o fator mais importante para escolher um componente de software, incluindo um framework web. Para os desenvolvedores de frameworks web, mais se comprometer com padrões, mais você garantir a possibilidade de reutilização.

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow