Quais são os cuidados na criação de codigos HTML/CSS para sites extern

[Micilini Roll 49]

Gostaria de saber quais são as melhores praticas para criação de códigos html e css para sites externos, por exemplo: Existe um chat chamado zopim, nele a pessoa simplesmente insere um código javascript que puxa um código html / css do chat para dentro da pagina da pessoa.

 

Na programação, principalmente na parte do CSS ele deve tomar alguns cuidados, para que o design do chat não quebre o design da pagina do cara ou o contrario, que cuidados são esses?

 

No meu caso, eu simplesmente estou nomeando as divs com nomes improváveis de alguém usar como:

<div class="trgt_ghtyu_box" id="trgt_ghtyu_box">
</div>

E para que meu CSS nao altere o CSS alheio eu primeiro chamo o nome da div principal, dou um espaço e chamo a div que esta dentro dela por exemplo:

<style>
#trgt_ghtyu_box #divDeDentroBox{
...
}
</style>

Pessoal, não sei se estou fazendo isso da maneira correta, se alguém puder me corrigir ou dar mais algumas dicas valiosas eu agradeço.

 

Obrigado.

[L. Henrique 179]

Micilini, lembre-se que CSS é a leitura do estilo em cascata, ou seja, tudo o que está no fim será considerado, podendo dar um override sobre o estilo que está acima.

É importante sempre utilizar classes que podem ser lidas e compreendidas, até porque, pode vir alguém depois de você, olhar o código e não entender patavinas nenhuma do que está ocorrendo ali. Então não use classes como .asdfg, .gfoijewof, .erwtwe, .testetesteteste, .chatchatchat... Tente não repetir muito a mesma coisa e tente não bagunçar tudo igual ao Salvar Arquivo Como...

Dentro do seu próprio CSS, você pode (e as vezes até deve) utilizar tags !important para dar um override na classe que está abaixo e que foi adicionada automaticamente. Essa é uma solução. Não digo que é uma das melhores, até porque um !important puxa outros e quando você for ver, de 1 linha com isso, agora você tem 100.

Ex.:

/* Aqui é dentro do seu CSS */
.classe-chat {
   width: 150px !important;
   height: 150px !important;
   font-size: 1.5rem !important;
}

/* Considere que isso foi adicionado automaticamente e você não tem acesso */
.classe-chat {
   width: 100px;
   height: 100px;
   font-size: 1rem;
}

É sempre bom comentar o código CSS e definir onde está cada coisa, assim, a próxima pessoa que for utilizar saberá com maior facilidade onde deve trabalhar. Ah, sem deixar de citar que existe a grande importância em, ao terminar seu CSS, deixá-lo minificado, isso faz com que o navegador leia o CSS com uma velocidade maior e também considere que o browser não tem a necessidade de carregar 100 linhas de comentários, então é sempre bom ter o arquivo base e o minificado.

Ex.:

// CÓDIGO CHAT
.classe-chat {
   ...
}

/* CÓDIGO CHAT */
.classe-chat {
   ...
}

/****************
   CÓDIGO CHAT
****************/
.classe-chat {
   ...
}

Obs.: Chamar uma classe filha através da classe pai também é de bom uso, já que isso ajuda a identificar onde o estilo está sendo aplicado, caso existam div's com nomes iguais, mas que precisam de estilos diferentes.

Ex.:

.chat .minha-div {
   ...
}

.menu .minha-div {
   ...
}

Isso também vale pro HTML, mas vamos deixar a linha de comentário de lado e vamos partir pra identificação de seções através de <div> ou <section> com uma class de referência.

Ex.:

<div class="Chat">
   ...
</div>

<section class="Chat">
   ...
</section>

Considere que isso é um método válido, ajuda na identificação e também na maioria dos casos ajuda até a organizar o CSS, sem ter que criar N estilos para tags filhas. Em algumas pesquisas pelo W3C e StackOverflow, consideram que essa é a melhor forma de se organizar o HTML, também creio que é questão de necessidade e gosto em alguns casos.

 

Agora vamos a linha de comentário no HTML.

Essas linhas normalmente são de extrema importância em qualquer código, sendo ele PHP, JS, CSS, XHTML, XML, HTML e por ai vai. Normalmente em vários casos existem comentários completamente desnecessários, vou citar um exemplo que peguei esses dias.

Ex.:

<!--
   Aqui entra a parte do código do Menu.
-->
   <nav>
      <!--
         Aqui entra o Dropdown
      -->
      ...
   </nav>

Um comentário é um comentário. Deve ser breve e ir direto ao ponto, então creio que a melhor maneira seria:

<!-- Menu -->
<nav>
   <ul>
      <li>
         <ul class="Dropdown">
         </ul>
      </li>
   </ul>
</nav>

Se a pessoa já comentou dizendo que aquilo é o Menu, não tem a necessidade de comentar dentro desse menu dizendo onde está o dropdown. O programador que pegar esse código vai buscar e tentar entender o que é cada coisa ali dentro. O excesso de comentários também pode atrapalhar.

 

Mas agora vamos a problemática (ou não) desses comentários em HTML. Já faz muito tempo que venho vendo discussões de: "Comentários em HTML prejudicam o SEO" e outro lado "Comentários em HTML não prejudicam o SEO". Bem... Da minha visão isso não prejudica, já que o Google entende da seguinte forma:

• Está visível para o usuário? Sim! - Então está indexado.
• Está visível para o usuário? Não! - Então não está indexado.

 

Bem, tudo isso é uma visão minha e de algumas pesquisas que venho fazendo até então. Posso estar errado ou posso estar correto, lembrando que cada um tem sua forma de trabalhar e entender o que é melhor ou não para o projeto em que está se dedicando.

Aos que lerem tudo isso e tiverem apontamentos, por favor, gostaria de ler todos, inclusive do dono desse post.

Obs.: Eu me perdi um pouco escrevendo, pois tive que parar algumas vezes pra fazer outras coisas, então agradeço se me pontuarem em algo que esqueci de comentar. Lembrando que as mesmas práticas para o seu próprio código também servem para o código de sites externos. Você só precisa identificá-los.

Abraços!