Devo escrever HTML ou CSS primeiro?

Existem muitas analogias para o desenvolvimento de HTML / CSS; o que pode ser um pouco confuso para um iniciante.

• HTML = fundações / casa
• CSS = paredes / planta / papel de parede

Existe alguma prática recomendada aqui? Qual devemos escrever primeiro?

Você deve construir uma casa primeiro e depois pintá-la.

Um documento HTML pode ser autônomo, mesmo que pareça monótono. Uma folha de estilos CSS não pode; nada é exibível (exceto como código), mas instruções para exibição.

É uma questão diferente que, durante a pintura, você pode fazer alterações na casa. Com casas reais que geralmente não são viáveis, mas no desenvolvimento de HTML + CSS, é comum notar que você precisa de marcação extra em seu documento HTML para facilitar o estilo. (É menos comum do que costumava ser, graças aos poderosos seletores CSS3.)

Sempre uso caneta e papel primeiro, em tamanho grande, em escala de desenhos.

Ou seja, se você não tiver seu design finalizado. Se você está confiante em seu design, eu tenho uma abordagem equilibrada; html é a estrutura, css a cola. Continue construindo no conceito (HTML, CSS) 'tuplas'.

(HTML,CSS) + (HTML,CSS) -> (bigHTML,bigCSS)

(bigHTML,bigHTML) + (bigHTML,bigCSS) -> (biggerHTML, biggerCSS)

e assim por diante.

É assim que eu faço, de qualquer maneira.

Depende muito do tipo de site / aplicativo da web que você cria e do tipo de contexto em que ele será usado.

Na maioria dos casos, o melhor caminho a seguir é criar HTML semântico, adicionar CSS para navegadores compatíveis com padrões e aplicar regras e hacks não intrusivos (por exemplo, comentários condicionais do IE, -vendor-somethingregras CSS, camadas de conformidade com javascript, etc. ) para oferecer suporte a navegadores não padrão e ativar recursos específicos do fornecedor.

No entanto, às vezes você tem um monte de aplicativos da web independentes que compartilham folhas de estilo (por exemplo, como parte de um estilo de casa) e pode até estar na posição de luxo para controlar a saída HTML de cada um. Nesse caso, escrever o CSS primeiro e depois ajustar o HTML para trabalhar com ele pode ser o melhor caminho. Se você fizer isso, o caminho a seguir é primeiro analisar que tipo de elementos de página você precisará, definir classes para eles e, em seguida, escrever um documento de teste estático que os utilize, escrever as folhas de estilo e só então começar a escrever o aplicativos que os utilizam.

Com toda a honestidade, porém, suspeito que essa posição de luxo seja extremamente rara, e poucas empresas realmente reconhecem o valor de um estilo de casa unificada no nível CSS; mais frequentemente, a praticidade determina que um designer cria o estilo da casa e, em seguida, conjuntos independentes de folhas de estilo são escritos para cada aplicativo que precisa segui-lo. A razão para isso é, principalmente, que a maioria das empresas usa software de prateleira com possibilidades limitadas de modificação para pelo menos parte de sua pilha e, muitas vezes, alterar sua saída HTML para caber em uma determinada folha de estilo é muito mais difícil (ou até impossível para alguns pacotes proprietários) do que reescrever o CSS. Além disso, o esforço de manter uma dúzia de conjuntos de folhas de estilo é frequentemente subestimado, e algumas pequenas diferenças e peculiaridades são consideradas aceitáveis.

Embora essa seja uma pergunta muito antiga, sinto a necessidade e a responsabilidade de comentar.

Sim, o HTML deve ser escrito antes do CSS, no entanto ...

Você NÃO escreve todo o HTML na página e depois volta para escrever o CSS. Isso tornaria extremamente difícil lembrar claramente as seções conforme você as constrói, mesmo com espaçamento e comentários adequados.

Você cria um site em camadas, como se estivesse fazendo um bolo de várias camadas.

1ª Camada - Primeiro você constrói a base, a div do contêiner, com sua altura mínima e largura css.

2ª Camada - Em seguida, você cria a próxima camada, as grandes seções da página (divs e estilos para a estrutura), como linhas ou seções com aparência de colunas.

Terceira camada e além - Depois, você continua adicionando na segunda camada de seções.

Dessa forma, você escreve um pouco de HTML, adiciona e estiliza-o com CSS para a estrutura, enxaguar e repetir. Na minha experiência, essa é uma maneira muito mais eficaz de criar páginas da Web e, na minha opinião, muito mais rápido que a alternativa de todo o HTML primeiro.

Por fim, tente usar " * {outline: 1px dotted red} " para obter uma estrutura de tópicos de todos os seus elementos. Ao adicioná-los à sua página com estilo, você pode ver a estrutura de tópicos e não precisa se preocupar em adivinhar a aparência até você adiciona suas cores de plano de fundo. Evito bordas para este caso de uso específico, porque bordas adicionam pixels aos elementos, o contorno é uma sobreposição.

Experimente, obrigado!

Acredito que trabalhar com a estrutura de sites (HTML) primeiro faça mais sentido, pois você terá uma idéia dos elementos e nomes para quando se trata de estilizar e formatar seu site.

