Quando e por que usar a tag de estilo fora das folhas de estilo CSS
Publicados: 2017-10-29As tags de estilo são uma parte muito interessante do desenvolvimento web. Quero dizer, eles são fundamentais e básicos para o funcionamento da web atual, mas na maioria das vezes, o estilo real do seu site vem da importação e do uso de várias folhas de estilo CSS para temas, plug-ins e a aparência cotidiana que seus visitantes veem.
Mas, nos velhos tempos da construção de sites, você poderia usar tags de estilo no próprio corpo do site e não haveria problema. A maior parte, senão todos, o CSS da página iria para a própria página e, naquela época ... funcionava bem. Hoje em dia, existem problemas com isso, é claro - como velocidade de carregamento da página e ordens de execução, e quanto mais crescem as tecnologias da web maduras, menos você deseja usar tags de estilo por conta própria.
No entanto, há momentos em que você gostaria de usá-los. Às vezes, eles aprimoram seu fluxo de trabalho, enquanto outras instâncias realmente tornam a vida de seus usuários melhor - otimização móvel, por exemplo, ou chamando sua atenção para um elemento específico por meio de um estilo incrível.
Uso típico de folha de estilo
Em quase todos os sites hoje, você verá o estilo implementado assim:
<link rel='stylesheet' id='divi-style-css' href='/wp-content/themes/Divi-child-theme-01/style.css?ver=3.0.40' type='text/css' media='all' />
Se você é um membro do Elegant Themes que usa Divi (deveria ser!), Isso chama a folha de estilo completa de onde peguei este trecho:
/*
Theme Name: Divi
Theme URI: http://www.elegantthemes.com/gallery/divi/
Version: 3.0.40
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* Browser Reset */
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
Agora, em teoria, você poderia colocar isso em uma tag de estilo no cabeçalho de qualquer página que você escrever. Definitivamente funcionaria, mas isso é um código fedorento e nada para o que as tags de estilo são boas.
Tags de estilo, uso moderno
É claro que seu site tem folhas de estilo CSS como essas. Você vai usá-los. Você tem custom.css e stylesheet.css e provavelmente muito mais do que isso. Você descobriu exatamente como o seu site deve ser e está feliz com isso.
Então, por que você precisa das tags de estilo?
Porque as folhas de estilo são soluções gerais. Uma tag de estilo é uma solução em pequena escala.
As planilhas lidam com a melhor aparência do seu site, não com os elementos essenciais e os destaques especiais. Às vezes, dá mais trabalho do que vale a pena jogar um pedaço único de código em uma folha de estilo.
É quando as tags de estilo se tornam realmente úteis. Além disso, às vezes você precisa ajustar um único elemento ou fazer uma escolha de estilo específico para determinados dispositivos ou casos de uso. É quando as tags de estilo realmente brilham no desenvolvimento web moderno.
Uma única instância de um elemento
Provavelmente, o principal motivo de usar tags de estilo em seu site é se você está lidando com um único elemento único em sua página. Pode ser muito trabalhoso (com muito pouco retorno, se houver) incluir o estilo em um arquivo CSS externo anexado ao id desse elemento. O que você pode fazer, no entanto, é colocar uma etiqueta de estilo no elemento e continuar com o seu dia.
Por exemplo, se você tem um widget de barra lateral que precisa de uma fonte especial, você pode colocá-lo em um div, fornecer ao div um código CSS e, em seguida, acessar sua planilha para incluir algo tão simples como {font-family: “Exo” , Arial, sans-serif;} , mas isso é um monte de problemas.
A melhor opção seria simplesmente fazer isso?
<div style="font-family: "Exo", Arial, sans-serif;" />
Bada-bing, bada-boom, está feito e aquele widget agora se destaca porque é o único que tem aquele estilo específico. (E sim, eu percebo que usar uma fonte nova e diferente provavelmente não combina com o resto do seu design. Mas é um exemplo.)
Uma página simples
Às vezes, você tem uma página única muito simples em seu site. Pode ser uma página inicial ou uma página do aperto. Provavelmente, você só precisa de alguns ajustes em seu estilo aqui, mas precisa que eles se apliquem a esta página, e somente a esta página.
Assim, você pode usar a tão difamada tag ! Important junto com o estilo para fazer as coisas de maneira mais rápida e fácil do que criar uma nova folha de estilo e vinculá-la. Este método é melhor usado se você não tiver muitos CSS novos, porque carregar muitos CSS como esse pode retardar o carregamento da página. Mas você já sabia disso.
Algo simples como isso, no entanto, não seria um desgaste muito grande nas conexões dos usuários e, honestamente, não vale a pena adicioná-lo a uma folha de estilo. (E para ser justo, esse CSS é horrível e não vale a pena adicioná-lo a nenhum site. Tchau!)
<style>
h2, h3, h4 {
font-family: "Exo", Arial, sans-serif!important;
text-align: right;
font-size: 2rem;
color: blue;}
body, p {font-family: "Roboto", Arial, sans-serif!important;
font-size: 1.2rem;
color: red;
background: #000;}
</style>
O ponto aqui, porém, é que HTML 5 é legal com a adição de tags de estilo no cabeçalho do seu site para que você ajuste as folhas de estilo existentes. Embora as tags ! Important definitivamente não sejam necessárias neste caso (raramente são), acho que esta é, talvez, a única vez em que as usamos, porque elas não vão causar tanto espaguete quanto você (ou outros desenvolvedores) começam a trabalhar no site porque se aplicam apenas a esta única página.
Vários tamanhos de janela de visualização
Consultas de mídia são seus amigos. Se você não estiver totalmente familiarizado com eles, sugiro que leia sobre eles. Basicamente, você pode declarar quais parâmetros devem ser atendidos para que determinado CSS tenha efeito. Geralmente, porém, você usará isso para garantir que seus sites funcionem em dispositivos diferentes. Quando você precisa de capacidade de resposta em todo o site, isso irá para uma folha de estilo.
Mas, novamente, se você tiver uma única página ou elemento que precisa que apareça de forma diferente ou que não apareça de forma alguma no celular (ou mesmo em resoluções menores ou maiores), você pode fazer isso com tags de estilo no cabeçalho.
<style>
@media (max-width: 767px) {
.white_text {
color: #ffffff;
}
.blue_text {
color: #cbe1f3;
}
.white_background {
background-color: #ffffff;
}
.blue_background {
background-color: #003663;
}
#email_form_a {
display:none;
}
</style>
Stylin 'e Profilin'
CSS é uma parte tão importante do desenvolvimento web agora que é algo que quase todo mundo precisa saber e usar. E ainda mais do que saber CSS é saber quando usar as ferramentas diferenciadas às quais você tem acesso.
Portanto, não sinta que está limitado a folhas de estilo. Claro, eles são fantásticos e úteis e tornam toda a web um lugar mais agradável para se estar, mas você ainda pode usar tags de estilo simples também, e dar a seus sites um pouco mais de destaque.
Então, como você usa tags de estilo fora de suas folhas de estilo .css? Que ideias você pode dar às pessoas?
Imagem em miniatura do artigo por Creative Thoughts / shutterstock.com