programacion - HTML: uso correcto de etiquetas de marcado, CSS y OCSS

programacion html pdf

Question

Estoy realmente interesado en la forma correcta de escribir marcado, especialmente con el paquete de HTML5. Y descubrió que es realmente difícil escribir un marcado que no dice nada sobre el aspecto del contenido. Y después de leer sobre CSS orientado a objetos y el uso de clases, definitivamente no es más fácil. Vengo de un mundo de programación donde las variables y la estructura lógica del código es clave. Entonces, al tratar de tener esto en cuenta, aquí hay algunas ideas sobre este tema.

Intenté varias cosas, reutilizando clases, por ejemplo, creando un conjunto de clases para paletas de colores. Como:

.color_pr1 {
      color: blue;
}

.color_pr2 {
      color: red;
}

Y también clases rápidas como:

.left {
          float:left;
}

.right {
          float:right;
}

.bold {
          font-weight:bold;
}

La antigua filosofía del "marcado no debería dictar cómo se muestra el contenido", las clases como .left .right y .bold deberían ser un gran no-no. Pero son reutilizables ¿verdad? ¡El código reutilizable es genial! Pero, descubrí que termino con marcas hinchadas que podrían verse así:

<div class="color_pr1 bold right">
    <p>Lorem ipsum</p>
</div>

O podría haber escrito el marcado de esta manera:

<div clas="right">
  <p class="color_pr1 bold">Lorem ipsum</p>
</div>

De cualquier manera, creo que es desorden. ¿Por qué no simplemente le das al padre div un ID o clase y escribes subclases específicas dentro de ese ID / clase en CSS?

La consistencia debe ser la clave aquí, y sin ella, terminas con un exceso de marcas que acaba dañando el flujo de trabajo del proyecto.

Por lo tanto, normalmente solo crearía un conjunto de paletas de colores como variables en SASS. Un conjunto básico de tamaños y asigna h1 a h6 sus valores predeterminados. Entonces, si tuviera que mezclarlos un poco, asignaría las etiquetas con una nueva clase de color o crearía un CSS que se vea así:

#somediv, .someclass {
  h1 {
     color: $color_pr1;
  }
}

¿No es mejor así que terminar con un marcado que tiene una gran cantidad de clases vinculadas a él? ¿Qué pasa con este escenario? Tienes un diseño que se parece a esto:

15.03.2013

Alguna imagen

Noticias de música

Los Beatles se reunieron

Lorem ipsum dolor sit amet

En este ejemplo, este es el marcado exacto:

<h3>15.03.2013</h3>
<img>Some image</img>
<h5><strong>Music news</strong></h5>
<h1>The Beatles reunited</h1>
<p>Lorem ipsum dolor sit amet</p>

En primer lugar, ¿cuándo es apropiado usar etiquetas <h> ? La primera etiqueta h3 se usa en la fecha. ¿Es eso realmente un rumbo? ¿Qué pasa con la etiqueta h5? No es realmente un título ¿verdad? Define la categoría bajo la cual se publica el artículo. ¿Debo usar la etiqueta <strong> ? No realmente, no es nada importante al respecto, en cuanto a las marcas. Es solo texto en negrita porque está diseñado así.

¿Sería este un mejor enfoque?

<section id="news_articles">
  <article>
   <h3>15.03.2013</h3>
   <img>Some image</img>
   <h5>Music news</h5>
   <h1>The Beatles reunited</h1>
   <p>Lorem ipsum dolor sit amet</p>
  </article>
</section>

¿Y escribir CSS que se parece más a esto?

* / valores predeterminados * / h1 {font-size: 16px; }

h3 {
  font-size: 12px;
}

h5 {
  font-size: 10px;
}

* / subclases de ID específicas * /

#news_articles {
  h3 {
    font-weight: bold;
  }
}

De modo que realmente se debe al equilibrio de escribir un marcado simple, así como a reutilizar el código CSS, que es mi principal problema aquí. ¿Cuáles son sus pensamientos sobre esto?

Answer 1

No estoy seguro de que esta respuesta sea satisfactoria para usted, pero si bien existen muchas prácticas recomendadas, generalmente se trata de casos por caso.

Como dices tú mismo, la reutilización es excelente, realmente lo es. "Izquierda", "Derecha", "Negrita" se encuentran entre los nombres de clase de presentación de mal menor debido a que son fáciles de entender y fáciles de recordar y, por lo tanto, se pueden reutilizar.

Sin embargo, el objetivo de usar nombres de clase que describan la función del elemento en lugar de su apariencia es que el marcado siempre tiene sentido incluso cuando el sitio se ejecuta bajo, por ejemplo, un diseño receptivo o incluso una revisión de diseño completa. Si un nuevo diseño tiene bloques de letras flotando a la izquierda en lugar de a la derecha, tendría que buscar en todas sus páginas / plantillas / bases de datos para eliminar los nombres de las clases izquierda / derecha o se encontraría en cualquiera de estos tres escenarios:

Acepta tener CSS como

.left { float: right }

o

.general-class blockquote { float: left !important; }

o terminan con selectores CSS no utilizados escritos en el marcado y / o las hojas de estilo.

Obviamente no es el fin del mundo, pero bueno, todo ayuda si quieres crear proyectos o fragmentos semánticamente correctos y fáciles de usar. En proyectos más pequeños, puede encontrar que es tan fácil cambiar el marcado manualmente, en esos casos es aún menos rentable.

En cuanto a sus otras preguntas: aquí es donde realmente se reduce a los escenarios caso por caso. Al escribir el marcado, sigue preguntándote qué propósito tiene todo. "¿Esto se ve como un encabezado?", "¿Esto se usa para la navegación?", "¿Es esta una sección diferente del artículo (o un artículo diferente en la sección)?" .

Si la respuesta a esa pregunta es "Sí", entonces probablemente no te equivocarás al dividir tu marcado como tal.

Para obtener información más detallada sobre cuándo un elemento HTML puede ser apropiado, consulte: http://dev.w3.org/html5/html-author/

Y una nota rápida sobre los selectores de CSS; siempre esforzarse por escribir como selectores cortos y eficientes como sea posible. No seas demasiado específico en tus selectores generales, haciendo un global:

h2 { text-transform: uppercase; }

Y luego solo tienes h2 en mayúsculas en una parte de tu sitio, pero docenas de otras h2 sin ella no tienen sentido, ya que tendrías que restablecer la transformación de texto siempre que crees una nueva sección.

Pero tampoco tiene sentido estar demasiado flojo con tus selectores; si se encuentra escribiendo nombres de clase en muchos de sus elementos de contenido (encabezados, imágenes, párrafos, por ejemplo), puede considerar escribir calificadores / selectores más eficientes.