MAIS DE UM ARQUIVO .CSS?

16/06/2017

27

Bom pessoal, eu to com uma dúvida e espero que alguem possa me ajudar.
Estou desenvolvendo um site de venda (site somente para testar as minhas abilidades e adquirir novos aprendisagens) e estou com uma duvida!

Devo usar somente uma css para todo o site?
Devo usar uma css para cada página do site?
Devo usar uma css para cada elemento? (ex: css para textos, para img, para tabelas/listas)

Tem algum macete que eu deva saber antes de usar várias css? Isso deixará o site mais pesado? Isso irá acarretar o mal funcionamento do site de alguma forma?

Valeu por ajudarem.
Thales Cristian

Thales Cristian

Responder

Post mais votado

18/07/2017

Eu acho interessante a arquitetura utilizada no SMACSS, eles separam em até 5 arquivos, são eles:

1 - Base: A base é usada em seletores de elementos sem o uso de classes ou IDs, pseudo-classes e filhos usando apenas seletores de elementos, também inclui o css reset dentro dele.

2 - Layout: O layout é onde colocaremos os estilos das estruturas que não se repetem na página como header, footer, sidebar, main e todo resto que não é componente ou estrutura reutilizável. Também incluimos o grid usado e os wrappers ou containers.

3 - Módulo(Module): O módulo é responsável por determinar as partes reutilizáveis, os componentes. Dentro do módulo componentes como botões, lightbox, alertas, menu de navegação, widgets, estilos de blocos de texto, entre outros.

4 - Estado(State): State ou estado em português, como o nome diz determina o estado do elemento. No caso de um elemento que será modificado ou terá alguma alteração, seja ela feita por JavaScript, ou por ser uma marcação daquela página. Temos como exemplos estados: .is-active, .is-selected, .is-visible, is-hidden, is-collapsed.

5 - Tema(Theme): O tema é a parte que menos tem aplicação na maioria dos projetos, é usada para separar a parte que dá um novo design para a página. Um exemplo de uso seriam em e-commerces que alteram o layout de acordo com a pessoa que acessa.

Abraaço.

Raphael Alves

Raphael Alves
Responder

Mais Posts

16/06/2017

Leonardo Xavier

Tente partir para templates será mais fácil seu desenvolvimento do que ir do zero.

Recomendo este:
https://adminlte.io/themes/AdminLTE/index2.html
Responder

21/06/2017

Joel Rodrigues

Fala, Thales. Beleza?

Uma boa abordagem é ter um arquivo CSS "base", com o código comum a todas as páginas (ou à maioria, ou por contexto). E para customizações específicas você pode criar arquivos separados, evitando que um ajuste em uma página acabe alterando outras.

Abraço.
Responder

21/06/2017

Rafael Zilli

E ai, Thales, tranquilo?
As suas dúvidas aparentemente não acarretarão no mal funcionamento do seu site, mas afetam a organização do seu código.

Como nosso amigo Joel disse, é melhor você utilizar um arquivo CSS separado do HTML, pois isso melhoraria o SEO do seu site, além do código ficar muito mais organizado. Dependendo do tamanho do seu site você pode usar um arquivo só, mas recomendo que você adicione comentários ao código para que você entenda futuramente, caso precise de alguma manutenção ou coisas do tipo. Sobre os elementos, você deve adicionar conforme sua necessidade, pois a ideia do CSS é criar um efeito cascata que edite vários elementos de uma vez, para não precisar criar uma formatação para cada elemento.

Esse link aqui mostra algumas boas práticas para escrever o CSS: https://tableless.com.br/6-estrategias-para-melhorar-a-organizacao-do-seu-css-2/

Espero ter te ajudado.
Abraço.
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários,
consulte nossa política de privacidade.

Aceitar