Quando devo usar uma estrutura CSS?


11

Quais são os cenários de melhores práticas para usar uma estrutura CSS? Quando é melhor "rolar o seu próprio" CSS a partir do zero, em vez de usar estruturas?

Respostas:


11

As estruturas CSS são um pouco complicadas porque não são realmente estruturas para mim. Eles são simplesmente classes predefinidas. Mas, essa não é sua pergunta.

As estruturas CSS são ótimas para maquetes e estruturas metálicas. Eu não recomendaria usá-los em um site ao vivo porque eles adicionam classes sem sentido à sua marcação. ".span3" não me diz nada sobre o conteúdo, apenas o design.

No entanto, o blueprint possui algumas ferramentas interessantes que ajudam a combinar as classes de estrutura e as semânticas assim que terminar.

Eu sempre rolo meu próprio CSS.


4
Estou com Thorn007 neste. CSS é bastante simples quando você se dedica a isso. Basta usar uma boa redefinição de CSS e fazer o seu próprio.
Jessegavin

3

Apenas evite-os, eles não são nada além de irritantes.

Especialmente este.

* { margin:0; padding:0; }

Minha maior reclamação é que, se você herdar / manter um site que usa uma redefinição e / ou uma estrutura, deve aprender essa estrutura antes de poder modificar o site.

Quando adiciono uma tag h1, espero certas coisas. A maioria das redefinições retira todo o preenchimento, margem, bloco etc. para que uma tag h1 não atue mais como deveria, por padrão. Então eu tenho que voltar e adicionar tudo o que estava lá em primeiro lugar.

Geralmente (na minha experiência) as pessoas que não entendem css que usam as redefinições e estruturas, e isso causa mais trabalho para as pessoas que fazem.


1
Eric Meyer e os desenvolvedores web do Yahoo entendem CSS e usam redefinições CSS. Na minha experiência, eles economizam muito tempo e dor de cabeça ao tentar obter consistência entre navegadores. - As estruturas CSS são coxas.
Jessegavin

Quando eu adicionar uma tag h1 espero certas coisas .. infelizmente, você precisa esperar coisas diferentes de cada navegador .. e, portanto, a necessidade de redefinição de css ( não quadros )
Gabriele Petrioli

h1 é um exemplo muito ruim, porque os navegadores tendem a usar margens diferentes e assim por diante. Pessoalmente, prefiro um "conjunto" para redefinir - ou seja, em vez de redefinir tudo para 0, basta configurá-lo em sua própria folha de estilo!
usar o seguinte

* {margin:0; padding:0;}é a redefinição de CSS mais importante de todas. Ele remove margin-top/maring-bottomsob todas as tags, mesmo as ptags, para que você não veja um espaço enorme entre cada linha. Mesmo este site provavelmente está usando, p {margin:0;}caso contrário, o navegador viveria um espaço enorme entre cada linha. Eu estou querendo saber como você pode dizer que eles são irritantes.
Marco Demaio 4/03

2

É minha opinião que o único serviço que um CSS Framework fornece é um ponto de partida para aqueles que não estão muito familiarizados com CSS.


2

Também recomendo usar um reset.css de Eric Meyer, mas acho que as "estruturas" CSS podem ser benéficas para o layout. Blueprint, grade YUI e grade 960 podem ajudá-lo a obter alguns layouts altamente complicados sem escrever o css.

Embora existam desvantagens mencionadas, o mesmo poderia ser dito sobre a criação de um site a partir de um CMS, em vez de implementar um código personalizado, por exemplo, mas eles ainda podem ser úteis e, para muitos sites, os benefícios obtidos superam quaisquer problemas estranhos de css ou desempenho.


1

Se você estiver realmente implementando um design próprio, escreverá um pouco do seu próprio CSS (a menos que outra pessoa tenha escrito o design exato que você deseja).

Supondo que você esteja escrevendo um pouco de seu próprio CSS, as "estruturas" podem ser úteis quando você tem estilos que são:

  1. usado em mais de um local; e
  2. complicado o suficiente para entrar em suas próprias classes

Para estilos realmente simples, é melhor usar classes para indicar o que é algo (por exemplo class="navigation") e definir sua aparência aplicando regras de estilo a essa classe em sua folha de estilo.

Porém, para estilos mais complexos que não estão necessariamente vinculados a nenhum elemento (por exemplo, estilos relacionados ao layout, do tipo que os frameworks atribuem nomes .span3), não há nada de errado em colocá-los em uma classe e aplicar essa classe no CSS. Você pode usar as duas abordagens juntas.

Em sites maiores e mais complexos, onde é provável que os elementos sejam combinados de maneiras imprevisíveis, uma abordagem semelhante a uma estrutura pode realmente ajudar a manter seu código gerenciável.

Eu diria que você também pode escrever sua própria "estrutura". Coloquei "framework" entre aspas porque o CSS realmente não é uma linguagem tão grande. Você pode ler CSS: The Definitive Guide (Eric Meyer) em um dia, depois ler todo o código em, por exemplo, Blueprint (uma "estrutura" CSS)) e entender o que está acontecendo. Você pode precisar pesquisar um pouco as soluções alternativas do IE, mas estamos falando de pelo menos uma ordem de magnitude e menos complexidade do que, por exemplo, o jQuery aqui.


1

Eu uso blueprint, para CSS.
CSS é, como todos dizem acima, realmente simples.

No entanto, na realidade, você deve considerar a plataforma.

Com CSS, o mecanismo de renderização aumenta a complexidade.

Gecko vs WebKit vs Presto vs Trident ... quem quer fazer tudo isso?

O que uma 'estrutura' oferece a você aqui é a capacidade de escrever layouts que provavelmente funcionarão em todos os navegadores; portanto, você não precisará pesquisar no modo de quirksmode 'WTF-eu-estou-fazendo-esse-lixo' correção, ou algo similarmente ridículo.

As estruturas fazem 90% do layout desejado e, em seguida, você pode adicionar seus próprios estilos posteriormente.

Então, para responder à pergunta, eu diria que escolha qualquer estrutura e veja se ela funciona para você. Apenas pode. Então você é ouro e pode voltar ao que realmente queria. Caso contrário, estenda-o usando css e altere o que não funcionou. Dessa forma, você mantém o benefício entre navegadores, mas ainda pode personalizar.

Como um pequeno benefício, se você escolher um e usá-lo o tempo todo e ficar doente, ou for promovido e tiver que treinar seu sucessor, poderá dizer:

"Sim, eu usei a estrutura ABC. Os documentos estão aqui. O código está aí. O treinamento acabou. Boa sorte."


0

Quando resolve todas as suas necessidades . (Isso se baseia na ideia de adaptação .)

Do único livro sobre frameworks? http://www.oreilly.com/web-platform/free/book-of-html-css-frameworks.csp . (Somente vinculando porque é gratuito e relevante aqui.)


Talvez seja melhor cortar e colar as partes relevantes da página à qual você vinculou. Caso contrário, como resposta, isso é meio que leve. As respostas somente para links são desencorajadas aqui porque os links geralmente quebram com o tempo. Você pode atualizar esta resposta para ajudar o OP e futuros usuários com algo em que eles podem cravar os dentes? Desde já, obrigado!
Closetnoc 27/08/2015
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.