[Resolvido] CSS com 1,600 linhas

[Guilherme Oderdenge 42]

Olá!

Senhores, meu CSS está com 1,600 linhas. Organizado, mas com 1,600.

 

Isso é errado? Devo separar em mais arquivos? Devo "resumir" essas 1,600 linhas?

 

Estou vendo o que é dispensável e o que eu posso tirar e estou tentando diminuir, mas duvido conseguir passar das 1,500 linhas.

 

Para todas as respostas possíveis, tentem argumentar, preciso entender melhor.

 

Abraços! ;)

[crf_h0m3r 5]

Eu sempre tento resumir o código em uma linha, ex:

body {font:15px Verdana, Geneva, sans-serif; background:url(img/bg-body.png) repeat fixed;}

 

Acho que pesa menos, do que a identação ser organizada ao estilo 'dando enter'.

[Guilherme Oderdenge 42]

Boa tarde, crf_h0m3r.

 

Valeu a dica, brother. Mas vamos combinar que utilizar uma única linha por elemento é bastante desorganizado, né? Quero evitar fazer isso, só faço mesmo quando o elemento tem apenas um atributo (o que é raaaaaaaaaaaaaaaaro).

 

Me em suma, ter 1.600 linhas em um único arquivo é incorreto? Aliás, existe algum problema em ter 1.600 linhas?

 

Abraços!

[crf_h0m3r 5]

Rapaz, eu acho mais organizado, porque assim consigo separar:

 

#menu {...}

#menu a {...}

#menu ul {...}

#menu ul li {...}

 

Mas acho que vai de cada um né, já usei da outra maneira muitas vezes, e essa, em uma linha só, estou tentando me acostumar com ela. No começo também achei desorganizada.. por ver os elementos ali, lado a lado, com muita proximidade.

 

Enfim, não acho um código com 1.600 linhas errado -apesar de nunca ter visto algo tão grande-. Vai de acordo do que você tem na(s) página(s), claro que há uma preocupação do carregamento, do peso do arquivo, mas incorreto eu não acho.

 

É sempre bom tentar resumir ao máximo né, deixar só o essencial. Tá aí minha opinião ^_^

[Tribb 0]

Tb gosto de escrever tudo em 1 linha

#div { ... }

Muito mais organizado.

Eu fazia normal. mas era um saco ficar encontrando o que eu queria.

De qualquer forma vai de cada 1.

 

O q importa mesmo é..

Quanto ta pesando o arquivo .css?

Você ta conseguindo encontrar os elementos?

 

Veja: http://www.csscompressor.com/

[Shison 0]

Acho que quebra de linha nem pesa assim não rapaz, são apenas 2 caracteres, ou apenas 1 se estiver usando terminação Linux. Deve dar no mesmo que separar por um espaço em branco.

 

Tens de ver é oq já citaram, o tamanho do arquivo.

 

Você pode procurar otimizar coisas repetidas. Tipo:

h1 {
color: blue;
font-weight: bold;
font-size: 14px;
}
h2 {
color: blue;
font-weight: bold;
font-size: 12px;
}
h3 {
color: blue;
font-weight: bold;
font-size: 10px;
}

 

 

você bota:

h1,h2,h3 {
color: blue;
font-weight: bold;
}
h1 {
font-size: 14px;
}
h2 {
font-size: 12px;
}
h3 {
font-size: 10px;
}

[Guilherme Oderdenge 42]

Caras, estou com 30kb de CSS. Não acho que seja muito, mas daqui a pouco pode incomodar.

 

Vendo assim, tenho quase certeza que tem muita coisa inútil, mas à esta altura do campeonato é ruim ter que reescrever.

 

Mas beleza, aos poucos vou refazendo e juro que vou tentar escrever em uma linha - embora eu ache desorganizado.

 

Para todos os efeitos, obrigadão pelas dicas!

 

Um abraço!

[Tribb 0]

Eu escrevo em 1 linha pq eu prefiro. Eu acho mais organizado.. Encontro o que eu quero mais facilmente..

Utilize o link que te passei e veja o tamanho q seu css fica..