Isso depende do seu papel real e do objetivo principal do desenvolvimento. Se o objetivo é determinar o que deve ser mostrado para qual extensão em uma página da web, deve-se começar com HTML. Se o objetivo é criar um design agradável e uniforme, pode-se começar com CSS. Nos dois casos, é melhor começar primeiro com papel e lápis e, se o objetivo atual é desenvolver um aplicativo da Web, não se deve começar com HTML ou CSS. A melhor prática é primeiro pensar no que você deseja desenvolver e depois dividir a tarefa em metas e sub-metas, em vez de apenas invadir tudo.

Projete a casa (layout da grade) juntamente com uma ideia de como será decorada; Construa a casa (HTML) com a grade; depois decore (folha de estilos CSS).

Depois de criar a primeira casa (página HTML), você pode aplicar a mesma decoração (folha de estilos CSS) à medida que avança. Você pode ajustar a decoração à medida que avança.

Eventualmente, você pode querer redecorar (refaça a folha de estilos CSS).

Você escolheu uma estrutura muito ruim para aprender e construir.

Há duas questões ortogonais em questão aqui.

1. Como crio um site que atenda às minhas necessidades?
2. Como eu aprendo a construir um site?

Essas são duas tarefas muito diferentes que podem (e geralmente exigem) diferentes abordagens potencialmente conflitantes.

Se você conhece as habilidades, tecnologias e requisitos de um projeto, inicia-se uma discussão sobre as necessidades de um site e realiza exercícios de design para determinar o que precisa ser implementado. Isso geralmente significa marcações e itens de design, que geralmente não têm nada a ver com HTML ou CSS (embora algumas pessoas façam maquete com HTML e CSS).

Se você está tentando aprender a construir um site, enquanto também o constrói, há um processo de exploração e aprendizado no qual você deve se envolver antes de saber o que é possível construir.

É aqui que uma estratégia modular e iterativa de design e construção se tornou popular. Quando você não sabe necessariamente para onde está indo com seu produto final (porque não sabe o que é possível), cria pequenos blocos de funcionalidade, experimenta se ele atende aos seus requisitos e depois incorpora esse experimento menor ao todo maior.

Então, o que isso realmente significa em termos concretos? Construir um site pode ser como construir uma casa, em que você elabora planos arquitetônicos (modelos de design) e depois começa a fazer a engenharia para calcular se sua casa irá resistir e atender às suas necessidades estéticas. Mas a criação de um site pode (e geralmente deve) parecer mais com a criação de uma série de pequenas experiências e com uma abordagem passo a passo para alcançar um produto que atenda ao seu conceito original.

Por uma questão muito prática, quase todo mundo faz futses com HTML e CSS ao mesmo tempo.

Esse é o problema comum em qualquer projeto de desenvolvimento de software imho e, como tal, você pode se beneficiar do uso de qualquer um dos conceitos, como Prototipagem rápida, DSDM. Combinável com qualquer estilo, por exemplo, ágil (programação extrema ou Design Orientado a Recursos (o meu favorito)). Aderindo aos princípios comuns que você decide no início quando os enfrenta, e se apegue a eles (KISS, YAGNI).

Então, para mim, é: - construa um 'protótipo' funcional básico primeiro, cobrindo um bloco funcional da demanda Restrinja-se a mergulhar em 'isso pode ser bom' / 'talvez seja necessário reutilizar essas coisas mais tarde', a menos que sejam óbvias. Diga a si mesmo, você não vai precisar! (YAGNI). - Anote as decisões que você toma como uma 'convenção de codificação' e siga-as, por exemplo, tags php: uso curtas porque, para o meu argumento de cenário, aplica-se e ... não. - adicione um estilo básico, mas restrinja-se novamente.

Em seguida, expanda seu código até alcançar um protótipo de nível superior que cubra mais blocos funcionais. Alinhado a isso, faça seu modelo CSS crescer. Assim que enfrentar decisões que afetam tudo o que você já fez (você o fará), leia-a, tome uma decisão e anote em suas convenções de codificação por que você foi para a esquerda ou para a direita.

'Circule' seu caminho em direção a um produto mais maduro e final.

Não tenha medo das grandes decisões que você esteja enfrentando, porque se preocupar com elas pode custar mais tempo do que corrigi-las no futuro. Além disso, não se preocupe com a comunidade da Internet olhando por cima do ombro com uma careta, no final, quando você tem um produto que funciona, você aprendeu muito, e o juiz imaginativo do código-fonte ruim ficará mais satisfeito com a próxima coisa que você criar (observe a iteração aqui).

Apenas meus 50cts

Ao comparar uma página da web a uma casa:

HTML = fundações / casa CSS = paredes / planta / papel de parede

Como você vai flutuar as paredes no ar até construir as fundações em que elas se assentam? Como você pode escrever CSS para estilizar sua página até ter as tags HTML escritas às quais está aplicando os estilos.

Cada parte do CSS está estilizando tags HTML específicas. Essas tags precisam existir para poder estilizá-las. Se você não tem HTML para estilizar, o arquivo CSS deve estar vazio, pois todos os estilos são redundantes, pois na verdade não estilizam nada.