CSS em cada pagina

[RodrigoGuimarães 0]

Estou com uma duvida muito simples de ser respondida por alguem mais esperientes ela é a seguinte :

 

é aconcelhavel que eu tenha uma folha css por pagina ou uma pro site inteiro(um site com umas 30 paginas diferente só que varias parecidas como barra lateral e a barra de cima). Oque me aoconcelham ?

[wdc_black_ 0]

amigo, pro usuário final tanto faz hehe

mas pra organização do código e para melhor localização de erros e etc.. eu acredito que seja melhor colocar separado.

mas sempre tente reaproveitar o código, sem criar funcoes duplicadas ;)

 

abraço

[João Prado 64]

Crie uma forma de organizar seus códigos.

 

Se a estrutura do site for padrão em todas as páginas, utilize apenas um arquivo css para a estrutura do site. Se o design de determinados elementos forem padrões, como por exemplo, menu, barra lateral, etc. utilize uma folha de estilos padrão para estes itens, e assim por diante.

 

 

Isto com certeza irá melhorar o entendimento do seu código e facilitar a implementação, sem contar que no caso de ocorrer algum erro fica mais fácil procurar por ele :thumbsup:

[William Bruno 1501]

aconselho você a se organizar no desenvolvimento, e devolver para o cliente um unico arquivo, para minimizar as resolucoes de DNS q o browser dele vai ter q fazer.

[Bruno Augusto 417]

Apesar de já ter sido dito ao longo do tópico, acho que não ficou bem claro.

 

Durante o desenvolvimento, assim como na programação que você faz / fará do lado servidor (PHP, ASP...) você deve manter um nível de organização de arquivos e conteúdo por arquivo, com CSS e JavaScript não é diferente.

 

Você pode desenvolver o estilo visual do seu site e estruturar as regras CSS em diversos arquivos, cada um com referência à uma parte em particular. Ex:

 

Para a estrutura, structure.css

 

Para a navegação, navigation.css

 

Para os elementos de formulário, forms.css

 

E assim por diante.

 

Todos esse arquivos devem ser indentados e muito bem comentados para facilitar o SEU trabalho, isto é, se você fez tudo, testou em diferentes browser mas, de repente, um browser numa versão diferente daquela que você testou renderizou de foorma ligeiramente inesperada, fica mais fácil localizar tal elemento numa estrutura legível doque num amontoada de texto numa linha só.

 

Porpem, o navegador não vai LER o seu código, vai INTERPRETAR, logo, para ele é indiferente:

 

.class {
   background-color: #E0E0E0;
}

Ou:

