¿Por qué las grandes páginas web contienen tantos elementos div anidados?

Modularidad es la palabra que estás buscando.

Tiene que ser así porque desarrollan y mantienen una aplicación web en lugar de un sitio web. Para hacer eso, necesitan planificarlo y desarrollarlo bloque por bloque, por lo que cada elemento que ve en esos sitios web es [probablemente] mantenido por un equipo diferente. Irónicamente, lo hacen para minimizar la complejidad.

Dibujé la imagen a continuación muy rápidamente, así que es un poco feo, no porque no tuviera tiempo, sino porque soy un asco al dibujar, pero entenderás el punto.

Conté 16 componentes, algunos de ellos son principales, otros son subcomponentes. No es sorprendente que cada uno de ellos tenga su propio aspecto y que hagan cosas específicas cuando hagas clic en ellos. Sin embargo, depende de Quora decidir cómo clasificarlos. Cuando miro el HTML, no veo nada más que fealdad, pero apuesto a que parece un poema para el equipo de Quora.

¿Alguna vez has hecho un edificio con legos? Así es exactamente como se hacen las aplicaciones web, bloque por bloque.

Echar un vistazo.

Una muy buena pregunta. Aunque estoy de acuerdo con la respuesta de Tamer Duruakan al 100%, creo que algunos de los principales han terminado de usar esta cosa

por esta o aquella razón. Especialmente Quora (marque ¿Por qué las grandes páginas web contienen tantos elementos div anidados?) Está loco por estos < div> s. Hay tantos que no puedo pensar en un buen uso de algunos. Supongo que son de raza casera o no, cualquier marco que utilicen debe estar a cargo de manejar este diseño. Si marca Stack Overflow, notará de inmediato cómo se maneja de manera mucho más simple como se supone que debe ser. (aunque su elección de usar tablas en los diseños de respuestas individuales es otra decisión interesante)

Debido a que estas páginas están formadas por muchos, muchos, muchos subcomponentes, cada uno de los cuales se administra de forma independiente. Los componentes están compuestos para crear la página. Por ejemplo, una página puede contener un componente de lista, y cada elemento en el componente de lista puede contener una casilla de verificación y un título y un menú desplegable dinámico, cada uno de los cuales puede estar en su propio div.

Así es como se construyen todos los sitios modernos: al componer componentes reutilizables y bastante robustos, vincularlos a los datos (¡y ese enlace generará aún más divs!) Y especificar cómo la UI responde a las acciones del usuario.

Los DIV te dan el control. La forma en que CSS y JS interactúan con las páginas se basa en el Modelo de Objetos del Documento de la página. Y todos esos DIV anidados facilitan la especificación de la parte de la página que desea diseñar (con CSS) o modificar (con JS).