MAIS DE UM ARQUIVO .CSS?

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.