O que há de tão ruim no CSS in-line?

170

Quando vejo códigos e exemplos iniciais do site, o CSS está sempre em um arquivo separado, denominado "main.css", "default.css" ou "Site.css". No entanto, quando estou codificando uma página, muitas vezes sou tentado a alinhar o CSS com um elemento DOM, como definir "float: right" em uma imagem. Tenho a sensação de que essa é uma "má codificação", já que raramente é feita em exemplos.

Entendo que, se o estilo for aplicado a vários objetos, é aconselhável seguir "Não se repita" (DRY) e atribuí-lo a uma classe CSS a ser referenciada por cada elemento. No entanto, se eu não repetirei o CSS em outro elemento, por que não alinhar o CSS ao escrever o HTML?

A pergunta: o uso de CSS in-line é considerado ruim, mesmo que seja usado apenas nesse elemento? Se sim, por quê?

Exemplo (isso é ruim?):

<img src="myimage.gif" style="float:right" />
ChessWhiz
fonte
1
Sou sempre contra o CSS embutido, mesmo para um único item, mas vejo tantos sites comerciais repletos de atributos de estilo que me faz pensar em qual é realmente a prática aceita?
yu_ominae 7/11
3
Eu acho que estilos inline são preguiçosos. Digo isso porque faço isso com muita frequência, por isso sei - por que - estou fazendo isso, porque não tenho idéia se o estilo permanecerá, então costumava fazê-lo ao lado do html. Hoje em dia, com html5 e suporte pragmático para <style> </style> em qualquer lugar, eu uso uma tag <style> nas proximidades enquanto mexe com o layout e depois a migro para o arquivo principal / principal do CSS. Mesmos benefícios de velocidade e imediatismo, quase nenhuma das desvantagens (efeitos colaterais em elementos externos à página devido à especificidade).
Kzqai
3
@yu_ominae - lembre-se de que "sites comerciais" nem sempre seguem as práticas recomendadas; de fato é bastante raro. O fator decisivo é se o desenvolvedor sabe, se importa e tem tempo; ou se o gerente estiver disposto a alocar o tempo e direcionar a equipe para a implementação. Quando a prioridade do trabalho é cumprir o prazo, a qualidade geralmente diminui.
precisa saber é o seguinte
1
Vale ressaltar que, embora "sites comerciais" pareçam usar estilos embutidos, isso pode ser o resultado do uso de determinadas chamadas jQuery (por exemplo css()) que aplicam estilos embutidos.
21817 Dave Becker #

Respostas:

203

Ter que alterar 100 linhas de código quando você quiser fazer o site parecer diferente. Isso pode não se aplicar ao seu exemplo, mas se você estiver usando CSS embutido para coisas como

<div style ="font-size:larger; text-align:center; font-weight:bold">

em cada página para indicar um cabeçalho da página, seria muito mais fácil manter

<div class="pageheader">  

se o cabeçalho da página estiver definido em uma única folha de estilo, para que você queira alterar a aparência de um cabeçalho de página em todo o site, altere o css em um único local.

No entanto, serei herege e direi que, no seu exemplo, não vejo problema. Você está direcionando o comportamento de uma única imagem, que provavelmente deve aparecer diretamente em uma única página; portanto, colocar o CSS real em uma folha de estilo provavelmente seria um exagero.

David
fonte
18
Você diz que meu exemplo não é um problema, mas também admite que é um herege. Eu gosto dessa abordagem.
amigos estão dizendo sobre chesswhiz
8
Se eu tivesse um níquel para cada vez que tivesse que modificar a flutuação de uma imagem ou algum outro CSS que originalmente seria "apenas para um elemento" ... ... bem, eu sairia para jantar fora em um bom restaurante.
Kzqai #
8
Outro cenário em que não é apenas bom usar o estilo embutido, mas a única maneira de estilizar qualquer coisa: emails em HTML.
Christophe Marois
Mas o htmlarquivo em si também é armazenado em cache.
Em resposta a user663031: Um site com várias páginas possui muitas páginas HTML diferentes, mas pode combinar todos os seus estilos em apenas um arquivo CSS que pode ser armazenado em cache facilmente.
Sinthorion 25/09/19
68

