Explicando por que o estilo não deve ser feito diretamente em HTML

ItamarG3 09/02/2017. 12 answers, 2.942 views
lesson-ideas web-development html css

Recentemente percebi que foi obsoleto de html de acordo com este site . A partir desta resposta no estouro de pilha , a substituição da marca é feita a partir do CSS. A explicação dada à mudança é que html é sobre a estrutura do documento, e que layout e animação e estilo etc. devem ser feitos a partir do CSS.

Isso me fez pensar:

Ensinaria explicitamente a diferença entre definir o atributo de style de uma tag html e fazê-lo através de CSS útil para aumentar a compreensão dos alunos sobre a união de CSS e HTML?

Para diminuí-lo, procuro exemplos ou explicações de como ensinar isso explicitamente pode tornar mais fácil para os alunos modelar suas páginas da web . De preferência, uma explicação.

Ao "ensinar explicitamente", o que quero dizer é realmente dedicar uma lição com o título de "Styling through .CSS", ou algo parecido.

Algum contexto, se for necessário:

Os alunos aprendem design web básico: HTML, JavaScript (muito básico), JSP e SQL. Eles aprendem estes por 1 ano e no final do ano eles devem ter um site (para o qual eles recebem notas). Eu estou querendo saber se uma lição inteiramente sobre CSS pode levar a sites de melhor aparência.

5 Comments
3 Puppy 07/30/2017
O problema principal aqui é que você está assumindo que o estilo não deve ser feito diretamente em HTML, e que o uso de CSS é melhor. Nenhuma dessas coisas é verdadeira.
ItamarG3 07/31/2017
@Puppy bem, parte da questão é se eu deveria ensiná-lo separadamente. Se eu não fizer isso, eles não usarão folhas de estilo. Mas você acha que qualquer site em qualquer lugar realmente codifica tudo, é css no html? Every div tem uma montanha de código em seu atributo de style ?
1 David Spence 07/31/2017
Este site mostra o poder de manter o css separado. csszengarden.com - Mesma estrutura, folha de estilos css diferente.
ItamarG3 07/31/2017
@DavidSpence é bom. Definitivamente vou usar isso
1 no comprende 07/31/2017
Seja lá o que fizer, não mostre-lhes esta publicação sobre a análise de HTML com o Regex . Poderia dar-lhes pesadelos!

12 Answers


richard 07/30/2017.

Eu gosto da idéia de produzir alguns lençóis de estilo, e os alunos os aplicam ao HTML. Eles podem então ver o poder de ter folhas de estilo separadas.

Eles podem então começar a editar as folhas de estilo e ver o poder de uma pequena mudança pode mudar todos os títulos, ou todos os parágrafos, etc.

Eu também escrevi no passado um arquivo HTML que tinha um conjunto de botões na parte inferior. Estes botões desencadeariam um arquivo CSS diferente a ser carregado. Era um JavaScript muito simples.

Para responder devem ser mantidos separados

Mantendo estilo e conteúdo separados, é recomendado pelo W3 e muitos outros. Implementa separação de preocupações e responsabilidade única. Ambos os padrões muito importantes no design de software.

Para responder deve dedicar uma lição para separar os arquivos CSS.

Sim. Se é importante manter estes separados, o que é, então você deve ensinar os alunos a mantê-los separados. Economize tempo ao não ensiná-los a misturá-lo com o HTML (Isso economizará o tempo duas vezes, pois você não terá que desinstruí-lo).


Eu apenas fiz isso com uma ou duas pessoas (não uma aula).

