¿Es así como estructurarías tu hoja de estilos CSS?

Question

Dejando de lado la pregunta de si deberías servir hojas de estilo simples o múltiples, asumiendo que estás enviando solo una, ¿qué piensas de esto como una estructura básica?

/ * Estructura * /

Todo el diseño de la plantilla debe incluirse aquí, así que el encabezado, el pie de página, el cuerpo, etc.

/ * Fin de estructura * /

/ * Componentes comunes * /

Elementos repetidos, como formularios de registro, listas, etc.

/ * Fin de componentes comunes * /

/ * Página específica 1 * /

Algunas páginas pueden tener estilos específicos, que irían aquí.

/ * Página específica 1 Fin * /

/ * Página 2 * /

específica

Como arriba

/ * Específico Page 2 Fin * /

/ * Página específica, etc. * /

Y así sucesivamente.

/ * Página específica, etc. Fin * /

Answer 1

Es similar a cómo estructuro la mía, sin embargo, me parece que usar subtítulos es la mejor manera de hacerlo, así que uso esta estructura:

/ *************************  * GLOBAL *  ************************* /

/ * Todas las cosas comunes van aquí bajo los subencabezados apropiados * /

/ * Formato de encabezado * /

/ * Formato de texto * /

/ * Formato de formulario * /

/ * Formato de tabla * /

/ * etc * /

/ *************************  * DISEÑO *  ************************* /

/ * Todas las cosas relacionadas con el diseño van aquí bajo los subtítulos * /

/ * Encabezado * /

/ * Barra lateral izquierda * /

/ * Barra lateral derecha * /

/ * Pie de página * /

/ *************************  * NAVEGACION *  ************************* /

/ * Puse la navegación por separado en el diseño, ya que puede haber varios puntos de navegación debajo de sus subtítulos * /

/ * Navegación principal (horizontal) * /

/ * Navegación a la izquierda * /

/ * Navegación a la derecha * /

/ * Breadcrumb Navigation * /

/ *************************  * FORMAS *  ************************* /

/ * Cualquier formato de formulario que varíe del formato común, si hay varios formularios con formato diferente, utilice los subtítulos * /

/ *************************  * MESAS *  ************************* /

/ * El mismo trato que los formularios * /

/ *************************  * LISTAS *  ************************* /

/ * El mismo trato que los formularios y tablas * /

/ *************************  * CONTENIDO *  ************************* /

/ * Cualquier formato específico para páginas particulares, agrupado por subtítulos para la página de la misma forma que los formularios, tablas y listas * /

/ *************************  * CSS SOPORTE *  ************************* /

/ * Esto es para cualquier formato especial que se pueda aplicar a cualquier elemento en cualquier página y que anule el formato regular para ese elemento. Por ejemplo, esto podría tener cosas como: * /

.float-right { float: right; }
.float-left { float: left; }
.float-center { margin-left: auto; margin-right: auto; }
.clear { clear: both }
.clear-block { display: block }
.text-left { text-align: left }
.text-right { text-align: right }
.text-center { text-align: center }
.text-justify { text-align: justify }
.bold { font-weight: bold }
.italic { font-style: italic }
.underline { border-bottom: 1px solid }
.nopadding { padding: 0 }
.nobullet { list-style: none; list-style-image: none }

/ * etc * /

Espero que ayude.

Por lo general, no recomiendo escribir en una sola línea como esa, o como se sugiere en el enlace que publicó Adam, ya que se vuelven difíciles si se hacen largos. Para los ejemplos anteriores, fue más rápido escribirlos de esa manera, así que no tuve que sangrar cada línea.

Para formatear recomendaría esta estructura:

.class {
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
}

Y así sucesivamente, pongo la estructura de la clase o ID en la parte superior, luego cualquier otro formato, como la fuente, etc. debajo de eso. Lo hace muy rápido y claro para hojearlo.

Answer 2

Lo que tenga sentido para ti es suficientemente bueno. Francamente, cuando alguien más busca algo en su hoja de estilos, o cuando busca algo, no importa, no va a tratar de averiguar cuál era su estructura organizativa. Solo van a buscar cualquier clase o elemento que necesiten ver. Entonces, mientras que por lo general mantengas cosas relacionadas entre sí, y cortes las cosas con comentarios como @Matt sugiere, estás bien.

El hecho del asunto es que incluso con una estructura organizativa muy bien pensada, al igual que con un sistema de archivo bien pensado, no siempre es obvio qué va a dónde; por lo tanto, es mejor que sea más sensible, no dedique mucho tiempo a mantener las cosas organizadas y confíe en las herramientas de búsqueda para encontrar lo que necesita.

Answer 3

Organizo mi CSS de forma similar a la tuya, pero comienzo con una sección de reinicio. La idea principal es ir de lo general a lo específico. Así que aquí va:

• restablecer
  
• estructura
  
• html_tags
  
• navegación
  
• secciones específicas
  
• Mensajes de error: esa es mi última sección

Answer 4

La estructura que presentaste es exactamente la que yo uso. Sin embargo, me parece que todavía es demasiado complejo con nuevas reglas que se muestran y se anulan entre sí ... Tal vez debería intentar atenerme a la solución sugerida en el tema vinculado por Adam en su lugar.

Answer 5

Parece que cada vez que creo un nuevo archivo css, encuentro una nueva forma de organizarlo. Y TODOS son mejores que los anteriores.