Cómo lidiar con la necesidad de cambiar los nombres de las clases de CSS

Question

Estoy buscando estrategias para enfrentar la inevitable necesidad de cambiar o adaptar una clase de CSS para acomodar nuevos elementos HTML. Me encuentro en esta situación con bastante frecuencia, así que espero que otras personas compartan mi dolor y puedan asesorar aquí.

Imagine que tiene una tabla de productos con el buen nombre de clase semántica products. Esto tiene el estilo apropiado en tu hoja de estilo. Unos meses después, su jefe le pide que cree una lista de personal en el sitio, "con el mismo estilo que la lista de productos".

Esto inmediatamente plantea una pregunta importante: cómo llamar a la nueva tabla de personal. Las únicas opciones que puedo pensar son:

• Asígnele el nombre de clase products también. Esta es la solución más rápida pero arruina la semántica. La denominación tiene poco sentido especialmente para los futuros desarrolladores.
• Cambie el nombre de la clase a algo que pueda abarcar tanto productos como listas de personal. Esto anularía la utilidad de la separación del marcado del estilo, ya que el HTML debería cambiar. Además, no puedo pensar en un solo nombre de clase no presentacional que pueda aplicarse a los productos y a una lista del personal.
• Introduzca un nuevo nombre de clase y edite el archivo CSS de modo que .products { ... } se convierta en .products, .staff { ... } y .products thead th.number { font-weight: bold } se convierte en .products thead th.number, .staff thead th.number { font-weight: bold }, etc. Otra solución fea que solo se volverá más complicada con el paso del tiempo.

¿Cuál es la mejor medida a seguir aquí?

N.B. Estoy seguro de que este problema se resuelve fácilmente usando marcos como LESS (no lo he usado personalmente) pero esta solución me parece más un "encubrimiento" que un remedio real.

Answer 1

¿Qué hay de la opción 4:

hacer una copia "productos" como "personal" y seguir trabajando en ellos por separado con el paso del tiempo.

Answer 2

Si tuviera que poner su estilo de la tabla en pocas palabras, ¿cuál sería? Intento usar eso para nombrar estilos que uso en más de un lugar. Entonces tengo una idea de cómo se verá si uso la clase.

Ejemplo:

-.table rayas {}

Answer 3

Ésta es una de las cosas que más me gusta acerca de CSS. Con todos los lenguajes poderosos a nuestra disposición, este parece paralizado desde el principio para manejar escenarios muy comunes como el suyo. Yo también lucho con esto todo el tiempo y termino copiando todas las definiciones de clase relacionadas con productos a mi nueva o agregando la nueva a las de .product. Podrían ser retirados más tarde.

Necesito estudiar también en los preprocesadores porque lo que me gustaría hacer es algo OOP-y: defina b 'clase base' que tanto .product como .mynewone heredan de allí.

Pero # 3 es su mejor opción IMO.

Answer 4

Voy con first option porque si todo es igual & solo hay un cambio en el contenido.Por lo tanto, es mejor utilizar la clase anterior products para el personal también & Su puede definir por separado su panel de personal con la ayuda del comentario <-- staff plan--> dentro de la página HTML.

Answer 5

Hmm ...

Básicamente la raíz del problema es que su idea original de crear la primera clase de estilo (.products) fue nombrado demasiado estrecho. No siempre es posible saber que necesitará reutilizar una porción significativa de una definición de CSS en un momento posterior, pero según su pregunta, parece que usted está en esa línea de negocio.

El marco CSS núcleo no tiene la forma de decir 'hacer mi nuevo estilo (.staff) ser el mismo que otro estilo (.products) con estas anulaciones'

Pero yo creo que el marco MENOS le da la capacidad de definir una clase (.coolTable) con todas las propiedades y reutilizar estas propiedades en varias otras definiciones de clase (.products y .staff) rápidamente.

El marco LESS no es tanto un "encubrimiento" como una extensión de las capacidades de CSS.

Answer 6

Me gustaría ir con la primera opción, para tener la clase products con este bloque .... o tal vez como class="products staff"

De esta manera no será tener estilos duplicados (incluso de aspectos futuros, cuando el código/estilos puede cambiar mucho), y cualquier estilo específico para los productos se puede hacer así por nueva clase (o por otra forma de usar la clase padre en estilos para dar más especificidad de estilos).

Sí, product palabra clase no tiene mucho sentido aquí, pero de nuevo, incluso para los futuros desarrolladores, todavía significa está utilizando estilos de clase personal, no relacionado con la lógica ...

Pero todavía sí, si es posible modificar el marcado fácilmente desde product a alguna otra palabra, lo haría ... pero no como un requisito tan importante en estos casos ...

Answer 7

Introduciendo el nombre de clase individual para el nuevo tipo de contenido probablemente sea más derecho solu ción. Pero desafortunadamente la sintaxis actual de CSS está lejos de ser perfecta y por lo tanto nos obliga a ser demasiado detallados en nuestro CSS al enumerar los selectores completos uno por uno.

Por lo tanto, en la práctica, la mayoría de las soluciones que se pueden mantener suele tratar de encontrar un nombre común para diferentes elementos con el mismo estilo.

Answer 8

Existen básicamente dos escuelas de pensamiento aquí.

1) Estilo que sigue a la marca 2) Marca que sigue el estilo.

Tienes que averiguar cuál quieres hacer y tratar de apegarte a una u otra. si mezclas demasiado, no tiene sentido y simplemente tienes un gran desastre.

En el primero, tiene un marcado establecido que no cambia. Descubres el estilo para que se vea como quieres. Esto está en la línea de css zen garden. Requiere que su marcado sea extremadamente semántico. El inconveniente es que a menudo tiene muchos estilos duplicados porque no siempre es posible aplicar un estilo limpio cuando se usa este método.

En la segunda, crea muchos estilos comunes, luego adapte su marcado para que se ajuste a los estilos. Por ejemplo, puede tener una clase de "float", "thinBorder", "bold" y luego aplicar esos estilos a su marcado. El inconveniente aquí es que si su estilo necesita cambios, entonces debe cambiar el HTML (o hacer que el negrita no sea negrita, o algo así). Lo positivo es que su CSS es mucho más limpio y mantenible.

Apesta, pero hay que hacer concesiones.