Desarrollo web front-end: ¿Qué sitios web grandes tienen el marcado más limpio?

La respuesta pedante sería que a w3c solo le importaría usar el marcado correcto y no el más limpio. No ha definido clean y w3c no usa clean porque a w3c no le importa cómo formatea su marcado, solo que su marcado es correcto.

Perdón por la respuesta pedante.

La pregunta es difícil de responder porque cualquier cosa dada ahora podría ser obsoleta en uno o dos años.

El marcado limpio actual consistente es uno que coloca cada etiqueta en su propia línea y quizás coloca los atributos en su propia línea con sangría lejos de la etiqueta a la que pertenece el atributo. Ponga atributos en líneas nuevas si los caracteres exceden algún límite arbitrario.

Si está hablando de HTML, entonces es mejor usar el doctype HTML5. Eliminar el estilo de presentación de todas las etiquetas. Use clases en etiquetas y nombre las clases para el propósito de la etiqueta que se está utilizando.

Si desea profundizar y tener acceso a componentes web. Sería mejor utilizar componentes web, ya que reduciría la cantidad de etiquetas y proporcionaría una mayor semántica a los datos de la página.

Para XML,

Es mejor que tenga una lista de elementos para agruparlos debajo de un nombre de elemento al que se pueda hacer referencia fácilmente usando xpath. En su mayor parte, si es difícil hacer referencia a algo usando xpath, entonces debe repensar su marcado xml.

¿Incluye CSS como lenguaje de marcado?

En cuanto al sitio con el más limpio? ¿La mayoría de ellos? Si el sitio no pasa las pruebas en w3c, entonces no está limpio.

Lo que no debería decir

Escuché esta pregunta hace más de una década, una vez que CSS se usaba más para crear los llamados diseños sin mesa en la época de Netscape 4 e IE 5 y IE6 días. Cuando Firefox estaba comenzando. La razón por la que la respuesta que le di no da una respuesta clara, es porque la pregunta no es de inicio.

Dejame explicar. Mientras que como artesanos web, podríamos preocuparnos por el marcado y la calidad del código, a los visitantes no. Creo que es importante dedicar tiempo a crear un marcado correcto y “limpio” para cualquier tarea. En última instancia, las únicas personas que se preocupan son las que revisan su código, si alguien lo hace y usted mismo.

La otra razón por la que no importa y esta es una triste verdad que condenó el movimiento hace más de una década. Es extremadamente difícil crear un marcado limpio que se pueda presentar de la misma manera en todos los navegadores. Cuando ingresas al CSS, es aún más difícil. Esto está cambiando y es mucho mejor que hace más de una década, pero aún existe, en parte, debido a los navegadores heredados de hace más de una década que todavía no morirán.

El argumento de que un sitio no está “limpio”, porque hizo una cosa u otra, quedó en el camino con el contador que, “al menos funciona en todos los navegadores” y “al menos funciona en todos los navegadores, a diferencia de su” sitio web limpio “.

El “marcado más limpio” es una declaración bastante ambigua, pero lo interpretaré como sitios web con código semántico y que generalmente cumple con los estándares web actuales.

Wikipedia Al sumergirnos en el inspector de páginas de Chrome, ya podemos ver clases CSS muy estructuradas seguidas de roles ARIA. Si bien sus nombres de clase CSS no son perfectamente legibles para un ser humano, en general, el marcado de la página se realiza de manera limpia, y se obtiene la esencia de cada sección simplemente al ver el código HTML.

Estándares de diseño web de EE. UU. Lanzado en algún momento del año pasado, los Estándares de diseño web de EE. UU., Aunque tal vez no es un sitio “grande”, sigue una buena cantidad de convenciones de marcado y proporciona otro buen caso de uso.

Bloomberg Si bien no parecen tener ningún rol ARIA definido (aunque no hice mucho), sus estilos CSS son un buen ejemplo de la sintaxis BEM (bloque, elemento, modificador), una estrategia que se ha vuelto popular entre muchos diseñadores y desarrolladores web como una forma de comunicar semánticamente cuál es el propósito de cada elemento HTML en la página, y administrar grandes bases de código front-end entre los equipos.

Medio. Hay una gran publicación (en Medium, cómo meta) sobre los estilos CSS de Medium y el enfoque que adoptaron al renovarlos en 2014. Definitivamente vale la pena leerlo si está interesado en la administración y organización de estilos front-end. El sitio de Overall Medium tiene un código bastante legible (incluidos los roles ARIA) y también implementa la sintaxis BEM para una mayor legibilidad / colaboración.

Si tiene otros sitios en mente, simplemente haga clic derecho y use el inspector web de Chrome (o Firefox o Safari) para verificar el HTML subyacente. Inmediatamente obtendrá una idea de lo moderno que es un sitio web al tratar de comprender, simplemente a partir de la estructura HTML y las clases CSS, cuál es el propósito de cada elemento en la página en particular. ¡Espero que ayude!

Qué tal esto..?
http://www.vitriviera.com/