CSS - Html5 semántico

Buenas, he visto y leído multitud de cursos, videos y temas hablando de HTML semántico, pero desde mi punto de vista, justo a continuación de explicar que es, se empieza a hacer todo lo que se carga el concepto. Entiendo que la idea sería dejar para HTML el contenido estructurado con cierto sentido que lo hacemos mediante las etiquetas semánticas que nos da html5. Dejaremos cualquier tipo de visualización para el css. Entonces, porque lo primero que se hace es meter un class=”coloresrojos”, class=”grida2columnas”, etc etc… Yo comprendería un class=”autor” ya que da un sentido semántico al uso del class, pero el resto es visualización y para mi idea, la persona q genera contenido HTML no tiene porque saber como se va a mostrar, eso es cosa del que genera y css y existen bastantes tipos de selectores para hacer lo que se desee. Para mí esta es una forma equivocada ya que genera acoplamiento alto entre los css y los HTML. Y en relación a esto, ¿como puedo hacer que en un css un selector herede de otros? tipo : .formato {background-color: red;}
h1 { /*¿como meter aqui las propiedades de .formato?*/ } Gracias.

Hola Jose, aquí te puedes encontrar de todo... desde quien dice que es mejor utilizar como nombre: colorRojo por ejemplo, antes que autor, ya que si le pones "autor" a una clase, no podrás volver a utilizar ese estilo en ningún otro lugar que necesites utilizar-lo, ya que puede ser un lió en el código para entenderlo posteriormente.

De igual manera, utilizar "colorRojo" también puede ser un error, ya que en cualquier momento quieres cambiar el color de la web, y tendrás que cambiar el nombre del estilo definido en toda la web.

Es mi opinión... hay que intentar ser lo mas genérico posible... por ejemplo, en el tema del color, yo utilizaría algo como: colorFondo o colorLetra o colorResaltado.

Espero que te sirva

Igual no me expresé bien. Lo del class="colorRojo" solo es un ejemplo, lo que quería decir es que si el HTML solo debe mostrar contenido, el asociar una case para darle un valor de Diseño no lo veo apropiado.

Ejemplo; si estamos creando una página de noticias, veo perfecto que en tu tag <article> uses class para decir si la noticia es deportiva, política, prensa rosa..... por ejemplo <article class="deporte"> Esta clase le esta dando un sentido semántico al <article>. Pero lo que no entiendo es que pensando en la maquetación de la página se haga <article class="deporte float-a-derecha". Float-a-derecha sería maquetación, diseño, y no creo que lo correcto fuese que se indicase en el HTML.

Esto tendría una fácil solución dejando que el CSS sea el que se encargue de todo el diseño, pero por lo que veo hasta el momento, no se puede hacer o no he encontrado como hacerlo.

Igual soy muy estricto con los conceptos, o lo más probable es que me falten conocimientos para entender como hacer bien esta distinción entre Contenido-Diseño. A ver si alguien me da una orientación.

Saludos.

No se si te he entendido bien, pero siguiendo tu ejemplo, tu como harías para poner el float:rigth en el <article>?

Una manera es desde el mismo estilo:

Te refieres a esto?

Ese seria un uso del class de forma semántica ya que .deporte le da un significado semántico a article, y luego es en el css donde le dices que va a flotar a la derecha. Pero el problema es que normalmente no creo que se vaya a hacer algo así. Una de las ideas del css es la reutilización, y ese css solo te valdría para el caso particular.

Supongamos que tenemos un reset.css que lo utilizamos para resetear todos los parámetros de cualquier proyecto.
Un grid.css que utilizamos para dar tamaño a todos tus proyectos.
Un layout.css que utilizamos para maquetar todos nuestros proyectos.

Para utilizar se haría en HTML supongamos que queremos un <article> que ocupe 6 columnas definidos en el grid.css como clase grids6.
Y además queremos que usando float vaya a la derecha, definida en layout.css como clase float-derecha.

Lo habitual es definir al article en el HTML <article class="grids6 float-derecha">.

Lo único que digo es que esto no es una definición de HTML semántico, ya que tanto grids6 como float-derecha son diseño.

Supongo que es lo habitual de la forma de construir sites, y que posiblemente por lo que estoy viendo no se puede hacer de otra forma si quieres usar distintos css, pero lo que no es, es una buena definición semántica de HTML.