5 comments
ItamarG3 07/30/2017
Esse segundo parágrafo parece especialmente útil. Mas isso não responde se devo realmente dedicar uma lição para ensinar como e por que se deve escrever uma folha de estilo css, em vez de atributos de style html inline.
richard 07/30/2017
Adicionado uma resposta parcial para If e por que dedicar uma lição.
1 Buffy 07/30/2017
Eu concordo que desinstruir é um uso especialmente desperdício do tempo de todos. É melhor pegar equívocos antes de construir e reforçar os maus hábitos.
1 richard 07/30/2017
@tim, isso é apenas uma optimisation carga. Conceitualidade, ele ainda deve permanecer separado. No entanto, o Google está dizendo colocá-lo no mesmo arquivo. Eles não estão dizendo que você deve modelar cada bit separadamente. Eles estão dizendo levar o que poderia estar em um arquivo css e adicioná-lo à seção <style> do html.
1 Darren 07/31/2017
Em vez de dar aos alunos uma variedade de folhas de estilo que afetam seu código, eu tentaria a abordagem oposta. Depois de ensinar-lhes estilos em linha em HTML, dar-lhes uma página que depende de um documento CSS para o seu estilo e pedir-lhes para criar sua própria folha de estilos para ele (usando as mesmas técnicas que eles aprenderam usando o HTML em linha - apenas uma questão de rotular os estilos e colocá-los em um só lugar). Então, todos na classe podem comparar suas folhas de estilo em um assunto de teste comum (o que você forneceu) e ver as possibilidades.

Buffy 07/30/2017.

Se você quiser apenas criar uma página simples e ad-hoc e nunca mudará no futuro e será sempre vista em um tipo de dispositivo, então, com certeza, crie o estilo diretamente no html. É o mesmo quando você escreve um programa que só será executado uma vez em um dispositivo para obter uma resposta, após o qual o programa fica obsoleto. Não há, portanto, motivo para codificar com cuidado. "Rápido e sujo" funciona para tais coisas.

However coisas mudam e as páginas da Web são visualizadas em dispositivos com diferentes tamanhos de tela, até mesmo modelos de cores. E eles podem ser vistos no futuro em dispositivos que ainda não existem.

Então, se você quiser construir sites importantes e duradouros e que devem ser mantidos no futuro, use CSS. Você provavelmente não escreveria um importante programa C em main , mas, pelo menos, fatorria as coisas que devem ser iguais, mas são reutilizadas. Na programação C simples, determinamos funções para isso. Em html, consideramos o estilo. Em um nível mais profundo, o lado do servidor também causa grande parte dos dados, etc. Isso permite que as coisas que deveriam ser iguais, permaneçam iguais, e nos permite modificar um nível de design independentemente de outros níveis.

Isso não é exatamente o mesmo, mas veja o código subjacente da página inicial do Google. Eu não sei o que eles usam para juntar isso e mantê-lo, mas duvido que seja apenas um editor de texto. Observe que sua página inicial , embora incrivelmente simples no layout, muda freqüentemente.

Note to the Instructor Quando você se prepara para classificar o trabalho do aluno, visualize-o em vários dispositivos, com diferentes resoluções de tela. No entanto, não sugiro que você também os faça fornecer por dispositivo css.

Para esse assunto, veja algumas das páginas do StackExchange em uma área de trabalho contra um telefone. E para um choque, veja a fonte e as folhas de estilos de algumas das páginas.

2 comments
1 Luke Sawczak 07/31/2017
A comparação com funções é boa. Presumo que o pecado em questão está fornecendo diretamente atributos de estilo no HTML de origem. Em caso afirmativo, pode ser comparado a tomar o corpo de um método e apenas aderir a você onde você chamaria o método. Contra-produtivo no extremo.
no comprende 08/01/2017
Para um choque real, veja a fonte e as folhas de estilo das páginas da Microsoft e do Moodle! Eles podem ter centenas de linhas por muito tempo. O conceito original de HTML era que funcionaria em dispositivos que "ainda não existem". E atualmente há tantos tamanhos de tela que talvez seja apenas uma variável.

AnoE 07/30/2017.

Para fazê-los realmente entender o que você pode fazer com CSS sozinho - com only substituir outro arquivo CSS - leve-os para o CSS Zen Garden . Com exatamente o mesmo HTML para cada página, e only o arquivo .css substituído, você obtém páginas absurdamente selvagens. Do nada pequeno e sereno aos cubos 3D-scrolling ...

Em seguida, explique-lhes que o conjunto de habilidades necessário para tornar o HTML, vs. o conjunto de habilidades para (especialmente extremas como essas) CSS é muito diferente e que o HTML funciona apenas como o suporte de informações.

