¿Debo escribir HTML o CSS primero?

Hay muchas analogías para el desarrollo de HTML / CSS; lo cual puede ser un poco confuso para un principiante.

• HTML = fundaciones / casa
• CSS = paredes / plano / fondo de pantalla

¿Hay alguna mejor práctica aquí? ¿Cuál deberíamos escribir primero?

Primero debes construir una casa, luego pintarla.

Un documento HTML puede sostenerse por sí mismo, aunque parezca aburrido. Una hoja de estilo CSS no puede; no es nada visualizable (excepto como código) sino instrucciones para mostrar.

Es un problema diferente que durante la pintura, es posible que desee hacer cambios en la casa. Con casas reales que generalmente no es factible, pero en el desarrollo de HTML + CSS, es común notar que necesita un marcado adicional en su documento HTML para facilitar el diseño. (Es menos común de lo que solía ser, gracias a los potentes selectores CSS3).

Siempre uso primero lápiz y papel, papel de tamaño completo, dibujos a escala.

Eso es si no tiene su diseño resuelto. Si tiene confianza en su diseño, tengo un enfoque equilibrado; html es la estructura, css el pegamento. Siga construyendo en 'tuplas' de concepto (HTML, CSS).

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

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

y así.

Así es como lo hago, de todos modos.

Mucho depende del tipo de sitio web / aplicación web que realice y del tipo de contexto en el que se va a utilizar.

En la mayoría de los casos, la mejor manera de hacerlo es crear HTML semánticamente sólido, luego agregar CSS para navegadores que cumplan con los estándares y luego aplicar hacks y reglas no intrusivos (por ejemplo, comentarios condicionales de IE, -vendor-somethingreglas CSS, capas de cumplimiento de JavaScript, etc. ) para admitir navegadores no estándar y habilitar funciones específicas del proveedor.

Sin embargo, a veces tiene un montón de aplicaciones web independientes que comparten hojas de estilo (por ejemplo, como parte de un estilo de casa), e incluso puede estar en una posición de lujo para controlar la salida HTML de cada una. En ese caso, escribir el CSS primero, y luego ajustar el HTML para trabajar con él, puede ser una mejor manera de hacerlo. Si hace esto, el camino a seguir es analizar primero qué tipo de elementos de página va a necesitar, definir clases para estos, luego escribir un documento de prueba estático que los use, escribir las hojas de estilo y solo luego comenzar a escribir el aplicaciones que los usan.

Sin embargo, con toda honestidad, sospecho que esa posición de lujo es extremadamente rara, y pocas empresas reconocen realmente el valor de un estilo de casa unificado a nivel CSS; más a menudo, la practicidad dicta que un diseñador crea el estilo de la casa, y luego se escriben conjuntos independientes de hojas de estilo para cada aplicación que necesita seguirlo. La razón de esto es, principalmente, que la mayoría de las empresas usan software estándar con posibilidades de modificación limitadas para al menos parte de su stack, y a menudo, cambiar su salida HTML para que se ajuste a una hoja de estilo dada es mucho más difícil (o incluso imposible para algunos paquetes propietarios) que reescribir el CSS. Además, a menudo se subestima el esfuerzo de mantener una docena de conjuntos de hojas de estilo, y se consideran aceptables algunas diferencias y peculiaridades menores.

A pesar de que este es un Q&A muy antiguo, siento la necesidad y la responsabilidad de comentarlo.

Sí, HTML debe escribirse antes de CSS, sin embargo ...

Usted no escribo todo el HTML de la página y, a continuación, volver a escribir el CSS. Esto haría que sea extremadamente difícil recordar con claridad las secciones a medida que las desarrolla, incluso con el espacio y los comentarios adecuados.

Construye un sitio web en capas, como si estuviera haciendo un pastel de varias capas.

Primera capa: primero construye la base, el contenedor div, con su altura mínima y ancho css.

Segunda capa: luego construye la siguiente capa, las secciones grandes de la página (divs y estilo para la estructura), como filas o secciones que parecen columnas.

Tercera capa y más allá: luego sigue agregando dentro de la segunda capa de secciones.

De esta manera, escribes algo de HTML, lo agregas y luego lo estilizas con CSS para la estructura, enjuagas y repites. En mi experiencia, esta es una forma mucho más efectiva de crear páginas web y, en mi opinión, mucho más rápido que la alternativa de todo HTML primero.

Por último, intente usar " * {esquema: 1px punteado rojo} " para obtener un esquema de todos sus elementos, a medida que los agrega en su página con estilo, puede ver su esquema y no tener que preocuparse por adivinar cómo se ve hasta agregas tus colores de fondo. Evito el borde para este caso de uso en particular porque los bordes agregan píxeles en los elementos, el contorno es una superposición.

Pruébalo, gracias!

Creo que trabajar con la estructura de sitios web (HTML) primero tiene más sentido ya que luego tendrá una idea de los elementos y sus nombres para el estilo y el formato de su sitio web.