A vantagem de ter um arquivo css diferente é

  1. Fácil de manter sua página html
  2. Mudar para Aparência será fácil e você poderá ter suporte para muitos temas em suas páginas.
  3. Seu arquivo css será armazenado em cache no lado do navegador. Portanto, você contribuirá um pouco com o tráfego da Internet ao não carregar alguns kbs de dados toda vez que uma página for atualizada ou o usuário navegar no site.
vijay.shad
fonte
2
Eu me pergunto essa pergunta todos os meses (relativamente novo na programação da web) e é a primeira vez que li algo sobre o arquivo css sendo armazenado em cache. Isso faz isso por mim!
Ganders
Eu estava pensando em cache também, mas no meu caso estou tendo que lidar com CSS mesclado com 15k linhas, é impossível manter toda a grande parte do lixo que era para ser usada apenas uma vez em uma única página que não ' não existe mais. Então, você está jogando código CSS para todos em cada visita para uma única página temporária que é visualizada por apenas 1% do seu tráfego. Não sei se o argumento de tráfego na Internet é válido em todos os casos. Felizmente, os Web Components vão mudar as coisas!
Shadoweb
@ Shadowbob - não seria melhor ter arquivos css menores em vez de grandes? Talvez tenha um genérico que seja usado para todas as páginas, mas depois tenha pequenas folhas de estilo separadas para outras páginas. Deve ser mais fácil de manter. E se o tráfego é um problema, então a produção provavelmente pode se mesclar a uma, no processo de criação.
precisa saber é o seguinte
26

A abordagem html5 para prototipagem rápida de css

ou: <style> tags não são mais apenas para a cabeça!

Hacking CSS

Digamos que você esteja depurando e deseje modificar sua página-css, faça com que uma determinada seção pareça melhor. Em vez de criar seus estilos em linha de maneira rápida, suja e insustentável, você pode fazer o que eu faço hoje em dia e adotar uma abordagem em etapas.

Nenhum atributo de estilo embutido

Nunca crie seu CSS embutido, com o que quero dizer: <element style='color:red'>ou mesmo<img style='float:right'> É muito conveniente, mas não reflete a especificidade real do seletor em um arquivo css real posteriormente, e se você o mantiver, lamentará a carga de manutenção mais tarde.

Protótipo com <style>vez

Onde você usaria o CSS embutido, use <style> elementos da página . Experimente isso! Ele funciona bem em todos os navegadores, por isso é ótimo para testes, mas permite que você mova esses css para seus arquivos css globais sempre que quiser / precisar! (* esteja ciente de que os seletores só terão especificidade no nível da página, em vez da especificidade no nível do site, portanto, tenha cuidado para não ser muito genérico) Tão limpo quanto nos arquivos css:

<style>
.avatar-image{
    float:right
}
.faq .warning{
    color:crimson;
}
p{
    border-left:thin medium blue;
    // this general of a selector would be very bad, though.
    // so be aware of what'll happen to general selectors if they go
    // global
}
</style>

Refatorando o CSS embutido de outras pessoas

Às vezes, você nem sequer é o problema, e está lidando com o CSS embutido de outra pessoa e precisa refatorá-lo. Esse é outro ótimo uso para o<style> página in, para que você possa retirar diretamente o CSS embutido e colocá-lo imediatamente na página em classes, IDs ou seletores enquanto refatoração. Se você for cuidadoso o suficiente com seus seletores, poderá mover o resultado final para o arquivo css global no final com apenas uma cópia e colagem.

É um pouco difícil transferir todos os bits de css imediatamente para o arquivo css global, mas com <style>elementos in-page , agora temos alternativas.

Kzqai
fonte
23

Além de outras respostas .... Internacionalização .

Dependendo do idioma do conteúdo - você geralmente precisa adaptar o estilo de um elemento.

Um exemplo óbvio seriam os idiomas da direita para a esquerda.

Digamos que você usou seu código:

<img src="myimage.gif" style="float:right" />