Um outro bem seria instalar um leitor de tela (para o cego) - há uns com uso livre limitado - para mostrar como o mesmo HTML "parece" quando falado em voz alta.

Assinalar também que essas ferramentas para deficientes visuais podem, por exemplo, extrair textos de links e assim por diante do HTML, se estiver bem estruturado, e isso também permite navegar apenas uma página com o teclado - o que pode ser útil se um está tão inclinado, mesmo que a visão esteja bem.

Finalmente, salientar que uma página com boa separação de conteúdo e estilo tem maior chance de trabalhar em dispositivos portáteis - a palavra-chave é um projeto responsivo, onde o conteúdo pode fluir livremente para qualquer resolução conforme necessário.


thehayro 07/30/2017.

Para diminuí-lo, procuro exemplos ou explicações de como ensinar isso explicitamente pode tornar mais fácil para os alunos modelar suas páginas da web. De preferência, uma explicação.

Como diz Richard, os alunos podem ver como uma simples edição do estilo pode mudar todos os elementos.

Por exemplo, você poderia deixar seus alunos "sentir" o benefício da separação do estilo do html. O que significa, dar-lhes um exercício, onde eles precisam desenhar alguns elementos (por exemplo, colorir o fundo do elemento) no seu html. Em seguida, deixe-os mudar cada elemento para outra cor. A lição seria deixá-los entender que esta tarefa pode ser muito menos demorada se você separar o estilo do html. Você pode então demonstrar como mudar uma linha no css, que muda todas as cores de fundo dos elementos.

4 comments
thesecretmaster♦ 07/30/2017
HI thehayro! Seja bem-vindo aos educadores de informática !
Puppy 07/30/2017
Alternativamente, eles poderiam gerar seu HTML através do código como uma pessoa sã, caso em que é trivial mudar a cor de cada elemento sem folhas de estilo separadas.
1 thehayro 07/30/2017
Certo. Isso depende dos requisitos em que a página da Web deve ser exibida (celular / desktop). Mas a questão, na medida em que entendi, foi como explicar o porquê e como há necessidade de uma separação de HTML e CSS.
no comprende 08/01/2017
Quando aprendi o CSS, entreguei-me as tarefas de criar um tabuleiro de xadrez reconfortante e um layout de página canônico de três colunas com cabeçalho e rodapé.

SpiritBH 07/31/2017.

Bem pergunte-se: por que separamos algo em qualquer forma de código?

Em quase todas as linguas de programação / script, há separação e delegação. Fazemos isso para garantir que sejam mais facilmente capazes de acompanhar todo o código e possam identificar mais facilmente os problemas (que inevitavelmente brotarão porque nenhum programador é infalível)

Então, acho que uma lição dedicada sobre CSS é uma boa ideia, porque ajuda a entender o que é responsável por isso. Isso ajuda-os a entender que se todo o HTML estiver correto quando se olha para a fonte, mas toda a maquiagem ainda está confusa, eles precisam olhar para o CSS.

Além disso, o CSS é grande, flexível e pode fazer muito mais do que apenas colocar uma boa borda em torno de coisas. Para mostrar a classe o que pode fazer, e o quão complexo pode obter, irá conduzir o ponto mais próximo de como é imprudente misturar o HTML e o CSS muito profundamente.

No final, a separação de CSS de HTML (ou qualquer código para esse assunto) é um desenvolvimento atticate; não é sobre o funcionamento da criação (melhor) é sobre o desenvolvedor ter mais e mais fácil controle sobre sua criação.

Talvez naquela nota que você queira tentar fazer a classe verificar os outros, isso ajudará a ver como é importante ter um código delegado limpo quando você trabalha em equipe.

1 comments
ItamarG3 07/31/2017
você levanta alguns pontos muito interessantes. Obrigado! e bem-vindo aos educadores em informática

gabe3886 07/31/2017.

Uma maneira ligeiramente diferente de olhar para ele pode ser apresentar o código DRY (Não se repita).

Ao usar o CSS para fazer o estilo, você sabe que, simplesmente adicionando uma classe a um elemento HTML, o estilo deve assumir. Se você tivesse que adicionar manualmente tudo, então, quando precisar mudar uma parte, você precisa mudar muitos, muitos mais.

