Heurística CSS orientada a objetos para programadores
Original web-page: http://emphaticsolutions.com/2011/03/19/object-oriented-css-for-programmers.html
BRİAN DOLL
19 de marzo de 2011
Me he sujetado en un profundo y oscuro secreto que podría fácilmente me echó de botella azul o Philz durante la fiebre del final de la mañana. No sé cómo hacer la calidad de escritura CSS. Está bien. Construí mi primer sitio web en 1995 y he estado haciendo cosas en la web profesionalmente desde 1997, pero al igual que muchos ingenieros que conozco, he estado de carga culting CSS para casi tan largo como eso ha sido posible.
¿Dónde puedo encontrar “mejores prácticas” para el desarrollo coherente y cohesiva CSS???
Recientemente hice este secreto a mi terapeuta Twitter y vi que no estaba solo. Hace 15 años estábamos construyendo HTML a mano con <font size=”2″> las etiquetas. Ahora tenemos rieles. Deje que se hunden en un poco. Esa es una cantidad insana de progreso. PERO… Mira el CSS para prácticamente todas las grandes aplicaciones web y el CSS es un desastre. Hay una mezcla de las convenciones de nombres, ninguna organización, un montón de repetición y probablemente cientos si no miles de líneas de estilos que ni siquiera están en desuso. Así que… ¿cómo lo hacemos bien? Se puede encontrar una CSS fragmento de un logotipo que hace girar 3D en el fuego en mil sitios web en este momento, pero donde está teniendo la gente acerca de la construcción coherente, cohesionado y sostenible CSS? ¿Cómo podemos aplicar las prácticas de programación regular para CSS?
Intro: orientada a objetos CSS
Nicole Sullivan, alias stubbornella, escribió acerca de su marco oocss en 2009 y ha estado golpeando entrar en razón a la gente desde entonces (y probablemente mucho antes). Asegúrese de leer el original OOCSS entrada de blog que comenzó todo y echa un vistazo a las presentaciones de Nicole, todos los cuales son de oro puro. (Y muchas, muchas gracias a Brent Miller para dar vuelta a mí en esto!)
De las 10 Mejores Prácticas de relieve en la presentación original, estos tres tenían el mayor efecto en mí:
- Separar estructura y la piel
- continente y contenido independiente
- Extender los objetos mediante la aplicación de múltiples clases a un elemento
- (* Bono # 4!) Utilizar las clases de estilo. Guardar id JavaScript.
Heurística diseño orientado a objetos
Una vez que diseñamos a propósito CSS de una forma orientada a objetos, de repente un mundo nuevo se abre. Ya no estamos en los atascos largos CSS reglas con estilos repetitivos. Estamos creando únicas clases pequeñas, que pueden estar compuestas al estilo de nuestros elementos. Hey, eso suena como la programación de verdad! ¡Hagámoslo!
Diseño Orientado a Objetos La heurística es uno de mis libros favoritos de programación. Dentro de la cubierta del autor enumera un centenar de heurística para la programación orientada a objetos. Si usted está buscando para el ganador del premio “mejor índice” 1996, eso es todo. Aquí están algunos de los heurísticos del libro, aplicado a OOCSS.
Una clase debe capturar una y sólo una abstracción clave
Este es un objetivo más específico que las mejores prácticas enumeradas anteriormente. Para mí, esto significa crear diferentes clases para manejar el comportamiento de estilo que no siempre se va a utilizar en conjunto. Sin embargo, la versión anti-patrón de esto es tener un montón de clases pequeñas que hacen muy poco y elementos que necesitan una docena de clases para funcionar correctamente. Aquí radica el arte del buen OOCSS.
No crear clases dios en su sistema
Al igual que en la declaración anterior, no hay que ver a clases con un gran número de estilos especificados. Me pregunto qué es una buena regla de oro? ¿Cuántas líneas tiene un CSS clase tiene que ser antes de que sea demasiado grande?
Modelar el mundo real siempre que sea posible
¡Nombres semánticos! Ahora que no estamos saturando nuestras clases con docenas de estilos, podemos nombrarlos bien. Piensa primero en el “usuario” de tu CSS. Cuando alguien está leyendo el marcado, ven una lista de nombres de clase que dan estilo a un elemento. ¿Con qué facilidad pueden visualizar dónde y cómo se representará un elemento al leer esos nombres?
Minimizar el número de clases con las que colabora otra clase
Yo diría que debemos trabajar duro para romper esta regla. Estamos componiendo clases (colaboradoras) como una regla. Debemos apuntar a limitar el número de clases necesarias para lograr el estilo deseado, sin embargo.
Una clase debe saber lo que contiene, pero nunca debe saber que lo contiene
Esto es enorme. Esto se refiere específicamente a la separación de la estructura y la piel. Las clases deben ser portátiles.
La herencia debe ser utilizado sólo para modelar una jerarquía de especialización
Relacionado: “Elegir composición sobre herencia”. Piénselo de esta manera: el DOM representa la herencia, mientras que las clases personalizadas se utilizan en la composición.
Factorizar el carácter común de comportamiento lo más alto posible en la jerarquía de herencia
Gran regla de CSS. Apalancamiento que el efecto “cascada” de CSS. Coloca estilos comunes como en lo alto de la jerarquía de herencia (DOM), y anular cuando sea necesario.
Las clases más identificadores
Estoy llamando al punto de bonificación #4 desde arriba por segunda vez porque es muy importante. Nicole dice que no deberíamos usar las ID para los elementos de estilo porque se supone que una ID se refiere a una sola instancia, y nuestro objetivo de OOCSS es la reutilización y la composición. Sin embargo, hay una razón aún más simple para usar clases en lugar de ID. Un elemento puede tener cero o un ID asignado, pero un elemento puede tener muchas clases. Componga estilos de varias clases y guarde sus ID para identificar realmente un solo elemento, especialmente cuando necesite capturarlo con JavaScript.
Enviar sus propias reglas para OOCSS!
Me encantaría escuchar sus normas orientadas a objetos para crear buena, fácil de mantener CSS. Añadir en los comentarios, envíeme un correo electrónico o copiar en twitter me @briandoll y voy a añadir a esta entrada.
Nota: Estoy al tanto de Saas y brújula, pero para los propósitos de claridad en torno a OOCSS, este post va dirigido a desnuda CSS. Sé que muchas personas les encanta CSS marcos generador, supongo que no estoy allí todavía personalmente.
© 2007-2015 Brian Doll
Recent Comments