para - lista de codigos css

¿Es así como estructuraría su hoja de estilo CSS?

Question

Dejando de lado la cuestión de si debe servir hojas de estilo individuales o múltiples, suponiendo que está enviando solo una, ¿qué piensa de esto como estructura básica?

/* Estructura */

Cualquier material de diseño de plantilla debe incluirse aquí, por lo que cabecera, pie de página, cuerpo, etc.

/ * Estructura final * /

/ * Componentes comunes * /

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

/ * Componentes comunes Fin * /

/ * 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 específica * /

Como anteriormente

/ * Página específica 2 Final * /

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

Y así.

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

Answer 1

Eso es similar a cómo estructurar el mío, sin embargo, creo que el uso de subtítulos es la mejor manera de hacerlo, así que utilizo esta estructura:

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

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

/ * Formato de encabezado * /

/* Formato de texto */

/ * Formato del formulario * /

/ * Formato de tabla * /

/ * etc * /

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

/ * Todas las cosas de diseño van aquí bajo subtítulos * /

/ * Encabezado * /

/* Barra lateral izquierda */

/* Barra lateral derecha */

/ * Pie de página * /

/ ************************* * NAVEGACIÓN * ********************* **** /

/ * Puse la navegación por separado en el diseño ya que puede haber un número de puntos de navegación bajo sus subtítulos * /

/ * Navegación principal (horizontal) * /

/ * Navegación izquierda * /

/ * Navegación a la derecha * /

/ * Breadcrumb Navigation * /

/ ************************* * FORMULARIOS * ********************* **** /

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

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

/ * Mismo trato que los formularios * /

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

/ * Mismo trato que formularios y tablas * /

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

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

/ ************************* * CSS SUPPORT * ******************** ***** /

/ * Esto es para cualquier formato especial que se pueda aplicar a cualquier elemento en cualquier página y hacer 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.

En general, no recomiendo escribir en una sola línea como esa, o como se sugiere en el enlace que Adam publicó, se vuelven muy difíciles de revisar si se alargan. Para los ejemplos anteriores, fue más rápido escribirlos de esa manera, así que no tuve que marcar cada línea.

Para formatear, recomendaría esta estructura:

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

Y así sucesivamente, puse 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 echarle un vistazo.

Answer 2

La estructura que presentó es exactamente lo que uso. Sin embargo, me parece que todavía se volvió demasiado complejo con nuevas reglas apareciendo y superándose entre sí ... Tal vez debería intentar atenerme a la solución sugerida en el tema vinculado por Adam en su lugar.

Answer 3

Lo que tenga sentido para ti es lo suficientemente bueno. Francamente, cuando alguien más busca algo en tu hoja de estilo, o cuando buscas algo, no intentan descubrir cuál era tu estructura organizativa. Simplemente van a buscar cualquier clase o elemento que necesiten ver. Por lo tanto, siempre y cuando generalmente guardes cosas relacionadas entre sí, y secciones las cosas con comentarios como sugiere @Matt, estás bien.

El hecho es que, incluso con una estructura organizativa muy bien pensada, al igual que con un sistema de archivo bien pensado, no siempre es obvio lo que va donde; por lo tanto, es mejor que sea algo sensato, no dedique mucho tiempo a mantener las cosas organizadas, y dependa de las herramientas de búsqueda para encontrar lo que necesita.

Answer 4

Parece que cada vez que creo un nuevo archivo CSS, encuentro una nueva forma de organizarlo. Y están TODOS mejor que el anterior.

Answer 5

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

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

Answer 6

Puede que le interesen las respuestas a esta pregunta: ¿Cuál es la mejor manera de organizar las reglas de CSS?