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

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" />

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.

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.

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.

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

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?

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".

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.

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 ...

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. :-)

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.

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".

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>

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.

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.

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.

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.

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