Para roubar uma idéia de ilustração das Escolas do W3 , se você quisesse, digamos, parágrafos para ter diferentes cores de fundo, você poderia fazê-lo desta maneira:

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Mas, se eu quiser mudar a ordem, então é 2,4,3,1, mas mantenho a coloração, então eu tenho que mudar todos os estilos incorporados em cada tag. Se isso acontecer em várias páginas, a carga de trabalho pode vir a ser enorme.

Se o fiz em CSS, posso fazer o seguinte:

p:nth-child(odd) {
    background: red;
}

p:nth-child(even) {
    background: blue;
} 

Agora já não se importa com o conteúdo, posso ordená-los como eu gosto e o estilo ainda funciona. Muito esforço mudou. Ignorando o pedido, se eu quisesse mudá-los para cores mais sensíveis para que eles sejam facilmente legíveis, eu mudo o valor em CSS uma vez, e é aplicado a cada item DOM correspondente.

Além disso (como o CSS pode ser incorporado em HTML na tag principal), dividindo-o em um arquivo e incluindo isso significa que não preciso repetir o CSS (agora mais sensível) em vários arquivos, em estruturas de pastas para cada um página que eu tenho. Inclui o arquivo CSS no cabeçalho e os estilos produzem efeito. Agora, se eu precisar fazer alterações nas cores ou adicionar estilos adicionais, obtendo os mesmos benefícios de não precisar duplicar o que eu tive ao não usar estilos inline.

Outro benefício de ter um arquivo separado, longe das responsabilidades divididas, é o desempenho. Os navegadores são muito bons em arquivos de armazenamento em cache, portanto, se ele precisa baixar um único arquivo CSS (idealmente minificado) para o site, uma vez que ele pode voltar a aplicar, é uma coisa menos para fazer o download para outras páginas. O desempenho sempre deve ser uma consideração para as pessoas, especialmente com o aumento na navegação móvel. Se uma página da Web possui muitos CSS, a fonte é, naturalmente, grande. Isso leva mais tempo para baixar e / ou tornar-se útil, o que pode colocar as pessoas fora dela, a espera se torna inaceitável para eles.


ncmathsadist 08/01/2017.

Nós ensinamos que existem três camadas para uma página da web: estrutura, aparência e comportamento. A estrutura é determinada pelo DOM, que é criado com uma marcação HTML5 bem formada. Quando aprendemos sobre o HTML, começamos imediatamente a desenhar a árvore do documento, para que possamos entender como os elementos de uma página se relacionam um com o outro.

A aparência é determinada pelo CSS, que acessa o DOM para formatar e modelar a página. Isso é mantido em um arquivo separado para que ele possa ser compartilhado por um grupo relacionado de páginas. O HTML lida com situações ad hoc usando id ou class . Usando estas facilita a manutenção de páginas, uma vez que o estilo de itens que possuem esses atributos é feito em one place em um arquivo CSS.

A terceira camada é o comportamento, que deve aparecer em um arquivo JavaScript. O JavaScript never precisa aparecer em uma página, salvo para chamar funções do código de manipulação de eventos. Mesmo isso pode ser anexado em um arquivo JS. Certifique-se de que seus alunos conheçam load eventos de load e load cedo, para que possam atrasar a chamada do código até que os elementos da página existam.

Se você instalar o Nó, você pode executar testes do código JS na linha de comando e desenvolver conjuntos de teste para as funções que você criou.

Separar as três camadas mantém as coisas perfeitas e maximiza a reutilização do código.


user1639154 07/31/2017.

Parece que muitas respostas aqui não abordam o ponto de herança no estilo, pois isso também deve ser ensinado. A regra básica é o que é lido último será aplicado.

o primeiro a carregar é geralmente a folha externa na cabeça do documento. Uma folha de estilo ligada na cabeça do documento será superada por estilos colocados no campo html, e aqueles por sua vez também serão substituídos por estilos colocados diretamente no elemento DOM. A etiqueta importante! Pode ser usada para alterar esse comportamento também.

