Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

    O meu, o seu, o nosso espaço!

    » Como você escreve seus arquivos CSS? Parte 3

    Falae pessoal.

    Demorei um bocado para essa terceira parte, que eu acho que é a última, pelos meus cálculos e pelos detalhes e informações sobre os arquivos CSS que crio.

    Como vimos nos artigos anteriores, na Primeira e na Segunda Parte, vimos alguns detalhes sobre os arquivos CSS, que na minha opinião, melhora bastante, otimiza seus CSS’s.

    Mostrei vantagens e desvantagens, indentações, múltiplas formas de implementar seus estilos e espero ter ajudado, ou pelo abrir um pouco mais a cabeça da galera, principalmente com quem trabalha com projetos grandes em sua vida profissional.

    Beleza Bruno. Pára de enrolar e fala logo.

    Ok, ok. São apenas dois pontos que citarei nessa terceira parte do artigo:

    1. Utilização de Multi-CSS’s;
    2. Ordem de escrita das propriedades.

    Bom, vamos começar a falar sobre o primeiro.

    Utilização de Multi-CSS’s

    Muitas pessoas ainda possuem dúvidas sobre a utilização, se podem ou não, no que prejudica, no que ajuda, se é que ajuda, a utilização de vários arquivos CSS no seu site.

    Posso utilizar vários CSS’s?

    Não só pode como deve utilizar. Acho essencial a utilização de múltiplos arquivos CSS’s, dependendo da estruturação das páginas. Mas logicamente que existem limites para isso. Não é recomendável a utilização de 30 arquivos CSS’s pequenos, por exemplo, onde se poderia utilizar somente um ou dois. O tempo de renderização aumenta por ter vários arquivos.

    Você pode estar pensando “Caramba! Trinta arquivos? Esse Bruno tá maluco?”. Coisa de maluco, concordo plenamente, mas quando participarem de projetos grandes, verão que os “remendos” sempre acontecem, principalmente se já passou por várias mãos, vai pra aprovação, modifica layout, vai pra desenvolvimento, volta, vai pra qa, etc, etc, etc.

    Acaba passando na mão de várias pessoas, a página possui vários elementos globais, que utilizam CSS’s externos, entre outras coisas mais.

    Entendi Bruno. Mas como faço então?

    Eu fazia de um modo, que hoje eu acho errado, que era chamar um CSS somente e dentro dele eu chamava os outros:

    No HTML:

    <style type="text/css">
    @import "css/estilo.css";
    </style>

    No CSS:

    @import url(estilo2.css);
    @import url(estilo3.css);
    @import url(estilo4.css);

    Ok Bruno. E o que há de errado com esse CSS?

    Errado? Nada. Mas concorda comigo que cada vez que eu chamo o arquivo estilo.css, ele chama todos os outros arquivos CSS’s?

    E se em uma página específica eu não precisar desses CSS’s? Só precisar de um apenas? Eu chamando o estilo.css, já estou chamando os outros e como eu quero economia, otimização, não quero que isso aconteça, correto?

    A mesma coisa acontece se eu colocar todo o conteúdo dentro de um CSS somente. Sempre chamarei somente um, mas dependendo do site, ele pode ter centenas, ou até milhares (isso mesmo) de linhas, o que sobrecarrega bastante.

    Tudo bem que temos cache, mas queremos evitar esses problemas de peso, otimizar, certo? Então vamos fazer um trabalho decente 😀

    Sucesso. Mostra ae o modo correto de implementar essa parte do CSS

    Lembrando que não estou falando que tal modo é certo ou errado, somente o que eu faço e mostro aqui pra vocês opinarem, comentarem, discutirem, etc.

    Eu, geralmente crio um arquivo chamado geral.css, que engloba todas as tags gerais, toda a estrutura do site inteiro, como conteudo, rodape, topo, títulos, etc. Depois eu crio mais um arquivo internas.css, caso seja possível ter somente um arquivo com todas as informações.

    Com isso, temos dois arquivos, sendo que na home eu não chamarei o arquivo internas.css, por motivos óbvios certo? 😀

    Caso seja necessário, eu posso criar alguns outros CSS’s, para títulos, formulários (recomendado), elementos globais (apesar de eu usar no geral.css, mas vai de cada um.), entre outros mais.

    Boa Bruno. E agora é só chamar os arquivos CSS’s necessários no HTML certo?

    Exatamente. Não vou mais precisar escrever no CSS o import, para chamar os outros arquivos. Segue abaixo:

    Possuo três páginas: Home, Quem e Contato; e possuo três arquivos CSS: geral.css, internas.css e formularios.css.

    Home

    <style type="text/css">
    @import "css/geral.css";
    </style>

    Quem

    <style type="text/css">
    @import "css/geral.css";
    @import "css/internas.css";
    </style>

    Contato

    <style type="text/css">
    @import "css/geral.css";
    @import "css/internas.css";
    @import "css/formularios.css";
    </style>

    Na Home eu chamei somente um CSS, o geral.css, que é chamado por todas as páginas. Na página Quem, além do geral.css, chamo o internas.css porque é uma página interna e na página de Contato, eu chamos os três CSS’s porque além de precisar da estrutura contida no geral.css, ele é uma página interna e possui os formulários necessários.

    Bom, resumindo é isso. Com isso, temos uma estruturação, um controle maior dos CSS, cortamos chamadas desnecessárias de classes e ID’s.

    Ordem de escrita das propriedades.

    Exatamente isso que você está pensando, se é que está pensando :D. Eu penso na ordenação das propriedades nos meus CSS’s. Parece loucura, admito, o Arthur mesmo falou comigo que era coisa de maluco, perguntando se existia alguém que realmente fazia isso, e ele tomou um susto quando eu respondi que fazia isso 😀

    Tá Bruno, mas como assim? Como você ordena seus CSS’s?

    Exatamente como você está imaginando agora, em ordem alfabética mesmo. Meio difícil de aceitar no início, concordo, eu fui um pouco assim, mas sem ser xiita.

    Tudo depende da adaptação, em qualquer coisa, seja na vida pessoal, trabalho, convivência, etc. Tudo é questão de hábito e costume.

    É bem chato no início, mas depois que pega o ritmo, costume, vai rápido.

    Entendi Bruno. Mas qual a vantagem de deixar em ordem alfabética os CSS’s?

    Isso varia de cada um, claro. Na minha opinião, o que mais pesou para eu implementar desta forma foi a organização. Por mais que cada um tenha seu modo, sua ordenação, em ordem alfabética eu sempre saberei onde está, aproximadamente, o atributo que eu estou procurando para modificar. Resumindo, eu achei mais fácil pra localizar atributos.

    Finalizando…

    Bom, finalizo aqui mais uma etapa, creio eu que seja a última delas 😀 de escrita de CSS. Provavelmente existem outros links falando sobre, acabou que nem pesquisei sobre isso direito. Qualquer coisa é só postar nos comentários.

    Mandem comentários, dicas, críticas, dúvidas que eu vou abrindo a mente pra, quem sabe, ver outras maneiras, experimentar outros métodos de implementação.

    É isso, aquele abraço.

    [BBL]artigos, css, escrita-no-css[/BBL]

    [ 30/maio/2007 às 11:47hrs ] [ Por Bruno Dulcetti ] Comentários 15 Comentários |

    Categorias: Artigos,CSS,Webstandards

    15 Comentários no Post "Como você escreve seus arquivos CSS? Parte 3"

    Postar no Rec 6

    1. Ótima série, amigo.
      Abração!

    2. Muito boa saga!
      Em relação a organização eu de um tempo pra cá resolvi organizar os css por “grupos”:

      * (globais)
      body (tags)
      #id (ids)
      .classe (classes)

      e esses grupos ficam em ordem alfabetica. Acho q assim fica bem facil achar cada coisa e com isso facilita a manutenção!

    3. Aew!!

      Legal o artigo….mas faltou colocar um exemplo do código em ordem alfabética…pro povo ver! uhauhaa

      akele abraço garotim.

    4. Epa!

      Há alguma diferença entre chamar os .css através de “@import .css” e o “método tradicional”, com a tag link, e tudo mais?

      Há algum ganho de desempenho ou algo do tipo?

    5. Opa, para os prequiçosos existem vários sites que organizam (e reduzem se vc quiser) seu css rapidão:
      http://forum.ievolutionweb.com/index.php?showtopic=10876

    6. Muito boa a série! Parabéns!

    7. Parabéns pela série Bruno!

      Quanto ao assunto, eu fazia diferente que eu acho mais organizado, uma propriedade abaixo da outra. Lendo esta série de artigos e coincidindo com um novo projeto estou fazendo como você. Só ainda não criei uma seqüência, uma ordenação das propriedades.

      Com relação a chamada do arquivo css:
      é errado chamar assim?
      link rel=”stylesheet” type=”text/css” href=”includes/estilos.css” media=”all” />

      Obrigada pela série aprendo em toda vez que visito seu blog.

    8. ola gostei bastante da serie
      mas como o arthur disse podia colocar um exemplo
      em ordem alfabética neh

      Parabens!!

    9. Aeeeeeeeeeee…… achei alguem que ordena as propriedades em ordem alfabética… pensei q era o unico… hehehe
      Eu também costumo tabular todos os valores das propriedades, alguem faz isso tb?

      ótimos artigos…

      abrasssss

    10. E ai Bruno!

      Achei legal a série, grande parte do que você exemplificou eu já fazia, uma outra parte que eu achei interessante (não fazia, mas agora vou coemssar a estudar uma forma de fazer), é a forma compacta de escrever os css em uma linha, realmete interessante.

      Sobre a organização que vc postou nessa ultima parte eu faço de outra forma, eu organizo por seções do site, tipo: “coluna1” “coluna2” “rodape” etc.

      Organizar em ordem alfabetica, seria uma coisa que levaria um tempo para se acostumar, o que muitos profissionais as vezes não dispõem.

      Ótimo Artigo!
      Abraço!

    11. Eu também organizo as propriedades dos meus CSS por ordem alfabética 😉 acho que fica bem melhor estruturado o conteudo realmente, e depois de um tempo fica bem mais fácil de mexer no código CSS, pois por exemplo, color não ta no inicio num, e no final no outro, pois sei que sempre estará no início ;D

      Há também quem prefira organizar todas as informações de estilo no css por ‘tema’ por assim dizer. Como exemplo, ja vi estruturarem os estilos por cor, bordas, tamanhos e fontes. E assim vai 🙂

      Abraços cara!

    12. Oi, Bruno, é a primeira vez que passo aqui. Achei seu site pelo Technorati. Gostei bastante!

      Sobre o post. Já fiz escrevi CSS/XHTML para alguns sites bem grandes, daqueles que tem um layout diferente para cada página (busca, login, fórum, profile). E o CSS que seria usado apenas em uma página específica ficava gigantesco. A solução era dividir os estilos em CSS separados, um para cada página (busca.css, login.css, forum.css).

      Aí eu fazia o que você disse: mantinha um CSS geral.css e um outro específico (no meu caso, um para cada página). Mas não chamava os dois arquivos na página. Como cada uma tinha um CSS diferente, chamava apenas o respectivo. Ex: na página de busca, chamava o busca.css, e assim por diante. Dentro do busca.css, eu colocava @import url(geral.css);.

      Também acontecia de haver uma série longa de estilos pertencentes a um “módulo” da página, como uma tabela de fórum, por exemplo. Era uma tabela com vários estilos, cores, fontes e background-image específicos, e que aparecia em várias páginas. Nesse caso específico, eu criei um arquivo CSS só com esses estilos, chamado forum.css. Daí, em todas as páginas em que essa tabela aparecia, eu simplesmente incluía @import url(forum.css);.

      Para sites pequenos, geralmente uso apenas um CSS. E, dentro dele, organizo mais ou menos como o Frango falou aí nos comentários:

      – Tags básicas (body, p, a, h1)
      – DIVs de estrutura (#master, #coluna1, #coluna2, #cabecalho, #rodape)
      – Classes específicas (ul#menu, p.rodape, div.box)

      Muito boa a discussão! Voltarei sempre.

    13. Cool…

    14. […] Como você escreve seus arquivos – Excelente artigo sobre como escrever seus códigos. São três partes, neste há link para as outras duas. […]

    15. Much like car mechanic work, most people will pay for website services not knowing what they
      should be getting charged for a service, whether it. These factors cannot be implemented in just a sudden; it requires
      a long time process, knowledge, and skills. So consider, what are you trying
      to get your website to know what kind of web presence should be designed or have someone design it for
      you.

    Tá esperando o quê? Comenta logo.

    
    Copyright © 2005 Bruno Dulcetti | Creative Commons
    Bruno Dulcetti atuante na área de desenvolvimento web / webdesign e colaborador na área de webstandards pelo Blog BrunoDulcetti.com - blog. Atuante na área desde 2000. Atuando na cidade de Niterói/RJ - Brasil. E-mail: bruno@brunodulcetti.com