Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

paulo_roll

[Resolvido] Como desenvolver melhor em CSS?

Por , em Desenvolvimento frontend

Recommended Posts

paulo_roll    0

paulo_roll
Postado

Boa tarde pessoal!

Fiz um site todo em CSS, mas apesar de o código estar organizado, acho que não estou

conseguindo pegar a lógica de fazer com que o CSS altere o estilo do site inteiro de forma

rápida. Tenho as seguintes páginas:

 

Home

Quem somos

Portfólio

Contato

Fale conosco

 

e o código ficou de uma maneira que não posso alterar o estilo do site de uma vez, só posso alterar

página por página. Vejam o código CSS. Alguém pode me auxiliar?

 

/*HTML Padrão*/

*{margin:0; padding:0; list-style:none; text-decoration:none; border:none;}
body{background:url(../img/bg.png) repeat-x; text-align: center;}
input{border:1px solid #7f9db9;}
textarea{border:1px solid #7f9db9;}
/*Layout*/
#container{width:760px; text-align:left; margin:0 auto;}
#header{width:760px; height:111px;}
#menuLink{background:#003399; width:760px; height:20px; float:left;  padding-top:4px;}
#content{width:760px; padding-top:25px; padding-left:0px; padding-right:0px; padding-bottom:5px; float:left;}
#contentAbout{background:url(../img/bg_about.png) no-repeat; height:320px; width:760px; padding-top:25px; padding-left:0px; padding-right:0px; padding-bottom:5px; float:left;}
#contentPort{background:#000066; width:760px; padding-top:25px; padding-left:0px; padding-right:0px; padding-bottom:0px; float:left;}
#downPanel{width:760px; height:180px; background:url(../img/bg_bloco_index.png); float:left;}
#rodape{background:#000066; width:750px; padding:5px; float:left;}
/*Classes*/
.menuLink{text-align:right; color:#FFFFFF; font-size:9px;}
.menuLink li{display:inline;}
.menuLink li a{font:10px verdana; font-weight:bold; color:#FFFFFF;}
.menuLink li a:hover{color:#CCCCCC; text-decoration:none;}
.contentAbout p{font:11px verdana; color:#666666; padding-left:15px; padding-top:10px;}
.contentAbout img{padding-right:5px;}
.contentAbout h1{font:10px verdana; font-weight:bold; color:#0066CC; padding-left:5px; padding-top:15px;}
.contentPort{float:left; width:760px;  border-bottom:1px dashed #CCCCCC; padding-bottom:10px;}
.contentPort p{font:11px verdana; color:#CCCCCC; padding-left:15px; padding-top:10px;}
.contentPort img{padding-right:5px;}
.contentPort h1{font:10px verdana; font-weight:bold; color:#0066CC; padding-left:5px; padding-top:10px;}
.contentContact{font:10px verdana; color:#000000; background:#FFCC66; width:250px; height:150px; padding-top:25px;}
.textTresLeft{padding:5px; padding-top:25px; border-right:#CCCCCC dashed 1px; width:240px; height:150px; float:left;}
.textTresLeft p{font:10px verdana; color:#CCCCCC;}
.textTresLeft img{padding-right:5px;}
.textTresLeft h1{font:12px verdana; font-weight:bold; color:#99CC00;}
.textTresRight{padding:5px; padding-top:25px; width:240px; height:150px; float:left;}
.textTresRight p{font:10px verdana; color:#CCCCCC;}
.textTresRight img{padding-right:5px;}
.textTresRight h1{font:12px verdana; font-weight:bold; color:#99CC00;}
.form{font:12px verdana; color:#006699;}
.rodape{color:#FFFFFF; font:10px verdana; text-align:center;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

você está realmente usando esse CSS num arquivo externo?

<link href="estilo.css" rel="stylesheet" type="text/css" />
No mais, defina padrões claros.

Como por exemplo, os <p> "padrões" do meu site, são vermelhos..

Então faça:

p { color: red; }

E se houver algumas excessões que sejam de outra cor, trate as excessões.. mas veja se há alguma regra. Pois é preciso tomar cuidado com o efeito cascata, que se mal usado, e sem conciência, pode trazer dores de cabeça.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Mas não existe bem uma lógica para construir uma formatação de uma página... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif O que existe é organização!

 

Você disse que o código está organizado, mas que código? O HTML, né?

 

Veja bem, para começar, posso dar umas dicas em relação à organização do seu arquivo CSS. Eu trabalho dessa forma.

 

1) Sempre que você tiver mais de 1 propriedade CSS para um mesmo elemento, quebre linhas! Exemplo:

div#principal {
	width:640px;
	margin:0 auto;
	background-color:#fff;
}
Evite deixar tudo em uma única linha, isso dificulta a legibilidade do código.

 

2) Procure utilizar as formas curtas de declaração de padding, margin, border, font... Exemplo:

 

Por que fazer assim:

...
	padding-top:10px;
	padding-right:8px;
	padding-bottom:5px;
	padding-left:7px;
...
se você pode fazer assim?
...
	padding:10px 8px 5px 7px;
...

3) Quando se utiliza o valor 0 (zero), não é necessário especificar a unidade de medida (ex., px).

 

4) Eu costumo trabalhar com o código bem comentado, para facilitar ainda nais futuras manutenções (imagine se eu tenho que mexer no site daqui há uns 6 meses, como é que eu vou lembrar o que era o que na página? Nada melhor do que você já deixar escrito o que cada parte de seu CSS faz exatamente).

 

 

Bom, tem muito mais, mas você vai aprendendo com o tempo. Procure acessar os arquivos CSS de alguns sites que você gosta, vá comparando, e etc., só assim você aprenderá de verdade.

 

Boa sorte amigo!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Paulo de Tarso, eu percebi isso do código dele.

mas pela forma com que está, vejo que é intencional a não quebra de linhas.

 

Pois existem lugares por ai, que indicam essa forma, para "economizar banda, e bla blá.." Oque esquecem de ressaltar, é que tal prática não se faz necessária, e nem é totalmente eficaz em sites de pequeno porte. Como é a maioria dos que desenvolvemos.

Economizar 5~10k em um CSS, de um site que não terá 10~100 mil visitas simultâneas, não serve de muita coisa.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

Ao meu ver!

 

é muito relativo a organização!!!

 

as vezes eu organizo meus sistemas em arquivos css separados!

 

as vezes faço em um só

 

como o William Bruno disse escomizar as vezes não compensa!

 

varia muito do porte do sistema, do site ou do que for!

 

a organização é você quem determina!

 

faça de uma forma que consiga localizar as coisas nos momentos que precisar alterar!

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

paulo_roll    0

paulo_roll
Postado

e aí pessoal!

não basta saber apenas o css, tem que saber a melhor maneira de usa-lo,

no site do baixaki mudou o estilo de todas as páginas da noite pro dia. Em relação

ao css que desenvolvi:

eu percebi isso do código dele.

mas pela forma com que está, vejo que é intencional a não quebra de linhas.

Pois existem lugares por ai, que indicam essa forma, para "economizar banda, e bla blá.." Oque esquecem de ressaltar, é que tal prática não se faz necessária, e nem é totalmente eficaz em sites de pequeno porte. Como é a maioria dos que desenvolvemos.

Economizar 5~10k em um CSS, de um site que não terá 10~100 mil visitas simultâneas, não serve de muita coisa.

Sim! por mais que seja um site de pequeno, a tendência é que sempre cresça com as campanhas aplicadas, então,

é melhor fazer uma vez do que duas. hehehehe.

O que tenho dúvidas é em relação aos blocos, não de uma página, e sim de todas já que algumas

páginas apresentam características diferentes, ou seja se tiver que alterar os blocos, vou ter que alterar

de um em um, não sei se esse é o uso correto do CSS. o problema está no uso da lógica, pois acho que estou usando

códigos desnecessários, onde em um bloco poderia servir para mais de uma página, quem tiver um tutorial sobre

essa lógica, seria, muito bom.

Procure acessar os arquivos CSS de alguns sites que você gosta, vá comparando, e etc., só assim você aprenderá de verdade.

Estou fazendo isso sim, mas não percebi um padrão de organização ainda. vou continar buscando aqui.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Independente do tamanho do arquivo, da banda e blábláblá é sempre importante manter a organização.

O que o Paulo disse é correto, mantenha a organização e comente, o máximo possível, o seu código.

 

No link a seguir um ótimo artigo: Reciclando seu CSS

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

Independente do tamanho do arquivo, da banda e blábláblá é sempre importante manter a organização.

O que o Paulo disse é correto, mantenha a organização e comente, o máximo possível, o seu código.

 

No link a seguir um ótimo artigo: Reciclando seu CSS

Comente apenas o que será dificil de alguem entender!

 

não comente o código inteiro hein!

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Comente o máximo possível.

Pense que alguém, que não seja você, pode ter que alterar algo o código e, quanto mais comentado, melhor.

 

Isto vale para qualquer tipo de programação, seja CSS, seja PHP, Seja ASP, seja......

 

Comente apenas o que será dificil de alguem entender!

 

não comente o código inteiro hein!

Compartilhar este post

Link para o post
Compartilhar em outros sites

paulo_roll    0

paulo_roll
Postado

Gostei do tutorial Giovani

Reciclando seu CSS

O exemplo do form que ele citou foi execelente, onde se criaria uma classe para

vários elementos, até aí tranquilo, mas não falou muito da lógica dos blocos.

Já vi em algum lugar onde se organiza o site no CSS, a tipografia, elementos, etc...

Isso que estou querendo resumir, o exemplo que ele citou no form neste tutorial

mostra bem o que estou procurando, mas com o conteúdo em geral, todas as página.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Comente o máximo possível.

Pense que alguém, que não seja você, pode ter que alterar algo o código e, quanto mais comentado, melhor.

 

Isto vale para qualquer tipo de programação, seja CSS, seja PHP, Seja ASP, seja...

Eu faço isso sempre!

 

Nas páginas que crio, eu escrevo praticamente um livro ao mesmo tempo! Não meço esforços não... Principalmente nas páginas de PHP.

 

Uma coisa que me baseio e que eu digo para todos os clientes: o site é SEU! Sou apenas o construtor dele. Se em algum belo dia, você queira trocar de desenvolvedor, pelo menos ele terá um ótimo apoio sem precisar me procurar ou tentar decifrar o que cada parte do código faz e tals...

 

Isso eu gosto de falar para todos, e eles se sentem até seguros, pois estão contratando um profissional que não quer trapacear de alguma forma... Porque é assim: se ele se cansar de você, ele vai trocar, não importa se o código está arrumado ou não. Por outro lado, se você trabalha bem, nunca deixa seu cliente na mão, as chances dele querer arrumar dor de cabeça por causa de site são muito baixas ou quase nulas...

 

So, just think about this...

 

Agora, para aqueles que acham que algumas linhas de comentários tornam a navegação mais lenta por causa do seu "enorme" tamanho final, oras, mantenha o original na sua máquina comentado então... E antes de "upar" pro servidor, elimine tudo quanto é comentário...

 

Embora eu continue achando tudo isso extremamente desnecessário... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

Bom, vai de cada um, né?

 

Boa sorte!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Escrever um livro enquanto codifica é muito bom, também faço isso. E nem removo depois na produção não, deixo tudo lá. Um bom desenvolvedor faz código de qualidade http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

Acho que fui mal interpretado!

quando disse comente apenas o necessário quiz dizer!

não comente o alinhamento do conteudo do site ao centro!

mas comente algo que caso seja removido cause dor de cabeça!

exemplo

 

body {
	 text-align: center; /* alinha ao centro no IE, se remover não vai alinhar ao centro */
}
#tudo {
	 margin: 0 auto; /* alinha ao centro no FF e outros */
	 width: 800px; /* tamanho de largura da página */ 
	 text-align: left; /* alinha à esquerda */
}

eu acho que não há necessidade de comentar dessa forma!

Se uma pessoa com algum conhecimento for mexer ela saberá o que faz!

se uma pessoa totalmente leiga for mexer, o melhor era que não mexesse!

 

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Achei esse artigo interessante:

http://www.maujor.com/blog/2007/05/29/70-d...a-escrever-css/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Scaico    0

Scaico
Postado

Eu costumo dividir meu arquivos de CSS junto com os ASP... Contanto que seja um conteúdo relativamente grande.

 

Por exemplo: topo.asp possui o topo.css, com os estilos que envolvem somente o topo da página... porque envolve algumas divs, classes, links e tal...

Porém se é algo como o rodape.asp, que só tem no máximo uma div com a assinatura do trabalho, nem vale a pena criar um CSS pra ele, e mantenho no estilos.css padrão.

 

também separo um css para as mudanças de cores dos links de menus e submenus e mudanças de imagem baseadas na página:

#bodymissao #menu li a.menumissao,
#bodyvisao #menu li a.menuvisao,
#bodycontato #menu li a.menucontato {
color:#ff0000;
}
#bodymissao #topo {
background-image:url(img/topo_missao.jpg);
}
#bodyvisao #topo {
background-image:url(img/topo_visao.jpg);
}
(alguem mais faz assim? :D)

 

e sempre procuro comentar meu CSS baseado nas seções diferentes... tipo

/* == GERAL == */

* {
margin:0px;
padding:0px;
}

body {
background-color:#282828;
font-family:Tahoma;
background:url(img/bg.jpg);
}

a {
font-weight:bold;
color:#4b4b4b;
outline:0px;
}

#geral {
clear:both;
overflow:hidden;
width:738px;
height:auto;
margin:0 auto;
background-color:#FFFFFF;
}

/* == MENU == */

#menu {
width:738px;
height:50px;
background:url(img/menu.jpg) no-repeat #FFFFFF center top;
margin-top:1px;
margin-bottom:15px;
}

...

---

 

edit: acho legal quando eu estou respondendo um tópico como esse, revendo uns estilos antigos e acabo, com isso, vendo a solução do problema no qual estou matutando. Dessa vez, eu estava esquecendo de um overflow:hidden que só lembrei quando colei esse código ai acima... rsrsrs

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Podemos então concluir o seguinte: não existe a melhor maneira de se desenvolver, mas sim a que mais se enquadra no perfil de cada um.

 

Seria muito interessante se todos os desenvolvedores acabassem escrevendo seus códigos de uma maneira padronizada, algo como se fosse uma "língua universal dos desenvolvedores", mas isso é impossível.

 

O que podemos passar para aqueles que nos perguntam é o "como eu faço", aí este acaba gostando de algum detalhe interessante, e acaba incorporando em seus hábitos, e assim sucessivamente.

 

Em resumo: o melhor desenvolvimento é aquele que te ajuda na hora que precisar, e que pode ajudar inclusive a outros que poderão vir a trabalhar com os codigos criados por você.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

Podemos então concluir o seguinte: não existe a melhor maneira de se desenvolver, mas sim a que mais se enquadra no perfil de cada um.

 

Seria muito interessante se todos os desenvolvedores acabassem escrevendo seus códigos de uma maneira padronizada, algo como se fosse uma "língua universal dos desenvolvedores", mas isso é impossível.

 

O que podemos passar para aqueles que nos perguntam é o "como eu faço", aí este acaba gostando de algum detalhe interessante, e acaba incorporando em seus hábitos, e assim sucessivamente.

 

Em resumo: o melhor desenvolvimento é aquele que te ajuda na hora que precisar, e que pode ajudar inclusive a outros que poderão vir a trabalhar com os codigos criados por você.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Acho que não teria uma melhor conclusão para o tópico!

 

http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito