Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

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

    » Como você escreve seus arquivos CSS?

    Fala pessoal. Ressurgindo das cinzas como uma Fênix, aqui estou eu novamente, para encher vossos sacos 😀 e saber de vocês e mostrar como eu escrevo meus arquivos CSS‘s.

    Mas por que isso Bruno?

    Simples. Antigamente eu pensava que não tinha diferença na escrita dos CSS’s que eu criava, etc. E na verdade, no início é sempre assim, pouco damos valor a essas pequenas coisas, esses pequenos detalhes.

    Detalhes que fazem a diferença na sua grande parte. Lembrando que não estou falando da utilização das regras, como, quando e porquê usar tal propriedade CSS. Estou falando da escrita mesmo, como você cria, etc.

    Ainda não entendi direito Bruno. Explica melhor essa parte da escrita do CSS

    Vou mostrar um exemplo de uma forma de escrever, criar um arquivo CSS:

    .minhaClasse {
    	background-color: #CCC;
    	border: 1px solid #FC3;
    	color: #FFF;
    	height: 300px;
    	width: 200px;
    }
    
    .minhaClasse2 {
    	background-color: #CCC;
    	border: 1px solid #FC3;
    	color: #FFF;
    	height: 300px;
    	width: 200px;
    }
    
    .minhaClasse3 {
    	background-color: #CCC;
    	border: 1px solid #FC3;
    	color: #FFF;
    	height: 300px;
    	width: 200px;
    }
    

    Peço que não levem em conta que todas as classes estão com as mesmas propriedades. Coloquei mais para não ter que ficar criando, etc. Estou com preguiça e no trabalho, não esqueçam disso 😀

    Legal Bruno. E?

    Perceberam que esta é uma declaração simples de um CSS correto? Imaginem um CSS com 300 linhas de código, parecido com esses que passei agora. Bastante coisa, certo? O arquivo terá muitos ID’s, Classes, declarações para tags, etc.

    Sabemos também que é interessante termos um CSS compacto e leve correto? Com uns 8kb, 10kb no máximo não é verdade?

    Mas muitos não dão tanto valor por meros espaços em branco, coisas que, no início, parecem irrelevante, que geralmente não vão fazer diferença.

    Muitas vezes também por organização no código, entre outros motivos. Creio que quase todos começam assim, criando os códigos bonitinhos, quebrando linha, com indentação, bem organizado.

    Eu mesmo achava horríveis os códigos CSS’s que ficavam tudo em uma linha só, sem espaços, completamente difíceis de serem enxergados, etc. Tinha meio que um preconceito, uma certa dificuldade de aceitar tal forma de criar.

    Verdade Bruno. Mas como você faz seus CSS’s agora?

    Antes de responder essa pergunta, vou explicar porquê mudei minha forma de implementar meus CSS’s.

    › Razão 01 – Tamanho do Site

    Geralmente não pegamos sites gigantes pra fazer, implementar, etc. Pegamos sites pessoais, institucionais, com poucas visitações por mês, etc. Isso ajuda no vício de criar CSS’s mais bonitinhos, arrumados e organizados.

    Mas quando pegamos um projeto grande, algo em torno de milhões de visitas, percebemos a necessidade de melhorias no acesso, leveza do site, entre outras coisas essenciais num Portal.

    › Razão 02 – Visitação ao Site

    Parece que não, mas um CSS com 1kb a menos pode fazer a diferença. Imaginem um Portal como a Globo.com, com milhões de acessos diários. Agora multipliquem esse 1kb a menos com os milhões de acesso ao site. Chegamos num número absurdo de economia de banda, etc.

    › Razão 03 – Quantidade de linhas dos CSS’s

    Diminui absurdamente a quantidade de linhas no CSS. Muitas linhas num CSS não são coisas muito agradáveis, fica difícil de buscar elementos, futuras modificações, etc.

    › Razão 04 – Tamanho total dos CSS’s?

    Sim. Pode ser. Por que não?

    No Videolog, por exemplo, fiz um teste, retirei espaços, tabs, deixando na mesma linha e teve uma redução considerável, pensando em larga escala logicamente. No Videolog temos uns 36kb e pouco de CSS. :O Sim, verdade, projetos grandes necessitam de mais detalhes, principalmente quando temos formulários, grandes variações deles.

    No final, depois das mudanças e economias que fiz, os CSS’s ficaram, no total, com 30kb. Um ganho de mais de 6kb. Parece pouco, depende do ponto de vista, porque o Videolog recebe milhões de visitantes, page views e tudo mais. Imagine o ganho disso, multiplicando por milhões 😉

    Sem esquecer que ainda farei umas otimizações, para não haver chamadas desnecessárias aos CSS’s, por exemplo, páginas que não possuem formulários, não precisam chamar o css “formularios.css”. Algumas mudanças deste tipo ajudam na rapidez e peso da página.

    Interessante. Mas como os seus arquivos CSS estão escritos?

    Mostrarei o exemplo anterior utilizando a forma como estou escrevendo os meus CSS’s:

    .minhaClasse {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    .minhaClasse2 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    .minhaClasse3 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    

    Bem menos linhas concordam? Menos espaços em branco, tabs, etc.

    › Desvantagens

    Como nada é perfeito, temos desvantagens também, mas isso geralmente ocorre no início. É uma questão de adaptação. Meus primeiros três, cinco dias aqui na Globo.com foi chato, difícil e contra minha vontade acostumar com isso. Mas depois, pensando em um dos motivos que citei anteriormente, da parte de milhões de acessos, isso diminui absurdamente a quantidade de banda transferida, etc.

    Vou citar alguns pontos chatos nessa utilização:

    1. Desorganização no primeiro contato;
    2. Um pouco difícil de se encontrar/organizar no início;
    3. Falta de hierarquia, tabulação;
    4. Linhas extensas.

    Por enquanto eu vejo esses pontos fracos, mas caso vocês vejam outros, eu vou analisar e posto aqui também, sem problemas. Vou comentar um pouco mais sobre cada um:

    › Desorganização no primeiro contato

    Com certeza, quem ainda não escreve seus CSS’s desta forma, se assusta. No primeiro contato fica meio bagunça, difícil de enxergar, se localizar, concordo. Mas eu juro, com a prática e costume, fica tudo normal 😀 É como comer comida japonesa com hashi. No início é um desastre, mas depois se acostuma, pega a prática. (eu odeio comida japonesa, foi só mesmo para exemplificar :D)

    › Um pouco difícil de se encontrar/organizar no início

    Quando temos várias linhas, com as propriedades, ficamos meio perdidos no início, enrolados, pois são muitos caracteres, códigos, o que acaba confundindo, isso é fato.

    Em contrapartida, quando temos um css como o mostrado no primeiro exemplo, temos uma organização por blocos com várias linhas e não por linhas com várias propriedades, com isso, não achamos os blocos tão facilmente:

    #conteudo .box {
    	background-color: #CCC;
    	border: 2px solid #000;
    	color: #333;
    	width: 200px;
    }
    
    #conteudo .boxTal {
    	background-color: #000;
    	border: 1px solid #666;
    	color: #FFF;
    	width: 200px;
    }
    

    Percebemos que as duas classes estão contidas, somente, no ID conteúdo. Correto? O prefixo #conteudo afirma isso (isso é básico e espero que todos saibam disso).

    Mas percebam que de cara não é tão fácil perceber isso. Pensamos um pouco, nem que sejam alguns milésimos de segundos a mais (ok, ok… dei uma de Steve Krug agora :D). Mas é a pura verdade. Do segundo modo, temos uma melhora visual da hierarquia das linhas, elementos e propriedades:

    #conteudo .box {background-color:#CCC;border:2px solid #000;color:#333;width:200px;}
    #conteudo .boxTal {background-color:#000;border:1px solid #666;color:#FFF;width:200px;}
    
    #lateral .box {background-color:#CCC;border:2px solid #000;color:#333;width:200px;}
    #lateral .boxTal {background-color:#000;border:1px solid #666;color:#FFF;width:200px;}
    

    Percebam que nas duas linhas o #conteudo está um logo abaixo do outro, o que já afirma serem “filhas” do mesmo bloco quando batemos o olho. O mesmo vale para o prefixo #lateral.

    › Falta de hierarquia, tabulação

    Como já vimos, a tabulação é perdida, com isso, sua hierarquia de propriedades de um elemento. Não estou falando da hierarquia de múltiplos elementos e sim hierarquia de elementos › propriedades, quais propriedades são de quais elementos, etc.

    Os elementos são escritos colados na esquerda, enquanto as propriedades são escritas com uma TAB a mais no código, referenciando que essa propriedade é filha do elemento logo acima.

    › Linhas extensas

    Os elementos quando possuem muitas propriedades, muitas declarações, acaba estendendo a linha demais, ficando meio difícil de acompanhar e invadindo o final da tela, não ficando totalmente visível em alguns casos, sendo obrigado a rolar a barra horizontal para verificar tudo.

    Isso é bem normal, nada tão grave ao meu ver. Mas…

    Legal Bruno. Mas podem existir variações nessa forma de escrita?

    Com certeza. Vou mostrar algumas variações nessa forma de Implementar seus CSS’s. Principalmente na parte de propriedades para multi-elementos.

    Vou listar abaixo algumas variedades, mas fiquem à vontade de sugerirem algumas:

    • Com espaços;
    • Com espaços depois das propriedades;
    • Sem espaços;
    • Multi-elementos na mesma linha;
    • Multi-elementos em mais de uma linha.

    Com espaços nas propriedades do CSS

    Vejamos abaixo:

    .minhaClasse { background-color:#CCC; border:1px solid #FC3; color:#FFF; height:300px; width:200px; }
    

    Algumas pessoas fazem desta forma, principalmente para facilitar na identificação das propriedades, separação. Mas tem um ponto importante também, que é abrir o arquivo no Notepad, e como ele é péssimo nos atalhos dos desenvolvedores, não considerando caracteres especiais, desta forma ajuda e muito.

    Com espaços somente depois das propriedades no CSS

    Vejamos abaixo:

    .minhaClasse {background-color:#CCC; border:1px solid #FC3; color:#FFF; height:300px; width:200px;}
    

    O mesmo que o anterior, mas sem espaços após a { de início e } de final das declarações das propriedades.

    Sem espaços

    Vejamos abaixo:

    .minhaClasse {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    

    A forma que eu utilizo. É um pouco mais complicada de entender, mas é a mais econômica de todas. E como não abro, geralmente, pelo Notepad os CSS’s, não tenho problemas com ele.

    Multi-elementos na mesma linha

    Vejamos abaixo:

    .minhaClasse, .minhaClasse2, .minhaClasse3 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    

    Caindo agora pra parte de declarações para múltiplos elementos, temos este, que é o utilizado geralmente. Já utilizei bastante, principalmente quando temos poucas propriedades na declaração, mas quando é ao contrário, temos o problema da linha ficar muito comprida, o que eu não acho legal.

    Fora que, às vezes, pode parecer que os múltiplos elementos é um só.

    Multi-elementos em mais de uma linha

    Vejamos abaixo:

    .minhaClasse,
    .minhaClasse2,
    .minhaClasse3 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    

    A forma que utilizo hoje em dia. Acho mais organizada e mais fácil de se localizar.

    Conclusões…

    Fica claro que cada Projeto é um Projeto, cada Profissional é um Profissional. Apenas mostrei aqui alguns exemplos, minha opinião sobre e recomendações, fiquem à vontade para decidirem e discordarem. Estamos ae pra isso 😀

    Acho que em projetos pessoais, como portfólio, sites institucionais, de pouco tráfego, não seja necessário. Assim como um profissional que não esteja numa grande empresa, participando de um Mega Projeto Web, talvez não seja prioridade fazer das formas que citei aqui. Mas acho que pelo menos já deixa o desenvolvedor preparado para Projetos grandes, com muito tráfego, ou até mesmo nos sites e sub-sites da empresa onde trabalhará mais pra frente.

    Finalizando (Ufa :D)

    Fico por aqui, desculpem o tamanho do artigo. Eu até iria dividir em partes, mas não achei legal fazer desta forma. Da próxima vez eu planejo tudo direitinho, para deixar separado, organizado blz?

    Aquele abraço a todos e eu tentarei ser mais ativo no Blog.

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

    [ 20/abr/2007 às 18:19hrs ] [ Por Bruno Dulcetti ] Comentários 20 Comentários |

    Categorias: Artigos,CSS,Webstandards

    20 Comentários no Post "Como você escreve seus arquivos CSS?"

    Postar no Rec 6

    1. De qualquer forma é outra forma de pensar.

      Concordo que do ‘jeito bonitinho’ fica meio difícil de achar o que faz parte da mesma coisa, acabo apelando para o Ctrl+F.

      Valeu pela dica!

    2. Com certeza Camilo. Diria outras formas 😀

      O “jeito bonitinho” eh mais organizado em partes, mas cai nessa parte que falei e vc reforçou… e eh tudo costume…

      abraços e vlw ae…

    3. Escrevi sobre isso no meu site, recentemente… Muita gente ainda descorda desse método de escrita em somente uma linha. Eu acho mais fácil.

      No começo é complicado, mas depois se torna muito prático.

    4. Ae Bruno, este otimizador online aqui é 10 pra organizar no nível que você quiser:
      http://www.cleancss.com/

      Se não tiver gostado, testa outros também:
      http://www.cssoptimiser.com/
      http://flumpcakes.co.uk/css/optimiser/

      Mas o primeiro é o melhor.

    5. Opa boa matéria Bruno,

      Bem não seria o caso de usar uma ferramenta que tire os espaços ?
      você deixa tudo “bonitinho” e na hora de publicar gera o arquivo sem os espaços e tudo na mesma linha.
      como algumas pessoas fazem com javascript. como por exemplo o YUI tem uma versão “debug” e uma min, e a diferença de k´s é muita.

      bem alguém conhece algum programinha bom que tire esses espaços ?

    6. Uma ótima metodologia de escrita Bruno, facilita mesmo a vida.

      achei uma ferramenta interessante de compressão:
      http://www.lotterypost.com/css-compress.asp

    7. […] Dando continuidade ao post anterior, venho aqui mostrar alguns detalhes que acabei não mostrando na primeira parte. É sempre assim, quando queremos falar sobre algo, quando temos a absoluta certeza que está concluído, vemos, mais tarde, que ainda faltava algo . […]

    8. Leonardo L Procópio | 23/abr/2007 às 16:44

      Ai Chan, tem um editor q eu uso (e por sinal é o bicho) que tem uma opção de compactar o codigo sem atrapalhar o funcionamento da pagina. Ele retira a quebra de linha, os espaços. PSPad é o nome da criança!

      Muitos puglins estão sendo criados assim, pois caem pela metade o tamanho!!!
      Grande abraço!
      Artigo Show em brother!

    9. cristiane | 28/abr/2007 às 10:23

      ola.. desculpa.. recebi um e-mail com seu endereço..
      eu t conheço??
      não me recordo.. me chemo cristiane moro em curitiba-Pr

      SDS

    10. Olá Bruno parabéns pela matéria!

      Realmente quando iniciamos o aprendizado com CSS não nos importamos com a formatação, mas quando se trata de grandes portais 1KB faz diferença.
      De qualquer forma já é bom nos acostumarmos a fazer desta forma, pois tudo é uma questão de hábito.

      Sucessos,

      Rinaldi Fonseca
      http://www.grifemidia.com.br

    11. Fala Bruno! Entao eu prefiro especificar o caminho absolutodas cosias… acho qeu fica mais facil e mais dedutivo…. Além de que eu defino as propriedades somente para o elemento que eu quero 😉 Voce ve algum contra nessa pratica?
      Flw abraço.

    12. ola Bruno!
      bom artigo, bem útil mesmo!

      só tenho uma coisa pra perguntar / discutir: levando em consideração que o CSS só é carregado 1 vez por usuário, ficando em cache, desde que p usuário nao tenha desabilitado, essa “preocupação toda” com o tamanho do arquivo não é um pouco exagerada? concordo plenamente que é uma ultilização melhor da banda do seu site para outras coisas, mas o arquivo CSS não é o maior problema de um portal

      abraços, continue assim!

    13. […] 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. […]

    14. […] Neste artigo, não tentarei apresentar modelos de codificação CSS, sugestões de como se deve posicionar as chaves, e como deve ser a identação dos textos. Estou focando nas regras, propriamente ditas, e não em como cada um prefere organizar seu código. Para tal, o Bruno Dulcetti já tratou muito bem, em seu blog. […]

    15. Não sou design, mas programador. Então posso está sendo parcial na minha questão.
      Os servidores e protocolo(s) de internet normalmente prevêm métodos de compactação de dados. Os textos são os mais beneficiados dessa técnica. Atingindo quase sempre 50% de compactação.

      Creio que perder a hierarquia da documentação em prol de velocidade, neste caso, possa ser desnecessário.

      Não sei se usar css com este formato linear ajudaria. Eu normalmente programo em outras linguagens usando o método “certinho”, mas se isso facilitar no caso do css… (vou testar : ) )

    16. […] Neste artigo, não tentarei apresentar modelos de codificação CSS, sugestões de como se deve posicionar as chaves, e como deve ser a identação dos textos. Estou focando nas regras, propriamente ditas, e não em como cada um prefere organizar seu código. Para tal, o Bruno Dulcetti já tratou muito bem, em seu blog. […]

    17. Existem programas para depois que o código esta pronto remover os espaços.
      Já escrever o css dessa forma é inválido e apenas aumenta o trabalho. Quando o arquivo estiver pronto basta fazer um backup dele identado e depois remover os espaços e quebras de linha de todo o arquivo.

    18. Acho que isso é um pouco desnecessário, levando em consideração que existem outros tanto arquivos bem maiores que o CSS.
      Ao invés de comprimir o CSS, eu prefiro comprimir o código JavaScript no site http://www.bananascript.com. Neste caso a compressão se faz necessária.
      Escrever as propriedades e valores CSS tudo na mesma linha, deixa tudo bagunçado, pra achar alguma coisa depois só no CTRL+F.

    19. […] 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 […]

    20. Parabéns, suas dicas me ajudaram bastante, a principio até não concordei, mais pensando melhor você tem razão!
      Muito obrigado pela sua boa vontade, continue assim…
      Abraço.

    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