Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

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

    » Compactar meu CSS? Eu faço, mas se você não faz, tanto faz. Ou não.

    Confuso o título não é verdade? Foi mais pra botar algumas minhocas na sua cabeça, mas prepare-se para o restante do post, pois esse é bem interessante e surgiu com um post publicado pelo Diego Eis no Tableless, onde eu fiz um comentário, na minha opinião, pertinente, mas que alguns leitores de lá não concordaram e possuem opiniões diferentes.

    Do que se trata?

    Podemos dizer compactação, otimização, whatever, qualquer coisa, mas é uma opinião do Diego sobre criação de arquivos CSS e tudo mais. Ele comenta que não é necessário compactar seu CSS da seguinte forma:

    .minha-classe {
    	color:#900;
    	font-style:bold;
    	display:block;
    }
    

    Para esta forma:

    .minha-classe {color:#900;font-style:bold;display:block;}

    Feio isso hein

    Sim, sim. Concordo, mas eu comentei aqui no blog um tempo atrás sobre essa forma de implementação de CSS, seus motivos, entre outros, mas repito novamente.

    Motivos

    Imaginem você um site que possui MILHÕES de visitas. Não milhares, mas sim MILHÕES. Agora imagine esses milhões de visitas multiplicados pelos kbytes que eu consigo economizar escrevendo meu CSS daquela forma.

    Citei que em projeto em que eu participei, Globo.com e Videolog, projetos grandes, bem grandes, a economia ultrapassava os 20kb. Vieram falar que 20kb não é nada e carrega em 4 segundos numa conexão discada.

    E não é?

    Hmm… Sim, possivelmente sim. Mas vou citar um ponto importantíssimo que muitos dos desenvolvedores client-side que utilizam os padrões W3C, que é a economia de banda. Tráfego custa dinheiro e não é pouco. Se seu site tem 5mil visitas, 10mil, 20mil, você não precisa se preocupar muito, pois são “poucas” e sua hospedagem certamente cobre tal tráfego tranquilamente.

    E temos também o cache de CSS, que já fica armazenado na primeira visita. E isso ajuda bastante e diminui o tráfego.

    Pois sim, agora vamos aos fatos.

    Milhões de acessos é igual a milhões de kbytes carregados. Milhões de kbytes carregados é igual a bastante tráfego, que quando você economiza milhões de acessos x 20kb, pode ter certeza, você tem um ganho absurdo. Fato!

    E o Elcio concordou comigo plenamente e também o Diego comentou logo após um que eu fiz, concordou também, falando pra galera que o artigo é ais focado para projetos menores.

    Ahhhh sim. É verdade então Dulcetti

    Na minha opinião sim. Mas concordo que a leitura de um CSS todo numa linha é bizarro, mas te digo uma coisa, é costume. Meu primeiro contato foi negativo, mas depois, com o tempo, vi os resultados e foram satisfatórios e dei valor à isso e implemento assim desde hoje e estou acostumadíssimo. Tudo é questão de adaptação.

    E hoje eu escrevo meus CSSs desta forma, tanto em projetos grandes quanto pequenos, já que acostumei. Com isso, economizo para os projetos que escrevo, por mais que seja pouco, mas pra mim 1kb que seja economizado já é um ponto a se contar.

    Resumindo

    Bom, eu recomendo a escrita numa linha para economia, mas vai de cada um 😉 Mas concordo com um ponto no post do Diego, fazer isso com o HTML é meio que forçar a barra demais e acho que não vale tanto a pena. E eu também sou a favor da utilização de gzip, compactadores, etc, tendo duas versões, uma de desenvolvimento e outra pra produção, sendo essa segunda a compactada.

    Mas tem que tomar cuidado pra não dar merda, porque uma pequena confusão já basta para ferrar o projeto. Ainda mais se estiver trabalhando com mais de um cara. E fora que usar isso dentro de empresas grandes é difícil, pois existem pontos burocráticos e barreiras a se travessar.

    Finalizando

    Bom, é isso. Não quero forçar a barra de ninguém, muito menos criticar ao Diego, tanto que citei no primeiro comentário que eu fiz que aquela forma de desenvolver serve plenamente para projetos com menos tráfego, menores e tudo mais e sei que ele entendeu isso. Mas só é um ponto de vista meu, que já trabalhei com projetos bem grandes e tive que recorrer a tais recursos, por mais que contra minha vontade no início.

    Como eu disse, tudo é questão de adaptação. Portanto, antes de me criticarem, me mandarem a merda ou afins, perguntem, tentem saber porque isso, porque aquilo. Aí sim, depois vocês podem me xingar 😀

    Aquele abraço.

    ps: novamente, antes de acharem algo “burro” ou “errado”, procurem saber o porquê da utilização de tal forma, coisas burocráticas, etc. 😉

    [ 13/nov/2008 às 19:27hrs ] [ Por Bruno Dulcetti ] Comentários 23 Comentários |

    Categorias: CSS,Webstandards

    23 Comentários no Post "Compactar meu CSS? Eu faço, mas se você não faz, tanto faz. Ou não."

    Postar no Rec 6

    1. Eu só acho que você poderia fazer uma macro ou alguma coisa parecida. Bizarro ficar codificando CSS desse jeito.

    2. eh costume diego. te garanto isso. o inicio eh bizarro, mas depois vai tranquilamente, automatico 😉

    3. É questão de costume… eu compacto.. mas a maior vantagem, pra mim, é poder ver… na tela muito mais propriedades css… evita muitoooo page down / page up…

    4. @Danilo – entendi Danilo, mas pode ser uma vantagem pra ti, enquanto pra outros seja melhor o pagedown do que dar scroll pro lado pra ver as linhas mais extensas.

      Como eu digo, questão de costume e também de gosto. E não de burrice como alguns falam… Abraços.

    5. @dulcetti, na verdade essa discussão (produtiva) surgiu desse post aqui: http://leonardocaineli.com.br/dicas-para-otimizar-seu-css/. É bacana ver que o assunto está se espalhando para ser debatido de uma forma mais ampla e por pessoas mais entendidas.

      Abraços!
      Leonardo Caineli

    6. No caso do Globo Videos não é tão necessário esse compactação pois no apache está configurado o mod gzip. Dessa forma, o próprio módulo já faz a compactação do CSS e JavaScript.

    7. Nos projetos que eu desenvolvo, tenho por padrão a compactação do CSS. Indiferente do projeto ter milhares ou milhões de acessos, é uma prática que eu sigo.
      Após essas discussões que houveram tanto aqui quando no tableless.com.br, comecei a pensar no seguinte: Seria muito trabalhoso manter uma versão dev e uma versão prod do CSS? Acredito ter ferramentas que possam fazer essa “compactação” do CSS de uma maneira automática, diminuindo o tamanho do arquivo a ser carregado e ainda sim mantendo um código mais “fácil” de dar manutenção (para mim, tanto a maneira compactada quando a não compactada, são fáceis de dar manutenção). Vários frameworks de javascript já se beneficiam desse uso, como jQuery e Prototype.

    8. Marcelo Leite | 14/nov/2008 às 10:02

      TEORICAMENTE, vc tá certo.
      mas a coisa é mais fácil. Dá para configurar o webserver para retirar todos os ASCII13 de todos os arquivos na hora da entrega do conteúdo. Na verdade, dá até para fazer mais, retirar a identacao, espacos a toa com regexp, compactacao gzip…. Mas o código-fonte é preservado. O melhor dos dos mundos 🙂

    9. Mauro George | 14/nov/2008 às 10:02

      Oi Bruno,

      Concordo com vc e com o Diego como comentei lá no tableless, para sites pequenos identar ou não, não causa problemas, sempre seguindo padrões em caso de ter muitas pessoas trabalhando no mesmo arquivo, agora quando o caso ser de grandes projetos ae vale escrever em uma linha, e também acho ser questão de costume, e grandes projetos 1kb deve contar muito com vários pageviews, trafego etc…

      abraço

    10. @Leonardo – eu postei sobre isso também ano passado, postei ateh o link no post. Dei algumas dicas de como compactar e tudo mais. Na época não deu mta repercussão, mas dessa vez foi 🙂

      @Tiago – sim tiago, concordo, mas estando na Globo.com, eh bom manter um padrão, pois senão acaba virando um carnaval 😉 E vc sabe mto bem tanto como eu o quanto que foda a globo.com nesse aspecto de compactar, gzip, etc, etc.

      @Henrique – depende henrique. pode ser bem tranquilo se vc tiver controle sobre os ambientes. Mas quando vc tem mta burocracia por trás, dificulta. E frameworks JS geralmente os cores não são modificados e sim criados plugins, etc.

      @Marcelo – entendo marcelo, mas ainda sim eu prefiro estar com isso em minhas mãos, do que depender de outras tecnologias, que podem, as vezes, nao funcionar 😉

      @Mauro – exatamente Mauro. E como eu disse, se vc jah faz pra sites grandes, pq nao fazer para pequenos? O ganho eh menor soh por causa dos acessos, mas qq ganho pra mim eh válido 😉

    11. Eu acho que compactar é sempre válido. Se a gente pode melhorar a experiência do usuário (pensando que ele pode esperar alguns segundos (ou até milissegundos) a menos), melhor pra todo mundo. É claro que para sites grandes é mais que obrigação, eu diria. Mas para sites pequenos também.
      Agora, se o código vai ficar feio ou não, também pouco importa. Basta que no computador de desenvolvimento a gente tenha o código “bonitinho”, todo identado e tal, e quando fizermos a publicação para o ambiente de produção, aí sim roda o minify e os caraio…

    12. kra, é questão de costume..
      Comecei a compactar o css, na primeiro me perdi todo e tive q reorganizar.
      Do segundo em diante já fiz sem problemas. Agora só uso assim, fica muito melhor pra ler na tela. Como disse @Danilo, “evita Page Down / Page Up”. Ter q ficar navegando p/ um código enorme é um saco.

      Abraços

    13. Opa Bruno,

      Trabalho com meus css’s desta forma a mais de 2 anos. Ja me acostumei tanto que quando vejo um que esta “todo certinho” eu vou alterando…hehehe.

      Não concordo que seja bizarro, é somente mais uma forma de trabalhar entre tantas outras existentes no mundo da programação.

      Grande abraço

    14. Eu usava da mesma forma que o Dulcetti mesmo sem saber que ele usava e até mesmo sem antes ter trabalhado com site grandes. Simplesmente por hábito e costume de entender melhor o código daquela forma.
      E posso garantir que é simplesmente costume mesmo… hábito na hora de codificar. Como alguém já falou aqui.. eu, às vezes, até paro e tiro os espaços que ficaram.

      Na verdade, Bruno, pode não ter dado muitas discussões aqui no blog mas lembro que na Faculdade [Fac. Marista, em Recife] onde estudava isso foi até tema de discussão de mesa redonda. =]

      []’s

    15. Eu compactei o estilo do meu blog para uma linha e a diferença foi absurda. Concordo com o Dulça. Acho que sites ou blogs com arquivos CSS longos, é bastante interessante e viável essa compactação.

      []´s

      Felipe Cardozo

    16. […] Compactar meu CSS? Eu faço, mas se você não faz, tanto faz. Ou não. […]

    17. Eu acostumei escrever o css em uma linha também, no começo achava bizarro, mas hoje estou acostumado e além de citar algum ganho de banda, eu afirmo que economizo tempo pois digito de uma vez só o código, isso que eu acho o máximo! Não precisa ficar apertando enter e tab a todo tempo.
      Tá, mas quando preciso fazer alguma alteração, fica mais complicado encontrar o lugar certo? Nada, eu encontro rapidão, costume.

    18. Usar compactação feita pelo webserver não teria um efeito melhor?
      Você escreve o CSS da forma que melhor convier, mais legível, e deixa isso a cargo do webserver e browser, já que o http tem suporte a compactação gzip…
      Falei disso aqui: http://www.andafter.org/blogs/odesenvolvedor/publicacoes/diminuindo-o-consumo-de-banda-com-html-css-e-javascript_674.html

      Abraço! E parabéns pelo blog

    19. hey! o link pra ‘aprovação’ do Elcio é em resposta a um assunto relacionado a cerveja!!! hahahahahahaha
      http://twitter.com/elcio/statuses/1000703699 > “in reply to dulcetti” > http://twitter.com/dulcetti/status/1000677319

    20. Eu sou mais a favor de ter uma versão de debug, escrita de forma “didática” (com boa formatação e comentários onde for necessário) e uma versão de produção (compactada de uma forma automatizada, através de programas como o YUICompressor). Isso vale para CSS e Javascript. E por fim, ativar sempre o gzip, trabalhando bem com cache para evitar gargalos no desempenho do servidor.

    21. Uma leitura boa para quem quer ganhar performace, é o Alta Performace em Web Site – Steve Souders … nele se fala de varias técninas para maximar o cache de arquivos, compactação javascript….
      Tem um projeto grande que trabalhei recentimente, que tivemos que deixar uma versão de produção e outra de desenvolvimento… mas colocando um script php para compactar já seria uma boa…
      Recomendo fortemente o livro.

    22. Eu compacto e sempre me dei muito bem com isso mas acho que esta é uma técnica para quem não é preguiçoso e usa o Dreamweaver para escrever CSS porque o Dream coloca indentado. Mas na minha maneira de escrever eu faço o seguinte: Escrevo na mesma linha todas as propriedades do mesmo tipo como position width, heigth e na outra linha, font-family, color, font-size e tal… sempre me mei muito bem assim mas respeito todas as maneiras de escrever.

      []’s e visitem meu site…

    23. Ótimo conteúdo

    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