Agora diga que deseja que seu site suporte idiomas rtl - você precisaria de:

<img src="myimage.gif" style="float:left" />

Portanto, agora, se você deseja oferecer suporte aos dois idiomas, não há como atribuir um valor a flutuar usando o estilo embutido.

Com CSS, isso é facilmente resolvido com o atributo lang

Então você poderia fazer algo assim:

img {
  float:right;
}
html[lang="he"] img { /* Hebrew. or.. lang="ar" for Arabic etc */
  float:left;
}

Demo

Danield
fonte
16

CSS embutido sempre ganha sempre em precedência sobre qualquer CSS vinculado à folha de estilo. Isso pode causar uma enorme dor de cabeça para você, se e quando você escrever uma folha de estilo em cascata adequada, e suas propriedades não estiverem sendo aplicadas corretamente.

Isso também prejudica sua aplicação semântica: o CSS trata de separar a apresentação da marcação. Quando você junta os dois, as coisas ficam muito mais difíceis de entender e manter. É um princípio semelhante ao separar o código do banco de dados do código do controlador no lado do servidor.

Por fim, imagine que você tenha 20 dessas tags de imagem. O que acontece quando você decide que eles devem ser lançados à esquerda?

issa marie tseng
fonte
12
"sempre, sempre ganhar!" - a menos importante é usado na folha de estilo
James Westgate
6
Vivo sob a suposição de que as pessoas são humanas e não usam essas monstruosidades. =)
issa marie tseng
3
@JamesWestgate até que alguém usos importantes na css inline para substituir o override ....!
Kzqai
11

O objetivo principal do CSS é separar o conteúdo de sua apresentação. Portanto, no seu exemplo, você está misturando conteúdo com apresentação e isso pode ser "considerado prejudicial".


fonte
7
Pagarei 5 dólares para enviar "Estilos CSS embutidos considerados prejudiciais" à ACM.
BalinKingOfMoria Restabelecer CMs
11

Usar CSS embutido é muito mais difícil de manter.

Para todas as propriedades que você deseja alterar, o uso de CSS embutido exige que você procure o código HTML correspondente, em vez de apenas procurar dentro de arquivos CSS claramente definidos e, com sorte, bem estruturados.

Sylvain
fonte
3
+1 - Eu realmente me queixo quando nossos designers fazem isso como uma solução rápida, apenas para conseguir algo para alinhar. O uso de um CSS externo significa nunca ter que fazer uma substituição maciça de texto, a menos que, obviamente, esteja operando em uma única folha de estilo. Recebi um modelo de painel de controle para mim ontem e demoramos 2 horas e meia para encontrar instâncias em que os ícones foram ajustados com estilos em linha. Enlouquecedor eu te digo .. enlouquecedor :)
Tim Post
1
Quando você tem mais de 50 SCSS e o elemento Inspecionar aponta apenas para o CSS compactado, não tenho certeza de que é o CSS que ganha com a simplicidade!
Shadoweb
1
@ Shadowbob é para isso que servem os mapas de origem. thesassway.com/intermediate/using-source-maps-with-sass
Mike Chamberlain
@TimPost, existe uma razão pela qual o recurso "inspecionar elemento" nasceu
Norielle Cruz 12/04/19
9

Isso se aplica apenas ao código manuscrito. Se você gerar código, acho que não há problema em usar estilos inline aqui e depois, especialmente nos casos em que elementos e controles precisam de tratamento especial.

DRY é um bom conceito para código manuscrito, mas no código gerado por máquina, eu opto por "Lei de Demeter": "O que pertence a um, deve permanecer junto". É mais fácil manipular o código que gera tags de estilo do que editar um estilo global pela segunda vez em um arquivo CSS diferente e "remoto".

A resposta para sua pergunta: depende ...

Bruno Jennrich
fonte
7
Eu acho que essa é realmente a resposta correta. O mantra da "separação de preocupações" é apenas um critério. A "localidade" também é importante para facilitar a manutenção. O aspecto principal é se o estilo é ou não reutilizável no nível semântico, não apenas sintático. Se for esse o caso, a folha faz sentido. Por exemplo, não vou criar uma classe para "float: right" apenas porque dois elementos a usam. Depende dos elementos serem semanticamente iguais. Um estilo de "cor" geralmente é semanticamente relacionado (parte do tema), e geralmente aparece em uma folha.
Koriander
5

