CSS 'schema' how-to

Question

¿Cómo se puede establecer un 'esquema' CSS, o jerarquía, de estilos generales de elementos, estilos de elementos anidados y estilos de elementos clasificados? Para un novato de rango como yo, la cantidad de información en las hojas de estilo que veo es completamente abrumadora. ¿Qué proceso se sigue al crear hojas o hojas de estilo bien factorizadas, en comparación con los atributos de estilo en línea?

Answer 1

yo soy un gran fan de nombrar mis clases CSS por sus contenidos o tipos de contenido, por ejemplo, un <ul> que contiene "pestañas" navegación tendría class = "pestañas".Un encabezado que contiene una fecha podría ser class = "date" o una lista ordenada que contiene una lista de los 10 principales podría tener class = "chart". Del mismo modo, para los ID, uno podría dar el pie de página id = "pie de página" o el logotipo del sitio web id = "mainLogo". Encuentro que no solo hace que las clases sean fáciles de recordar, sino que también fomenta una cascada adecuada de CSS. Cosas como ol.chart {font-weight: bold; color: blue;} #footer ol.chart {color: green;} son bastante legibles y tienen en cuenta cómo los selectores CSS ganan peso al ser más específicos.

La indentación adecuada también es de gran ayuda. Es probable que su CSS crezca mucho a menos que desee refactorizar sus plantillas HTML evertime agregue una nueva sección a su sitio o desee publicar un nuevo tipo de contenido. Por mucho que lo intentes, inevitablemente tendrás que agregar algunas reglas nuevas (o excepciones) que no anticipaste en tu esquema original. Indeting le permitirá escanear un archivo CSS grande mucho más rápido. Mi preferencia personal es guión sobre la forma específica y/o anida el selector es, algo como esto:

ul.tabs { 
    list-style-type: none; 
    } 
     ul.tabs li { 
     float: left; 
     } 
      ul.tabs li img { 
      border: none; 
      } 

De esta forma el "padre" siempre está más a la izquierda y lo que el texto se divide en bloques contenedores para padres. También me gusta dividir la hoja de estilo en algunas secciones; primero vienen todos los selectores para elementos HTML. Los considero tan genéricos que deberían ser lo primero en realidad. Aquí pongo "body {font-size: 77%;}" y "a {color: # FFCC00;}" etc. Después de eso pondría selectores para las partes principales del framework de la página, por ejemplo "ul # mainMenu { float: left;} "y" div # footer {height: 4em;} ". Luego, a clases de objetos comunes, "td.price {text-align: right;}", finalmente seguido de pequeños bits adicionales como ".clear {clear: both;}". Ahora así es como me gusta hacerlo, estoy seguro de que hay mejores maneras, pero a mí me funciona.

Por último, un par de consejos:

1. hacer el mejor uso de las cascadas y no hacer cosas "clase superior". Si da un <ul> class = "textNav", entonces puede acceder a su <li> sy sus hijos sin tener que agregar ninguna asignación de clase adicional. ul.textNav li a: hover {}

2. No tenga miedo de utilizar varias clases en un solo objeto. Esto es perfectamente válido y muy útil. Luego tiene el control del CSS para grupos de objetos de más de un eje. También al darle una identificación al objeto se agrega un tercer eje. Por ejemplo:

   <style> 
   div.box { 
   float: left; 
   border: 1px solid blue; 
   padding: 1em; 
   } 
   
   div.wide { 
   width: 15em; 
   } 
   
   div.narrow { 
   width: 8em; 
   } 
   
   div#oddOneOut { 
   float: right; 
   } 
   </style> 
   
   <div class="box wide">a wide box</div> 
   <div class="box narrow">a narrow box</div> 
   <div class="box wide" id="oddOneOut">an odd box</div> 
   

3. Dando una clase a su documento <cuerpo> etiqueta (o ID ya que no solamente nunca debería ser uno ...) permite que algunas anulaciones ingeniosas para páginas individuales, como hilighting el elemento de menú para la página en la que se encuentra actualmente o que se está deshaciendo de ese segundo formulario de inicio de sesión redundante en la página de inicio de sesión, todo con CSS solo. "Body.signIn div # mainMenu form.signIn {display: none;}"

espero que encuentre al menos algunos de mis divagaciones útil y le deseamos lo mejor con sus proyectos!

Answer 2

Cop-out línea del año: depende.

¿Cuánto necesita para ser estilizado? ¿Necesita cambiar los aspectos de casi todos los elementos, o solo unos pocos?

Mi lugar favorito para obtener información como esta es CSS Zen Garden & A List Apart.

Answer 3

Poner todas sus declaraciones de CSS en aproximadamente el mismo orden en el que aterrizarán en la jerarquía de documentos generalmente es algo bueno. Esto hace que sea bastante fácil para los lectores futuros ver qué atributos se heredarán, ya que esas clases estarán más arriba en el archivo.