A maioria colocará todos os seus css em seu próprio arquivo porque é mais fácil de manter e não exigirá tanto trabalho quando atualizado / alterado.

EDIT: apenas para esclarecer um pouco mais, são apenas os estilos específicos que se combinam nas classes que se chocam / se substituem, se o inline adiciona um estilo para sublinhar o texto, isso não está na classe na folha externa para Por exemplo, apenas adicionará esse estilo extra. As classes não se substituem diretamente entre si, mas se mesclam entre si.

5 comments
1 ItamarG3 07/31/2017
Uau. Bem-vindo aos educadores de informática . Isso é realmente algo que eu não tinha considerado. Eu adoraria se você pudesse adicionar alguns exemplos ou descrição que mostre isso. (Eu can escrevê-los, mas estou mais interessado em ver o que você pode pensar). Esta é realmente uma resposta interessante :)
1 ItamarG3 07/31/2017
Não relacionado: por que você não leva nosso tour ? Tenho certeza que você acharia interessante.
user1639154 07/31/2017
Eu entendi um pouco errado, é a folha de estilo externo primeiro, depois estilos de documentos e, em seguida, no elemento, meu cérebro nunca é 100% na manhã de segunda-feira. :)
ItamarG3 07/31/2017
perdoe e esqueça ;). Você pode editar sua resposta. Há um botão de edit \ link diretamente na sua resposta. Enquanto você estiver nisso, você gostaria de adicionar algum exemplo para demonstrar o que a sua resposta está abordando? Realmente seria uma resposta muito melhor: D
user1639154 07/31/2017
Infelizmente, não tenho tempo agora. Eu só queria mencionar a herança do css, pois é um aspecto importante do css.

rackandboneman 08/03/2017.

Faça um projeto no qual o resultado é DUAS visualizações completamente diferentes do same document , por exemplo, uma versão que parece ótimo em um monitor grande e outro que parece ótimo em um iPhone.

O uso de uma página não estática, mas gerado por computador, documentos atualizáveis ​​direcionará o ponto para casa ainda mais, uma vez que a incorporação de informações de estilo no gerador de documentos o tornará visivelmente mais complexo - as únicas opções para mexer com estilo serão a mudança do generator documentos com todos os problemas envolvidos ou a stylesheet que é exatamente o que você pretendia. Ainda melhor: atribua two grupos em cantos separados da sala para fazer o documento gerando e as peças da folha de estilos - e regular como as especificações são comunicadas entre os dois.

4 comments
ItamarG3 08/03/2017
Isto é incrível. Uau.
rackandboneman 08/03/2017
Bem, torne-o credível então.
ItamarG3 08/03/2017
É incrivel porque resolve um problema com circunstâncias que não consigo revelar (material escolar), mas não aborda exactly a questão ...
1 rackandboneman 08/03/2017
Ah, e eu me intrometo na discussão como professora, mas como profissional de TI - o que descrevi é por que as coisas são feitas na prática, assim como a teoria que você quer ensinar diz :)

Chris M. 08/02/2017.

Há muitas respostas boas aqui. Um ponto que eu ainda não vi feito é que o conteúdo e o design são muitas vezes criados por pessoas ou equipes separadas e, portanto, ter cada definido com suas próprias ferramentas e linguagem permite os fluxos de trabalho separados necessários.

4 comments
ItamarG3 08/02/2017
Uau. Eu não tinha pensado nisso. Você se importaria de expandir um pouco sobre como explicar isso em uma lição separada sobre o uso de folhas de estilo CSS?
Chris M. 08/02/2017
Eu usaria uma analogia. Os engenheiros automotivos não escolhem as cores do carro. Os roteiristas geralmente não fazem design de figurino.
ItamarG3 08/02/2017
Entendo. Talvez você inclua tais analogias na sua resposta editando a resposta.
1 Buffy 08/03/2017
Na verdade, é pior do que isso. Em algumas grandes empresas com uma presença na web importante, há uma equipe de padrões sentada acima do conteúdo e equipes de layout. Se o layout é um pixel fora do padrão, você faz isso. Um pixel.

thesecretmaster 08/03/2017.