class{background-color: #E0E0E0;}

Mas para que o browser INTERPRETE, o CSS tem de ser baixado pelo usuário. Um CSS grande, indentado e comentado tem em média 70kb. Agora imagina isso mil vezes, de mil usuários diferentes. :o

 

Agora, se você juntar tudo num único arquivo, remover espaços, comentários e até mesmo encurtar propriedades:

 

.class {
   font: 15px arial;
}

Ao invés de:

 

.class {
   font-family: arial;
   font-size: 15px;
}

O arquivo ficará sensivelmente menor, normalmente em torno de 30kb. Muito melhor não?

 

E aqinda existem técnicas que aceleram ainda mais o carregamento, uma delas seria carregar o CSS através de um URL diferente da do domínio acessado.

 

Provavelmente você já deve ter visto sites que carregam algo como static.dominio.com ou cdn.dominio.com e etc.

 

Sem contar os "truques", que você faz do lado servidor, como compressão GZIP, que diminui ainda mais aqueles 30kb que chegamos ou mesmo aumentar a validade do cache do arquivo no navegador.

[RodrigoGuimarães 0]

Eu estava lendo oque vocês me disserem e resolvi colocar os estilos em ordem alfabetica, assim se algum problema ocorrer fica facil de localizar, exemplo:

Barra lateral ta maior é só ir no codigo e ir na letra b, e achar .barralateral e tambem resolvi a principio criar apenas um arquivo se eu perceber que esta ficando muito grande eu reparto.

 

Muito obrigado pela ajuda.

[Bergs 53]

Essa dúvida me faz pensar que você está querendo criar css não para um site, mas para vários sites, se as mudanças são tão bruscas como você fala certamente você não esta pensando na unidade do site, isso é claro observando pelo design. um unico arquivo e compactado é a melhor prática, nem de longe o css é o maior problema se esse é o caso indagado por Bruno Augusto, pois o tamanho das imagens o uso de flash são os maiores vilões para o htmler desavisado.

[Bruno Augusto 417]

Eu estava lendo oque vocês me disserem e resolvi colocar os estilos em ordem alfabetica, assim se algum problema ocorrer fica facil de localizar, exemplo:

Barra lateral ta maior é só ir no codigo e ir na letra b, e achar .barralateral e tambem resolvi a principio criar apenas um arquivo se eu perceber que esta ficando muito grande eu reparto.

 

Muito obrigado pela ajuda.

Existe um artigo originalmente publicado pela SmashingMagazine chamado 70 Expert Ideas for better CSS Coding que foi traduzido pelo Maujor

 

São dicas valiosas, mas essa que você citou não faz parte do conjunto. Não que você não possa ordenar as regras alfabeticamente, mas se você seguir a maioria dessas dicas você não vai precisar disso.

 

Veja uma estrutura como essa, por exemplo:

 

<ul id="navigation">
   <li><a href="home.html" class="active">Home</a></li>
   <li><a href="empresa.html">Empresa</a></li>
   <li><a href="contato.html">Contato</a></li>
</ul>

Na fluência normal do código, teria o CSS como abaixo:

 

ul#navigation {
   // Regras Gerais do Menu
}

   ul#navigation li {
       // Regras para os itens da navegação
   }

   ul#navigation li a {
       // Regras para os links inativos
   }

       ul#navigation li a.active {
           // Regras para o link ativo
       }

Agora se fosse como disse, alfabeticamente, poderia acabar saindo algo assim:

 

li a.active {}

#navigation {}

Poderia-se acabar "sacrificando" a definição UL e a indentação cumulativa para ordenar.

 

Existe uma ordenação, mas ela não faz sentido pois a definição do menu é mais importante do que o estilo do link, afinal, por exemplo, é nele que vai a regra que faz a lista ficar horizontal.

 

Ah! Mas isso, eu ajusto na hora, se fizer mais sentido de um jeito ou de outro...

 

Só que daí, você mesmo acaba confuso. Você crente que vai achar o que procura pela ordem alfabetica e está por hierarquia, ou vice-versa.

 

O navegador não liga, mas você pode perder um tempinho.

 

Essa dúvida me faz pensar que você está querendo criar css não para um site, mas para vários sites, se as mudanças são tão bruscas como você fala certamente você não esta pensando na unidade do site, isso é claro observando pelo design. um unico arquivo e compactado é a melhor prática, nem de longe o css é o maior problema se esse é o caso indagado por Bruno Augusto, pois o tamanho das imagens o uso de flash são os maiores vilões para o htmler desavisado.

Não sei se entendi direito sua mensagem, ficou meio confusa. :P

 

Mas sim, nem sempre o CSS é o maior vilão. JavaScript redundantes ou mal escritos também.

 

Mas performance no lado cliente é algo que envolve várias técnicas, desde as já citadas, que melhoram o carregamento dos textos em geral que serão interpretados como scripts até às imagens que podem passar por serviços online como Yahoo Smush It! que "secam" elas sem perder a qualidade.

 

E há ainda o uso de Sprites...

[KMRodrigo 1]

cara eu crio um CSS padrão, um para documentos "folhaImpressao.css"

no padrão eu jogo os cabeçalhos e rodapés e etc.

Se uma página vai ter layout mudado em uma coisa ou outra eu coloco nesse mesmo Css.

 

#main{}

 

#mainCotacao{}

 

#rodape{}

 

#rodapePropaganda{}

 

mas se tiver q mudar muitas tags como body, font, table, inputs e etc ai tem q criar outro pq se importar um padra.css ele vai ter sempre o mesmo body, font etc.

 

Eu evito criar um monte de arquivos o máximo possivel. Ai o padrao.css acaba ficando grande mais nada que bons comentarios não resolvam.