Además, esto es un poco ortogonal a su pregunta, pero si está buscando una herramienta que lo ayude a leer un archivo CSS y vea cómo todo sale mal, no puedo recomendar Firebug suficiente.

Answer 4

Hay una serie de cosas diferentes que puede hacer para ayudar en la organización de su CSS. Por ejemplo:

• Divida su CSS en varios archivos. Por ejemplo: tenga un archivo para el diseño, uno para el texto, uno para los estilos de reinicio, etc.
• Comente su código CSS.
• ¿Por qué no agregar una tabla de contenido?
• Intente utilizar un marco CSS como 960.gs para comenzar.

Todo depende del gusto personal. Pero aquí hay algunos enlaces que le puede resultar útil:

• http://www.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/
• http://www.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/
• http://www.louddog.com/bloggity/2008/03/css-best-practices.php
• http://natbat.net/2008/Sep/28/css-systems/

Answer 5

hay dos mundos:

1. The human editor perspective: Donde CSS es más fácil de entender, cuando tiene una estructura clara, buen formato, nombres detallados, estructurados en diseño, color y composición tipográfica ...
2. The consumer perspective: El visitante está muy satisfecho si su sitio realiza una búsqueda rápida, si se ve perfecto en su navegador, por lo que el css tiene que ser pequeño, en un solo archivo (para guardar más conexiones) y contener hacks CSS para admitir todos los navegadores.

Te recomiendo que comience con un CSS framework:

• Blueprint si te gustan las cosas más pequeñas
• o YAML para una gran y funcionales de un

También hay un list of CSS Frameworks. ..

Y luego ponerlo en forma (para el navegador) con un CSS Optimizer (p.e. CSS Form.&Opti.)

Puede medir los resultados (no optimizados < -> optimizados) con YSlow.

Answer 6

Considere que el CSS crea un "conjunto de herramientas" al que el HTML puede hacer referencia. Las siguientes normas ayudarán:

• Hacer class nombres ambiguos. En la mayoría de los casos, esto significa ponerlos de manera predecible. Por ejemplo, en lugar de left, use algo como header_links_object2_left.

• Uso id en lugar de classúnica si usted sabe que hay solamente vez será uno de un objeto en una página. Nuevamente, haga que el id sea inequívoco.

• Considere los efectos secundarios. Reglas como margin y padding, float y clear, etc. pueden tener consecuencias inesperadas en otros elementos.

• Si tu hoja de estilo se va a utilizar mis varios codificadores HTML, considera escribir una pequeña y clara guía sobre cómo escribir HTML para que coincida con tu esquema. Mantenlo simple, o los aburrirás.

Y como siempre, se prueba en varios navegadores, en múltiples sistemas operativos, en un montón de diferentes páginas, y en otras condiciones inusuales que se pueda imaginar.

Answer 7

Unos cuantos consejos para mantener organizada:

• Dentro de cada declaración, adoptan un orden de los atributos que se adhieren a. Por ejemplo, suelo mostrar márgenes, relleno, alto, ancho, borde, fuentes, mostrar/flotar/otros, en ese orden, lo que permite una lectura más fácil en mi próximo consejo
• Escriba su CSS como lo haría con cualquier otro código: sangría ! Es fácil escanear un archivo CSS para elementos de alto nivel y luego profundizar en lugar de simplemente ir por orden de origen de su HTML.
• HTML semántico con buenos nombres de clase puede ayudar mucho al recordar qué estilos se aplican a qué elementos.

Answer 8

El mejor consejo de organización que he recibido proviene de una presentación en An Event Apart.

Suponiendo que está manteniendo todo en una sola hoja de estilo, hay básicamente cinco partes a la misma:

1. reglas RESET (pueden ser tan simples como la regla * {margin: 0; padding: 0}, restablecimiento de Eric Meyer, o el YUI reinicio)
2. Elemento de elemento básico; esto es el tipo de tipografía básica para párrafos, espaciado para listas, etc.
3. Clases universales; esta sección para mí generalmente contiene cosas como .error, .left (soy sólo el 80% semántica), etc.
4. universal diseño/nº ID; #content, #header, o lo que sea que haya cortado su página en.
5. Reglas específicas de la página; si necesidad de modificar un estilo existente sólo por una o unas pocas páginas, pegar un alto ID único (cuerpo de la etiqueta es generalmente bueno) y mezcle sus anula al final del documento

No recomiendo usar un framework CSS a menos que necesites simular algo en HTML fast. Están demasiado hinchados, y nunca he conocido a alguien cuya semántica tiene sentido para mí; es mucho mejor práctica crear su propio "marco" a medida que descifra qué código comparten sus proyectos a lo largo del tiempo.

Leer el código de otras personas es un problema completamente diferente, y con eso le deseo la mejor de las suertes. Hay algunos CSS realmente horribles por ahí.