Uma razão importante pela qual os estilos inline são ruins é a legibilidade do código, simples e simples. Neste caso, um exemplo deve ser suficiente para provar seu ponto:

  
The Title
This is a super great article

Comparado com:

  
The Title
This is a super great article

Além deste exemplo, sem usar classes e ids, você faz o DOM muito mais difícil de manipular usando javascript e você torna impossível usar pseudo-elementos e alguns dos realmente agradáveis ​​seletores CSS como :nth-child() e :first-child , para citar alguns.


Puppy 07/31/2017.

Eu discordaria completamente - o estilo deveria ser feito diretamente em HTML.

O principal problema é que o estilo não é remotamente independente da estrutura HTML. Simplesmente escrever os estilos em um arquivo separado fisicamente não altera isso. Um bom exemplo é o suporte a dispositivos móveis. Em teoria, você poderia fazer um arquivo CSS móvel. Mas, na realidade, você provavelmente precisa de um design de UI completamente separado para produzir uma boa experiência em um dispositivo móvel e, em seguida, uma estrutura HTML separada para suportar isso e, em seguida, um conjunto separado de estilos. "Faça o botão o mesmo, mas um pouco menor", só funciona para as peças mais pequenas.

Produzir a UI correta envolve a produção da estrutura HTML que suporta os estilos que você precisa. Uma vez que os dois estão de fato intimamente acoplados, fazendo com que eles sejam colocados apenas torna as coisas fáceis de entender e tudo em um só lugar.

Além disso, uma vez que você provavelmente está gerando seu código HTML por meio de código, não há nenhum problema com a geração de HTML com estilos duplicados, pois seu gerador de código pode cuspir estilos durante todo o dia.

Ter CSS cru é tremendamente problemático, pois os estilos são completamente aleatórios e abrangentes, e são difíceis de reutilizar. Você faz um nome de classe com a esperança de que ninguém mais o use. Você aninhar suas próprias classes dentro desse elemento para tentar resolver um pouco esse problema, mas agora você não pode reutilizar essas classes em outros lugares, pois não estão na estrutura direita do DOM. Então você descobre que algum cara aleatório em alguma parte completamente separada de sua página usou sua classe sem notificá-lo e agora você quebrou mudando seus estilos. E boa sorte obter verificação de tipo, suporte IDE, etc. Também é difícil criar, por exemplo, classes parametrizadas, ou globalmente substituições, por exemplo, display: flex com display: flex e display: -webkit-flex para iOS.

A maneira correta de lidar com os estilos é lidar com eles como com qualquer outro código - encapsulá-los em algumas funções.

5 comments
1 thesecretmaster♦ 07/31/2017
Oi Filhote de cachorro, seja bem vindo aos educadores de informática ! Se você quiser conhecer outro cachorrinho, você pode dizer oi para Buffy , que é um buldogue, no bate-papo . Esta é uma resposta interessante, obrigado por compartilhar sua perspectiva aqui!
2 richard 07/31/2017
Embora eu não concorde com tudo o que você diz. Eu vejo seu ponto. Especialmente a última linha (acho que você deveria expandir isso). Mostre-nos como você acha que deveria ser feito. Mesmo se não concordarmos 100%, poderíamos aprender algo.
no comprende 08/01/2017
Sua resposta me lembra o tempo em que fiz uma pergunta e alguém disse: "Se você lê a Missa em Latim". Existem muitas maneiras "corretas" de fazer as coisas, e do seu ponto de vista, com o HTML gerado, de fato, não faz diferença. Mas a maioria dos instrutores não ensina o HTML gerado, assim como a maioria dos programadores não aprende a escrever compiladores. A camada que adicionamos para tornar a manutenção de arquivos de HTML mais fácil é supérflua com HTML descartativo. Eu também gosto de gerar coisas, mas estou na vasta minoria. Talvez possamos falar sobre idiomas específicos do domínio em algum momento?
Puppy 08/01/2017
Instrutores que não ensinam HTML gerado não ensinam HTML útil.
ItamarG3 08/02/2017
@Puppy Isso é assim?

Related questions

Hot questions

Language

Popular Tags