Dois-je d'abord écrire du HTML ou du CSS?

Il existe de nombreuses analogies pour le développement HTML / CSS; ce qui peut être un peu déroutant pour un débutant.

• HTML = fondations / maison
• CSS = murs / plan / papier peint

Y a-t-il une meilleure pratique ici? Lequel devrions-nous écrire en premier?

Vous devez d'abord construire une maison, puis la peindre.

Un document HTML peut se suffire à lui-même, même s'il peut sembler terne. Une feuille de style CSS ne peut pas; il n'est rien affichable (sauf comme code) mais des instructions pour l'affichage.

C'est un problème différent que pendant la peinture, vous souhaitiez peut-être apporter des modifications à la maison. Avec de vraies maisons, ce n'est généralement pas possible, mais dans le développement HTML + CSS, il est courant de remarquer que vous avez besoin d'un balisage supplémentaire dans votre document HTML pour faciliter le style. (C'est moins courant qu'avant, grâce aux puissants sélecteurs CSS3.)

J'utilise toujours d'abord un stylo et du papier, du papier en taille réelle, des dessins à l'échelle.

C'est-à-dire si votre design n'est pas repassé. Si vous êtes confiant dans votre conception, j'ai une approche équilibrée; html est la structure, css la colle. Continuez à construire dans le concept (HTML, CSS) de «tuples».

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

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

etc.

Voilà comment je le fais, de toute façon.

Cela dépend beaucoup du type de site Web / application Web que vous créez et du type de contexte dans lequel il sera utilisé.

Dans la plupart des cas, la meilleure façon de procéder consiste à créer un code HTML sémantique, puis à ajouter du CSS pour les navigateurs conformes aux normes, puis à appliquer des hacks et des règles non intrusifs (par exemple, les commentaires conditionnels d'IE, les -vendor-somethingrègles CSS, les couches de conformité javascript, etc.). ) pour prendre en charge les navigateurs non standard et activer les fonctionnalités spécifiques au fournisseur.

Cependant, parfois, vous avez un tas d'applications Web indépendantes qui partagent des feuilles de style (par exemple dans le cadre d'un style maison), et vous pouvez même être dans la position de luxe pour contrôler la sortie HTML de chacune. Dans ce cas, écrire d'abord le CSS, puis peaufiner le HTML pour l'utiliser, peut être une meilleure façon de procéder. Si vous faites cela, la voie à suivre consiste à analyser d'abord le type d'éléments de page dont vous aurez besoin, à définir des classes pour ceux-ci, puis à écrire un document de test statique qui les utilise, à écrire les feuilles de style, puis à commencer à écrire le les applications qui les utilisent.

En toute honnêteté, cependant, je soupçonne qu'une telle position de luxe est extrêmement rare, et peu d'entreprises reconnaissent réellement la valeur d'un style de maison unifié au niveau CSS; le plus souvent, l'aspect pratique dicte qu'un concepteur crée le style de la maison, puis des ensembles indépendants de feuilles de style sont écrits pour chaque application qui doit la suivre. La raison en est, principalement, que la plupart des entreprises utilisent des logiciels standard avec des possibilités de modification limitées pour au moins une partie de leur pile, et souvent, changer leur sortie HTML pour l'adapter à une feuille de style donnée est beaucoup plus difficile (voire impossible pour certains packages propriétaires) que de réécrire le CSS. De plus, l'effort de maintenir une douzaine de jeux de feuilles de style est souvent sous-estimé, et certaines différences et bizarreries mineures sont jugées acceptables.

Même s'il s'agit d'un très vieux Q&R, je ressens le besoin et la responsabilité de le commenter.

Oui, HTML devrait être écrit avant CSS, cependant ...

Vous n'écrivez PAS tout le HTML sur la page , puis revenez pour écrire le CSS. Cela rendrait extrêmement difficile de se souvenir clairement des sections que vous construisez, même avec un espacement et des commentaires appropriés.

Vous construisez un site Web en couches, comme si vous faisiez un gâteau à plusieurs couches.

1ère couche - D'abord, vous construisez la base, le conteneur div, avec ses css min-height et width.

2e couche - Ensuite, vous créez la couche suivante, les grandes sections de la page (divs et style pour la structure), telles que les lignes ou les sections ressemblant à des colonnes.

3e couche et au-delà - Ensuite, vous continuez à ajouter dans la deuxième couche de sections.

De cette façon, vous écrivez du HTML, ajoutez-le puis stylisez-le avec CSS pour la structure, rincez et répétez. D'après mon expérience, c'est un moyen beaucoup plus efficace de créer des pages Web, et à mon avis beaucoup plus rapide que l'alternative de tout HTML en premier.

Enfin, essayez d'utiliser " * {contour: 1px dotted red} " pour obtenir un aperçu de tous vos éléments, lorsque vous les ajoutez sur votre page avec un style, vous pouvez voir leur contour et ne pas avoir à vous soucier de deviner à quoi il ressemble jusqu'à vous ajoutez vos couleurs d'arrière-plan. J'évite la bordure pour ce cas d'utilisation particulier car les bordures ajoutent des pixels aux éléments, le contour est une superposition.

Essayez, merci!

Je crois que travailler avec la structure des sites Web (HTML) est d'abord plus logique, car vous aurez alors une idée des éléments et des noms pour le style et la mise en forme de votre site Web.