Penso que, mesmo que você queira ter um determinado estilo para um elemento, é necessário considerar a possibilidade de aplicar o mesmo estilo no mesmo elemento em páginas diferentes.

Um dia alguém pode pedir para alterar ou adicionar mais alterações estilísticas ao mesmo elemento em todas as páginas. Se você tivesse os estilos definidos em um arquivo CSS externo, seria necessário fazer apenas alterações nele, e isso seria refletido no mesmo elemento em todas as páginas, economizando assim uma dor de cabeça. :-)

Ashish Gupta
fonte
4

Codifique como você gosta de codificar, mas se você estiver passando para outra pessoa, é melhor usar o que todo mundo faz. Existem razões para CSS, então há razões para embutir. Eu uso os dois, porque é mais fácil para mim. Usar CSS é maravilhoso quando você tem a mesma repetição. No entanto, quando você tem vários elementos diferentes com propriedades diferentes, isso se torna um problema. Uma instância para mim é quando estou posicionando elementos em uma página. Cada elemento como uma propriedade superior e esquerda diferente. Se eu colocasse tudo isso em um CSS, isso realmente incomodaria a confusão entre a página html e css. Portanto, CSS é ótimo quando você deseja que tudo tenha a mesma fonte, cor, efeito de foco, etc. Mas quando tudo tem uma posição diferente, adicionar uma instância de CSS para cada elemento pode realmente ser um problema. Essa é apenas a minha opinião. O CSS realmente tem grande relevância em aplicativos maiores quando você precisa pesquisar no código. Use o plug-in de desenvolvedor da Mozilla e ele ajudará a encontrar os IDs e as classes dos elementos.

Praia de Noah
fonte
2

Mesmo se você usar o estilo apenas uma vez, como neste exemplo, você ainda misturou CONTEÚDO e DESIGN. Pesquisa "Separação de preocupações".

Ian Mercer
fonte
1

O uso de estilos embutidos viola o princípio de Separação de Preocupações, pois você efetivamente mistura a marcação e o estilo no mesmo arquivo de origem. Também, na maioria dos casos, viola o princípio DRY (Não se repita), uma vez que eles são aplicáveis ​​apenas a um único elemento, enquanto uma classe pode ser aplicada a vários deles (e até ser estendida através da magia das regras CSS! )

Além disso, o uso criterioso de classes é benéfico se o seu site contiver scripts. Por exemplo, várias bibliotecas JavaScript populares, como o JQuery, dependem muito das classes como seletores.

Por fim, o uso de classes adiciona clareza adicional ao seu DOM, uma vez que você possui efetivamente descritores que informam que tipo de elemento é um nó específico. Por exemplo:

<div class="header-row">It's a row!</div>

É muito mais expressivo do que:

<div style="height: 80px; width: 100%;">It's...something?</div>
csvan
fonte
1

O CSS in-page é a coisa mais importante no momento, porque o Google o classifica como uma experiência de usuário melhor do que o CSS carregado de um arquivo separado. Uma solução possível é colocar o css em um arquivo de texto, carregá-lo em tempo real com php e enviá-lo para o cabeçalho do documento. Na <head>seção, inclua isso:

<head> ...

<?php
$codestring = file_get_contents("styles/style1.txt");
echo "<style>" . $codestring . "</style>";
?>

... </head>

Coloque o css necessário em styles / style1.txt e ele será cuspido na <head>seção do seu documento. Dessa forma, você terá CSS in-page com o benefício de usar um modelo de estilo, style1.txt, que pode ser compartilhado por todas e quaisquer páginas, permitindo que as alterações de estilo em todo o site sejam feitas apenas por um único arquivo. Além disso, este método não requer que o navegador solicite arquivos css separados do servidor (minimizando o tempo de recuperação / renderização), pois tudo é entregue de uma só vez pelo php.

