melhores práticas reproduzindo header no index e demais páginas

Estou reproduzindo na parte 1 o que foi proposto na parte 2 (a criação do header, footer e ênfase quando passa o mouse) e tive uma dúvida relativa às melhores práticas. No momento em que criei o <header> com <nav> (o menuzinho com "Home/Produtos/Contato") eu dupliquei as informações de formatação e tudo referente ao <header> para os arquivos index.html e produtos.html, bem como os respectivos arquivos .css.

Minha dúvida é: a fim de NÃO duplicar, eu deveria apenas referenciar o produtos.css no indesx.html ou o ideal é eu duplicar mesmo? De novo, aqui éuma dúvida de boas práticas, o que costuma ser feito, ou é melhor a nível de clareza de código.

Obrigada pela ajuda desde já.

Gabriela

header index.html

<header>

            <div class="caixa">
                <h1> <img src="../3.imagens/3.3logo.png"> </h1>
                <nav>
                    <ul>
                        <li><a href="../1.html/index.html">Home</a></li>
                        <li><a href="../1.html/produtos.html">Produtos</a></li>
                        <li><a href="../1.html/contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>

header produtos.html

<header>

            <div class="caixa">
                <h1> <img src="../3.imagens/3.3logo.png"> </h1>
                <nav>
                    <ul>
                        <li><a href="../1.html/index.html">Home</a></li>
                        <li><a href="../1.html/produtos.html">Produtos</a></li>
                        <li><a href="../1.html/contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>

ambos no CSS

header {
    background: #BBBBBB;
    padding: 20px 10%;
}

.caixa {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

nav {
    position: absolute;
    top: 110px;
    right: 0px;
}
nav li {
    display: inline;
    margin: 0 0 0 15px;
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover  {
    color: #C78C29;
    text-decoration: underline;
}