Cela dépend de votre rôle réel et de votre objectif principal de développement. Si le but est de déterminer ce qui doit être montré dans une page Web, il faut commencer par HTML. Si l'objectif est de créer un design agréable et uniforme, on peut commencer par CSS. Dans les deux cas, il vaut mieux commencer par le papier et le crayon, et si l'objectif actuel est de développer une application Web, il ne faut pas du tout commencer avec HTML ou CSS. La meilleure pratique consiste à réfléchir d'abord à ce que vous voulez développer, puis à diviser la tâche en objectifs et sous-objectifs au lieu de simplement tout pirater.

Concevez la maison (disposition de la grille) avec une idée de la façon dont elle sera décorée; Construisez la maison (HTML) avec la grille; puis décorez-le (feuille de style CSS).

Après avoir construit la première maison (page HTML), vous pouvez simplement appliquer la même décoration (feuille de style CSS) au fur et à mesure. Vous pouvez modifier la décoration au fur et à mesure.

Finalement, vous voudrez peut-être redécorer (refaire la feuille de style CSS).

Vous avez choisi un cadrage vraiment mauvais pour l'apprentissage et la construction.

Il y a ici deux problèmes orthogonaux.

1. Comment créer un site qui répond à mes besoins?
2. Comment puis-je apprendre à créer un site Web?

Ce sont deux tâches très différentes qui peuvent (et le font souvent) nécessiter différentes approches potentiellement conflictuelles.

Si vous êtes familiarisé avec les compétences, les technologies et les exigences d'un projet, on commence par une discussion sur les besoins d'un site, et passe par des exercices de conception afin de déterminer ce qui doit être mis en œuvre. Cela signifie souvent des balises et des éléments de conception, qui n'ont souvent rien à voir avec HTML ou CSS (bien que certaines personnes fassent des maquettes avec HTML et CSS).

Si vous essayez d'apprendre à construire un site, tout en construisant un site, il y a un processus d'exploration et d'apprentissage auquel vous devez vous engager avant de savoir ce qu'il est même possible de construire.

C'est là qu'une stratégie de conception et de construction modulaire et itérative est devenue populaire. Lorsque vous ne savez pas nécessairement où vous allez avec votre produit final (parce que vous ne savez pas ce qui est possible), vous créez de petits morceaux de fonctionnalités, testez si cela répond à vos besoins, puis incorporez cette petite expérience dans le plus grand ensemble.

Alors, qu'est-ce que cela signifie concrètement? La construction d'un site peut être comme la construction d'une maison, où vous élaborez des plans architecturaux (maquettes de conception), puis commencez à faire l'ingénierie pour calculer si votre maison résistera et répondra à vos besoins esthétiques. Mais la construction d'un site peut (et devrait souvent) ressembler davantage à la construction d'une série de petites expériences et à une approche étape par étape pour atteindre un produit qui répond à votre concept d'origine.

De manière très pratique, presque tout le monde a la même impression avec son HTML et son CSS en même temps.

C'est le problème commun dans tout projet de développement logiciel à mon humble avis et en tant que tel, vous pourriez bénéficier de l'utilisation de l'un des concepts tels que le prototypage rapide, DSDM. Combinable avec n'importe quel style, par exemple agile (programmation extrême ou Feature Driven Design (mon préféré)). S'en tenir aux principes communs que vous décidez au début lorsque vous les affrontez et vous y accrocher (KISS, YAGNI).

Donc, pour moi, c'est: - construire d'abord un `` prototype '' fonctionnel de base, couvrant un bloc fonctionnel de la demande. Dites-vous que vous n'en aurez pas besoin! (YAGNI). - Notez les décisions que vous prenez en tant que «convention de codage» et respectez-les, par exemple les balises php: j'utilise des décisions courtes parce que pour mon argument de scénario .. s'applique et ... ne l'est pas. - ajoutez un style basique mais limitez-vous à nouveau.

Développez ensuite votre code jusqu'à ce que vous atteigniez un prototype de niveau supérieur qui couvre plus de blocs fonctionnels. En ligne avec lui, faites grandir votre modèle CSS. Dès que vous faites face à des décisions qui affectent tout ce que vous avez déjà fait (vous le ferez), lisez-le, prenez une décision et notez dans vos conventions de codage pourquoi vous êtes allé à gauche ou à droite.

«Entourez» votre chemin vers un produit plus mature et final.

N'ayez pas peur des grandes décisions auxquelles vous pouvez être confronté, car vous en inquiéter peut vous coûter plus de temps que de le réparer en cours de route. De plus, ne vous inquiétez pas si la communauté Internet regarde par-dessus votre épaule avec un froncement de sourcils, à la fin, lorsque vous avez un produit qui fonctionne, vous avez beaucoup appris et le juge imaginatif du mauvais code source va être plus content de la prochaine chose que vous construisez (notez l'itération ici).

Juste mes 50cts

Lorsque vous comparez une page Web à une maison:

HTML = fondations / maison CSS = murs / plan / papier peint

Comment allez-vous faire flotter les murs en l'air jusqu'à ce que vous construisiez les fondations sur lesquelles ils reposent? Comment pouvez-vous écrire CSS pour styliser votre page jusqu'à ce que vous ayez écrit les balises HTML auxquelles vous appliquez les styles.

Chaque élément de CSS met en forme des balises HTML spécifiques. Ces balises doivent exister pour pouvoir les styliser. Si vous n'avez pas de code HTML à styliser, le fichier CSS doit être vide car tous les styles qu'il contient sont redondants car ils ne stylisent rien.