Tendo implementado isso, os estilos individuais únicos podem ser codificados manualmente, quando necessário.

Roger Stevens
fonte
Sim! isso é crucial na tentativa de minimizar o "tempo para pintar pela primeira vez" se todo o seu css estiver em arquivos que adiarão o DOM até que as folhas de estilo tenham sido baixadas pelo usuário. Tendo seus estilos críticos em um nó embutido <styles> na cabeça, você pode começar a renderizar o DOM imediatamente e adiar as folhas de estilo externas. Desempenha um grande fator em ~ conexões 3G e velocidade percebida. +1 para sua resposta
DOfficial
1

CSS embutido é bom para código gerado por máquina e pode ser bom quando a maioria dos visitantes navega apenas em uma página de um site, mas uma coisa que não pode fazer é lidar com consultas de mídia para permitir visuais diferentes para telas de tamanhos diferentes. Para isso, é necessário incluir o CSS em uma folha de estilos externa ou em uma tag de estilo interna.


fonte
0

Embora eu concorde totalmente com todas as respostas dadas acima, escrever o CSS em um arquivo separado é sempre melhor do que a reutilização, a manutenção e a separação de preocupações do código. Existem muitos cenários em que as pessoas preferem o CSS embutido no código de produção -

O arquivo CSS externo causa uma chamada HTTP extra ao navegador e, portanto, latência adicional. Em vez disso, se o CSS for inserido em linha, o navegador poderá começar a analisá-lo imediatamente. Especialmente por SSL, as chamadas HTTP são mais caras e adicionam latência adicional à página. Existem muitas ferramentas disponíveis que ajudam a gerar páginas HTML estáticas (ou trechos de páginas) inserindo arquivos CSS externos como código embutido. Essas ferramentas são usadas na fase Build and Release em que o binário de produção é gerado. Dessa forma, obtemos todas as vantagens do CSS externo e também a página se torna mais rápida.

Diptendu
fonte
3
Está faltando algo em relação a: latência. Um problema muito maior , na verdade: incorporar o CSS significa que cada solicitação de página deve conter esse CSS; caso contrário, o navegador pode armazená-lo em cache.
Andrew Barber
Você está certo. É por isso que incorporamos CSS quando o tamanho do código é muito pequeno, para que não cause muita sobrecarga no tamanho da página. Há um artigo muito interessante no Yahoo! Página de diretrizes de Perf developer.yahoo.com/performance/rules.html, que afirma que 60-80% dos usuários acessam seu site diariamente com um cache vazio ( yuiblog.com/blog/2007/01/04/performance-research-part -2 ) É claro que depende totalmente da popularidade do site - Quanto mais popular é o site, maiores são as chances de ter um cache não vazio.
Diptendu
Embora seja provável que um usuário acesse seu site com um cache vazio, é improvável que ele acesse sua página com um cache vazio. A menos que a página seja de uso único (ou seja, cada usuário a visualize apenas uma vez), ela terá um desempenho melhor com um arquivo css separado.
precisa saber é
Atualmente, muitas páginas da web modernas são projetadas como Aplicativo de página única, a página inteira é carregada apenas na primeira vez. Na próxima vez em que a página for alterada por meio de chamada AJAX. Portanto, mesmo que a página seja multiuso, o CSS externo será carregado apenas uma vez.
Diptendu
0

De acordo com a especificação HTML do AMP , é necessário inserir CSS no seu arquivo HTML (versus uma folha de estilo externa) para fins de desempenho. Isso não significa CSS embutido, mas eles não especificam folhas de estilo externas .

Uma lista incompleta de otimizações que um sistema de veiculação pode fazer é:

  • Substitua as referências de imagem por imagens dimensionadas para a viewport do visualizador.
  • Imagens embutidas visíveis acima da dobra.
  • Variáveis ​​CSS embutidas.
  • Pré-carregue componentes estendidos.
  • Minimize HTML e CSS.
Ronnie Royston
fonte
0

Além de outras respostas, você não pode segmentar as pseudo-classes ou pseudo-elementos no CSS embutido

Sushmit Sagar
fonte