2

Eu recentemente estou estudando Bootstrap e percebi que consigo, por exemplo, editar o fundo de uma .nav-bar usando o !important no css.

Fazer desse modo é errado? Eu teria alguma consequência em projetos pequenos? E projetos grandes? Se for um modo errôneo de editar Bootstrap, qual seria o modo recomendado?

Exemplo:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
    </ul>
  </div>
</nav>

CSS:

.navbar{
  background-color: #EEEEEE !important; /*Forçando a mudança de cor de fundo*/
}
1

2 Respostas 2

5

Fazer desse modo é errado? Eu teria alguma consequência em projetos pequenos? E projetos grandes? Se for um modo errôneo de editar Bootstrap, qual seria o modo recomendado?

Errado não é, só não é uma boa prática. Por exemplo, se você estiver fazendo um projeto com muitos arquivos de estilo que possam estar referenciando o mesmo bloco de código (outra má prática), isso vai te dar dores de cabeça no momento da edição, pois vai ter !important's quebrando a ordem de interpretação do CSS. Você vai começar a perder o controle de onde estão os estilos de cada parte do seu projeto.

Uma boa prática seria criar um arquivo (meu-tema.css, por exemplo) e nele colocar o css sobrescrevendo as regras do bootstrap que forem necessárias para o seu projeto e adicionando as complementares. O ideal é sempre manter o código bem organizado, de preferência por página, por sessão, etc. Porque assim quando for necessário fazer uma edição ou inserção, será mais fácil de encontrar o local no arquivo.

A interpretação do código de estilo vai sendo feita na mesma ordem que os links foram inseridos no código. E pela 'regra da cascata' do CSS, as regras são sobrescritas sempre pela última aparição no código e da mais geral pra mais específica. Então, basta fazer a chamada do seu CSS modificado depois da chamada do bootstrap. Exemplo:

bootstrap.css:

.navbar{
  background-color: #EEEEEE; 
}

meu-tema.css:

.navbar{
  background-color: #333333;
}

Caso seja inserido nessa ordem, a cor do background será a declarada por último. Pode-se ler mais sobre como funciona o override do css aqui.

1

Não é errado mas é desnecessário visto que o Bootstrap possui uma página que permite customizar o CSS e os componentes que você utilizará.

Antigamente você precisava baixar o código fonte, modificar os arquivos .less e compilar novamente para gerar o CSS, hoje isso pode ser feito pelo site. As cores podem ser personalizadas e não é necessário incluir todos os componentes, pode criar sua própria versão somente com o que fará uso:

Customizar o Boostrap

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .