3
respostas

Organização folhas de estilo

Pessoal tenho com uma dúvida: Estou desenvolvendo um site para uma ong. O site tem 14 páginas e para melhor organização do css fiz um arquivo .css para cada uma das páginas. Está correto dessa forma? Agora tem outro porém, cada página tem um cabeçalho e um rodapé que se repetem em todas elas. Qual a melhor abordagem, criar um arquivo rodapé.css e cabeçalho.css e anexá-los a cada uma das páginas? Fiquei meio perdido . . .

Obrigado

3 respostas

Bem o que eu faria nesse caso, seria estrutura por questões comuns. como geralmente o header é o um bloco comum entre as paginas, então criaria um arquivo header.css, que percebi que é o mesmo sugerido na aula de criação de web app com Javascript, a diposição por block e semelhança, assim tu ia conseguir verifica graus de igualdade e agir sobre o layout do sistema, afinal devemos garantir a manutenção da proposta de layout inicial, então seria assim que eu faria, um exemplo file seria esse tree

├── index.html
└── static
    └── css
        ├── base.css
        ├── block
        │   └── header.css
        └── reset.css

o arquivo reset.css limpa as configurações que vem por default no browser, como é o caso de padding,margin e etc... o base.css são estilos comuns para o layout, garantido um espaçamento uniforme,corres padrões etc... e em header.css , tenho o estilo de todo o bloco de header assim o cabeçaria seria de incluções de bloco :P, boa sorte no seu site, espero que tu dê certo !

Entendi, valeu Francisco ;)

Rodrigo concordo com a resposta do nosso amigo Francisco, apenas incrementando você pode usar um header.jsp e footer.jsp para todas as páginas, sendo assim teria o foco apenas na manutenção de um arquivo que é importado em todas as páginas.

Sobre os arquivos css, separe por categorias e elementos, tenho um framework que utilizo em projetos onde um exemplo de arquivos seria:

form.scss // responsável por estilizar formulários
form-group.scss // responsável por juntar um botão com uma input
form-data.scss // responsável por estilizar inputs, textarea e selects

Sendo assim fica muito fácil saber qual arquivo mexer para corrigir ou implementar determinado design.

Espero ter ajudado