[Bergs 53]

Não sei se entendi direito sua mensagem, ficou meio confusa. :P (Bruno Augusto)

 

A estrutura de um site bem projetado não muda muito, nem a identidade (único estilo para as páginas), então não existe porque fazer um css para cada página, seria mais compreensivo fazer varios css como já citado, um para a navegação, outro para todas as definições de texto e etc.

 

A visão que quiz passar a qual você parece não ter codificado é porque você está ligado muito ao HTMLER visão apenas dos códigos, quando se pensa como designer ou webdesigner o escopo e controle do trabalho assume outros contextos, entende?

[Bruno Augusto 417]

Ahhhh! Agora ficou mais claro.

 

Porém eu penso diferente. Da mesma forma que o Designer tem de entender o mínimo de programação,Frontend ou Backend, o Programador tem de entender o mínimo de Design.

 

Veja, se o Programador montou o layout com aquilo que o Designer passou e achou lento, se não tiver noção alguma de design pode, eventualmente, não imaginar que as imagens são o problema.

 

Vai até trabalhar sobre elas, mas aplicando seus conhecimentos de programador, como talvez espalhando diferentes grupos de imagens em CDN's diferentes, ou enxugar, comprimir, cachear e sei lá mais o que o próprio código para tentar ganhar um pouco onde, até então, está se perdendo sem o conhecimento dele.

 

Agora, se o Programador entende um pouquinho de Design, sabe por exemplo que uma imagem muito colorida pesa um pouco mais que outras com menos cores ou ainda sabe "enxergar" quando uma determinada imagem está pesada demais para a funcionalidade dela.

 

E vai falar com o Designer. Até mesmo, talvez para demonstrar algumas técnicas de programação que pode fazer uma imagem pequenina e inofensiva fazer o mesmo que outra grandona, como por exemplo usando background-repeat.

 

O Designer não precisa saber disso, mas se soubesse não teria errado à esse ponto.

 

Mas se ele, Designer, não souber o mínimo de programação, seja Backend ou Frontend, não vai entender lhufas do que Programador tá falando. E se eles não conversarem pelo menos alguma coisa na mesma língua, a lentidão vai continuar.

[Bergs 53]

Perceba uma coisa, você está externando a questão para ares que não estão no escopo da discussão. Primeiramente falavasse de CSS, até onde entendo HTML, CSS e rasteiro Javascript são função ainda do Designer mais precisamente do Web Designer, não necessitando o programador saber o que o designer sabe e vice-versa

 

Porém eu penso diferente. Da mesma forma que o Designer tem de entender o mínimo de programação,Frontend ou Backend, o Programador tem de entender o mínimo de Design

não necessáriamente.

 

Veja, se o Programador montou o layout com aquilo que o Designer passou e achou lento, se não tiver noção alguma de design pode, eventualmente, não imaginar que as imagens são o problema.

quem monta o layout é o webdesigner, o programador implementa.

 

Vai até trabalhar sobre elas, mas aplicando seus conhecimentos de programador, como talvez espalhando diferentes grupos de imagens em CDN's diferentes, ou enxugar, comprimir, cachear e sei lá mais o que o próprio código para tentar ganhar um pouco onde, até então, está se perdendo sem o conhecimento dele

onde está o designer nesse momento, existe uma equipe aqui?

 

E vai falar com o Designer. Até mesmo, talvez para demonstrar algumas técnicas de programação que pode fazer uma imagem pequenina e inofensiva fazer o mesmo que outra grandona, como por exemplo usando background-repeat.

em qué sentido? fazer o mesmo que a outra? preencher o fundo? o designer não sabe o que é background-repeat? mas logo uma elemento defull das css.

 

O Designer não precisa saber disso, mas se soubesse não teria errado à esse ponto.

você acha que HTML é linguagem de programação? está enganado...

 

Mas se ele, Designer, não souber o mínimo de programação, seja Backend ou Frontend, não vai entender lhufas do que Programador tá falando. E se eles não conversarem pelo menos alguma coisa na mesma língua, a lentidão vai continuar.

se for lentidão do carregamento da página, descordo completamente, a lentidão acontece nesse sentido no andamento do projeto.