Eu acho 30kb coisa pra caramba..

[William Bruno 1501]

Acho desnecessário escrever em uma só linha.

 

Tecnicamente, é ruim para dar manutenção.

Veja, se você quer otimizar teu css, faça um script server-side, que remova espaços e comentários. Pronto.

 

 

códigos devem ser escritos para pessoas.

CSS em uma só linha, não é 'para pessoas'. Numa leitura rápida, eu acho mais complicado de localizar alguns atributos.

tem gente que usa em ordem alfabética. Acho ruim tb, trabalho desnecessário.

 

Se quer otimizar, deixe que algum script faça isso para você.

Não tem nenhum problema de performance ter um arquivo de 1600~2000~3000 linhas.

 

Oque pode te atrapalhar depois, é a hora que você for dar manutenção. Pois podemos ter partes que não são usadas em tal página, e ao você mexer em outra, pode quebrar uma que não precisava. No meu ambiente atual, tenho um arquivo separado para cada especificidade, e depois uma rotina, junta esses arquivos num único, usando a lib do Yahoo para otimizar.

[Bruno Augusto 417]

Tipo, como CSS é "baixado" no cliente, muitas linhas significa maior peso.

 

Durante a faze de desenvolvimento, sem problemas em deixar tudo separadinho, indentado e etc. Mas na hora H você pode remover todos os espaços, comentários e juntar tudo numa linha só.

 

Uma vez usei esse site, que além de fazer a limpeza mencionada do CSS, ainda faz alguns "ajustes" para diminuir ainda mais, como reduzir hexadecimais possíveis (#000000 para #000) ou usar as versões "compactas" das propriedades.

 

Em média, seu CSS fica de 25% a 35% menor.

[_Leandro_ 0]

Essa questão de fato é bem relativa... pois, arquivo css mais pesado precisa de mais tempo para carregar e consome mais banda... arquivos divididos aumentam o número de requisições ao servidor...

 

Pessoalmente entendo que:

1 - Como já mencionado, procure agrupar classes e IDs

EX:

h1, h2, h3, .ttl01, txt01 { color: blue;font-weight: bold; }

h1 {font-size: 14px;}

h2 {font-size: 12px;}

h3 {font-size: 10px;}

 

2 - Outra coisa, como podem ter notado, também prefiro alinhar todos os atributos de cada elemento em uma mesma linha.

 

3 - Outro ponto a ser visto é a padronização do site para poder re-utilizar classes e até mesmo combinar classes.

 

4 - Também temos a unificação de declarações

EX:

ao invés de escrever: .txt{font-size:11px;font-weight:bold;font-family:"Times New Roman",Georgia,Serif;}

podes escrever: .txt{font:11px bold "Times New Roman",Georgia,Serif;}

ou ainda: .box01{padding-top:5px;padding-right:10px;padding-bottom:5px;padding-left:10px;}

podes escrever: .box01{padding:5px 10px 5px 10px;} ou ainda .box01{padding:5px 10px;}

 

 

Aqui tenho várias dicas sobre css: http://www.maisumpixel.com.br/categoria/css

 

 

Espero ter contribuido para a discussão

Leandro Rodeghiero

[Guilherme Oderdenge 42]

Olá!

Senhores, desculpem pela ressuscitação, mas é que vim aqui com um agregado de informações que vocês e outros usuários me passaram.

 

(As estatísticas a seguir é baseada no meu .CSS)

 

Para desenvolvimento:

• Arquivo documentado;
  
• Espaços e quebras de linha onde necessário;
  
• Agregamento de atributos e elementos;
  
• Nada de compressão de CSS;
  
• LINHAS: 1977
  
• PESO: 30,6kb
  

 

Para os usuários:

• Sem documentação;
  
• Todos elementos em uma única linha;
  
• CSS compactado;
  
• Atributos/elementos agregados;
  
• LINHAS: 945
  
• PESO: 19,7kb
  

 

Conclusão:

Para trabalhar, vou utilizar o CSS do meu jeito. Quando for upar, faço a compressão e voilà!

 

Obrigadíssimo pelas dicas!

 

Abraço! ;)