Esto depende de su rol real y objetivo principal de desarrollo. Si el objetivo es determinar qué se debe mostrar hasta qué punto se extiende en una página web, se debe comenzar con HTML. Si el objetivo es crear un diseño agradable y uniforme, uno puede comenzar con CSS. En ambos casos, es mejor comenzar primero con papel y lápiz, y si el objetivo actual es desarrollar una aplicación web, no se debe comenzar con HTML o CSS. La mejor práctica es pensar primero en lo que desea desarrollar y luego dividir la tarea en objetivos y submetas en lugar de simplemente hackear todo junto.

Diseñe la casa (diseño de cuadrícula) junto con una idea de cómo se decorará; Construye la casa (HTML) con la cuadrícula; luego decorarlo (hoja de estilo CSS).

Después de haber construido la primera casa (página HTML), puede aplicar la misma decoración (hoja de estilo CSS) a medida que avanza. Puede ajustar la decoración a medida que avanza.

Eventualmente, es posible que desee redecorar (rehacer la hoja de estilo CSS).

Has elegido un marco realmente pobre para aprender y construir.

Aquí hay dos problemas ortogonales.

1. ¿Cómo construyo un sitio que satisfaga mis necesidades?
2. ¿Cómo aprendo a construir un sitio web?

Esas son dos tareas muy diferentes que pueden (y a menudo lo hacen) requerir diferentes enfoques potencialmente conflictivos.

Si está familiarizado con las habilidades, tecnologías y requisitos de un proyecto, uno comienza con una discusión sobre las necesidades de un sitio y realiza ejercicios de diseño para determinar qué es lo que se necesita implementar. Eso a menudo significa marcas y cosas de diseño, que a menudo no tendrán nada que ver con HTML o CSS (aunque algunas personas hacen maquetas con HTML y CSS).

Si está tratando de aprender cómo construir un sitio, mientras también construye un sitio, hay un proceso de exploración y aprendizaje en el que debe participar antes de saber qué es posible construir.

Aquí es donde una estrategia de diseño y construcción modular e iterativa se ha vuelto popular. Cuando no necesariamente sabe a dónde va con su producto final (porque no sabe lo que es posible), construye pequeños trozos de funcionalidad, experimenta si cumple con sus requisitos y luego incorpora ese experimento más pequeño en el todo más grande

Entonces, ¿qué significa eso en términos concretos? Construir un sitio puede ser como construir una casa, donde se dibujan planos arquitectónicos (maquetas de diseño) y luego se comienza a hacer la ingeniería para calcular si su casa se mantendrá en pie y satisfará sus necesidades estéticas. Pero construir un sitio puede (y a menudo debería) parecerse más a construir una serie de pequeños experimentos, y adoptar un enfoque paso a paso para llegar a un producto que cumpla con su concepto original.

Como cuestión muy práctica, casi todos se divierten tanto con su HTML como con su CSS al mismo tiempo.

Este es el problema común en cualquier proyecto de desarrollo de software en mi humilde opinión y, como tal, podría beneficiarse del uso de cualquiera de los conceptos como Rapid Prototyping, DSDM. Combinable con cualquier estilo, por ejemplo, ágil (programación extrema o diseño basado en funciones (mi favorito)). Cumplir con los principios comunes que usted decide al principio al enfrentarlos y aferrarse a ellos (KISS, YAGNI).

Entonces, para mí es: - construya primero un 'prototipo' funcional básico, cubriendo un bloque funcional de la demanda. ¡Dígase a sí mismo, no lo necesitará! (YAGNI) - Escriba las decisiones que tome como una 'convención de codificación' y cúmplalas, por ejemplo, etiquetas php: utilizo las cortas porque para mi argumento de escenario ... se aplica y ... no se aplica. - Agregue un estilo básico, pero vuelva a restringirse.

Luego expanda su código hasta llegar a un prototipo de nivel superior que cubra más bloques funcionales. En línea con esto, haga crecer su modelo CSS. Tan pronto como enfrente decisiones que afecten todo lo que ya hizo (lo hará), léalo, tome una decisión y escriba en sus convenciones de codificación por qué se fue hacia la izquierda o hacia la derecha.

'Haz un círculo' hacia un producto más maduro y final.

No tenga miedo de las grandes decisiones que pueda estar enfrentando, porque preocuparse por ellas puede costarle más tiempo que arreglarlo en el futuro. Además, no se preocupe por la comunidad de Internet que mira por encima del hombro con el ceño fruncido, al final, cuando tiene un producto que funciona, ha aprendido mucho y el juez imaginativo del código fuente malo estará más complacido por lo siguiente que construyes (nota la iteración aquí).

Solo mis 50cts

Al comparar una página web con una casa:

HTML = cimientos / casa CSS = paredes / plano / fondo de pantalla

¿Cómo vas a flotar las paredes en el aire hasta que construyas los cimientos sobre los que se sientan? ¿Cómo puedes escribir CSS para darle estilo a tu página hasta que hayas escrito las etiquetas HTML a las que estás aplicando los estilos?

Cada pieza de CSS está diseñando etiquetas HTML específicas. Esas etiquetas deben existir para poder diseñarlas. Si no tiene HTML para diseñar, entonces el archivo CSS debe estar vacío ya que cualquier estilo en él es redundante, ya que en realidad no tiene estilo.