Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

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

    » Como você escreve seus arquivos CSS? Parte 2

    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 :D.

    Ferramentas compactadoras de CSS’s

    Alguns leitores postaram sugestões, opiniões e links interessantes, que postarei aqui alguns dos links citados.

    Falaram sobre escrever como quiser o CSS e depois passar numa ferramenta, otimizador, online para ele fazer a compactação, redução do código, para depois subir e deixá-lo online.

    É uma boa alternativa, porém ainda prefiro fazer na mão mesmo, pois podemos ficar meio que dependentes de tal ferramenta, e se por acaso ela não funcionar mais, não existir mais, estamos perdidos. Ok, sem exageros, mas causa dependência e eu não gosto muito disso.

    Segue a lista de links:

    Dei uma olhada muito rápida nos links e o q mais me agradou foi o Clean CSS, pelas opções, variações de compactação, etc. Mas não cheguei a testar nenhum. Mais pra frente, de repente :P, eu testo :D.

    Retornando a escrita CSS… 😀

    Bom, retornando ao assunto do Post, vou comentar sobre mais alguns pontos de escrita dos CSS’s. Eu batizarei um de hierarquia de elementos e o outro de referência de tags.

    Hierarquia de Elementos

    Quando falo de hierarquia de elementos no CSS, estou falando de elementos filhos sendo hierarquizados dentro dos arquivos CSS’s. Eu, na grande maioria das vezes, não faço hierarquia, utilizando somente a div correspondente.

    Explicarei melhor agora, porque está meio confuso. Veja o código abaixo:
    #geral #conteudo #minhaDiv {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    #geral #conteudo #minhaDiv2 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    #geral #conteudo #minhaDiv3 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}

    Olhando o código, se vc possui o mínimo de conhecimento em CSS, vc percebe que os ID’s #minhaDiv, #minhaDiv2 e #minhaDiv3 são “filhas” do ID #conteudo que é filho do ID #geral certo?

    Geralmente eu não faço desta forma, eu economizo mais. Usando o código deste exemplo, ficaria desta forma:
    #minhaDiv {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    #minhaDiv2 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    #minhaDiv3 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}

    Economizei bastante, pois retirei o “#geral #conteudo ” das linhas.

    Existem pontos fortes e fracos na utilização dessa hierarquia. O Ponto positivo, na minha opinião é que você limita o ID a funcionar SOMENTE quando ele fizer parte dessa hierarquia. E, às vezes, isso não chega nem a ser uma vantagem, pois você possa precisar deste mesmo comportamento em outra hierarquia, mas não funcionará por causa do “#geral #conteudo “.

    Muitos desenvolvedores utilizam a forma hierárquica, pois fica fácil de saber onde aquele elemento está, é filho de quem, etc. Mas se você trabalhar com CSS corretamente, separando seus arquivos CSS’s, com nomenclaturas corretas, você não precisará se preocupar com esses detalhes.

    Referência de Tags

    Este é simples e muitos usam este método. Mostrarei abaixo um exemplo para depois explicar:
    div#minhaDiv {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    div#minhaDiv span.minhaClasse {color:#666;}
    div#minhaDiv a.verMais {text-decoration:none;}

    Agora uma breve explicação sobre cada linha:

    › div#minhaDiv

    A div que tiver o identificador #minhaDiv, receberá todas as propriedades setadas.

    › div#minhaDiv span.minhaClasse

    O span que receber a classe minhaClasse e for “filho” da div que tiver o identificador #minhaDiv, receberá todas as propriedades setadas.

    › div#minhaDiv a.verMais

    O link que receber a classe verMais e for “filho” da div que tiver o identificador #minhaDiv, receberá todas as propriedades setadas.

    » Pontos Fortes e Fracos

    A utilização desta forma limita as propriedades a somente estas tags e pronto. Caso no HTML seja modificada alguma estrutura, o funcionamento pode ser danificado, por exemplo, de span, vire div, estas propriedades não funcionarão mais.

    Eu prefiro utilizar sem a referência de tags, a não ser que você tenha múltiplas tags utilizando a mesma classe.

    Finalizando…

    Bom, essa segunda parte é bem menor que a primeira e é assim que eu tentarei fazer sempre, escrever menos, mais direto. Apesar que sou muito detalhista e mastigo bem os tutoriais, artigos, etc. Acho que é melhor assim, mas é preocupante também quando fica grande, cansativo, etc. Mas eu vou treinando para isso não acontecer :D.

    Aquele abraço e valew a contribuição de todos.

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

    [ 23/abr/2007 às 16:14hrs ] [ Por Bruno Dulcetti ] Comentários 6 Comentários |

    Categorias: Artigos,CSS,Webstandards

    » 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

    
    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