Sou estudante de Sistemas de Informação e estou montando um treinamento de HTML/CSS para a minha empresa júnior, e durante essa montagem me veio uma dúvida, qual a maneira mais efetiva de organizar os arquivos de CSS?
Ao meu ver, existem 3 maneiras de organizar o seu CSS:
Primeira maneira: Usar um style global
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Com o CSS parecido com:
.classe-arquivo1{
/* css */
}
.classe-arquivo2{
/* css */
}
.classe-arquivo3{
/* css */
}
Segunda maneira: Linkar todos os arquivos CSS necessários
<head>
<link rel="stylesheet" type="text/css" href="arquivo1.css">
<link rel="stylesheet" type="text/css" href="arquivo2.css">
<link rel="stylesheet" type="text/css" href="arquivo3.css">
</head>
Cada arquivo com seu respectivo CSS
Terceira maneira: Um arquivo global com mudanças que se repetem em todas as páginas, usando o import para linkar outros arquivos
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Com o CSS parecido com:
@import url("arquivo1.css");
@import url("arquivo2.css");
@import url("arquivo3.css");
.classe-global{
/* css */
}
Dito isso, a minha duvida é: Qual a maneira mais rápida? E caso não haja modo mais rápido, em quais situações eu uso cada maneira citada acima?
Essa é a minha primeira pergunta aqui no StackOverflow, não sei se fiz a pergunta de modo correto, mas desde já agradeço!