¿Cómo entender las arquitecturas CSS de otras personas?

Question

Soy razonablemente bueno con CSS. Sin embargo, cuando trabajo con CSS de otra persona, es difícil para mí ver la "imagen más grande" en su arquitectura (pero no tengo ningún problema cuando trabajo con una hoja de CSS que escribí). Por ejemplo, no tengo problemas para usar Firebug para aislar y solucionar problemas de compatibilidad con navegadores cruzados, o solucionar un problema flotante o cambiar la altura de un elemento en particular. Pero si me piden que haga algo drástico como, "Quiero que las barras laterales derechas de las páginas A, B, C y D tengan un borde rojo. Quiero que las barras laterales derechas de las páginas E, F y G tengan una borde azul si y solo si el usuario pasa el mouse sobre ", entonces me lleva mucho tiempo mapear todas las reglas de herencia de CSS para ver la" imagen más grande ".

Por alguna razón, no encuentro la misma dificultad con el código de back-end. Después de una breve sesión informativa de cómo funciona una característica, y una inspección rápida del controlador y el código del modelo, me sentiré cómodo con la arquitectura. Pensaré que "es razonable suponer que habrá una clase de empleado que hereda de la clase de persona que usa un controlador de departamento". Si descubro detalles inconvenientes que no son consistentes con el estilo arquitectónico en general, estoy seguro de que puedo volver a colocar las cosas en su lugar.

Con el trabajo CSS de otra persona, es mucho más difícil para mí ver las "relaciones" entre diferentes clases, y cuándo y cómo se usan las clases. Cuando hay muchas reglas de herencia, me siento abrumado.

Tengo problemas para articular mi pregunta y cuestiones ... Todo lo que quiero saber es, ¿por qué es mucho más difícil para mí ver la imagen más grande en la arquitectura de otra persona CSS que en comparación con la capa de lógica de negocios de otra persona ?

** ¿Tiene algo que ver con que CSS sea una tecnología relativamente nueva, y no hay muchos patrones de diseño populares?

Answer 1

Diría que, en general, no existe una "arquitectura" en la forma en que la mayoría de los desarrolladores escriben CSS (al menos en mi experiencia). La mayoría de las personas crea CSS de forma incremental a medida que se necesitan reglas; por lo general, no se planifica de antemano como lo es la arquitectura del código. A menudo las personas agrupan reglas relacionadas con bloques de comentarios, o tal vez en hojas de estilo separadas, pero en realidad no hay muchos patrones establecidos a seguir.

Su mejor opción es utilizar un buen editor de CSS que le permita examinar visualmente la jerarquía de las reglas definidas en sus hojas.

Answer 2

En primer lugar, es harder to read code that it is to write code.

En segundo lugar, diría que desde el CSS permite una estructura suelta, entonces la gente va configurarlo de una manera complicada, así que diría que es la naturaleza de la bestia.

Answer 3

Creo que muchas veces la gente simplemente piratea el CSS sin un concepto general de la imagen. Muchas veces simplemente agregan cosas ya que están diseñando las cosas con poco respeto a las "convenciones" que establecieron y que no son directamente nuevas en su mente, lo que lleva a todo tipo de nombres de redundancias y discrepancias.

No creo que sea tanto que el CSS sea nuevo, ya que el CSS es a menudo el campo de los diseñadores y muchas veces no piensan arquitectónicamente al diseñar algo, todo es bastante adverso.

Sé que cuando estoy una ventaja de I Establecer un conjunto formal de Convenciones para nombrar la clase y la organización como una de las primeras cosas que hago y después de que el martillo a los subordinados a los extremos delanteros :-)

Answer 4

Posiblemente porque CSS no es arquitectura sino presentación. La arquitectura está construida con HTML. Es el HTML lo que lo conduce al elemento.

Answer 5

Los desarrolladores sufren una enorme presión para asegurarse de que los diseños se vean consistentes en todos los navegadores, por lo que comienzan a piratear, lo que hace que CSS sea más difícil de mantener y comprender. Siempre hay buenas prácticas para seguir, tales como:

• Use Restablecer.
• Comment CSS.
• Utilice marcos CSS existentes sin inventar la rueda .
• Utilice el diseño orientado a objetos siempre que sea posible.

Si sigues estas prácticas, cualquiera podría seguir CSS usando Firebug.

Answer 6

sí .. El mayor problema es que CSS no tiene ningún patrón de diseño popular. Esta es mi manera de romper css de otras personas

• inspeccionar cada elemento a través del quemador,
• tratar de encontrar las envolturas
• desde css es siempre intento secuencial averiguar qué elemento hereda lo atribuyen a que

Cuando termino con esta rutina, suelo dominar su enfoque de diseño completo.

Editar:
y lo más importante no importa para corregir el CSS ya escrito si ve problemas técnicos. Le ahorrará muchos dolores de cabeza. Solo sigue adelante y encuentra soluciones si el problema es demasiado malo.

Answer 7

que luchan con el mismo problema, y ​​parece que es muy útil cuando se trabaja mi camino a través de CSS de otra persona para dividir el problema arriba, centrándose en tres aspectos:

• Disposición para grandes cosas estructura como display: , position: y float:, o cualquier otro CSS que describa cómo se estructura la página en un nivel de curso.
• Color es sobre la decoración. Imágenes de fondo y colores y tal.
• Typography es todo sobre el texto.

Con un poco de práctica, no es demasiado difícil recoger un pedazo de CSS y sacar estas categorías de a una a la vez. Puede encontrar que ayuda a soltar el CSS en un editor de texto y reordenar las reglas en orden de diseño/color/tipografía (o diseño/tipografía/color). Una vez que haya hecho esto, puede descubrir que es más fácil razonar sobre lo que está sucediendo en el diseño.

Puede haber un poco de superposición entre el diseño y la tipografía en cómo se usan los márgenes y el relleno (ya veces los bordes). Deberá resolverlo caso por caso.

Curiosamente, la mayoría de los "hacks" (por lo general, soluciones para IE) parecen caer en la categoría de diseño, aunque es posible que tenga que recurrir a un tipo de tipografía para obtener un tamaño de fuente base consistente.