Abstracción fuera de CSS

StackOverflow https://stackoverflow.com/questions/25450

  •  09-06-2019
  •  | 
  •  

Pregunta

Déjame aclarar algo.

yo Odio . CSS.

Es una pesadilla sin fin. Cada cambio de diseño menor se siente como un truco. Las soluciones a los problemas parecen involucrar a menudo números como un chef que trata de calcular exactamente la cantidad de nuez moscada que debe poner en su famoso budín de arroz. Luego viene el problema del navegador múltiple, los problemas de resolución múltiple ...

.. para acortar una larga historia, es un dolor. Un PITA, si quieres.

Muchos marcos buscan abstraerse de HTML (etiquetas personalizadas, sistema de componentes JSF) en un esfuerzo por facilitar el manejo de ese hervidor de peces en particular.

¿Hay algo que ustedes hayan usado que tenga un concepto similar aplicado a CSS? Algo que hace un montón de magia de navegador cruzado para ti, admite variables similares (¿por qué tengo que escribir # 3c5c8d cada vez que quiero ese color), admite campos calculados (que están 'compilados' en CSS y JS), etc.

Alternativamente, ¿estoy pensando en esto correctamente? ¿Estoy tratando de empujar un bloque muy cuadrado a través de un agujero muy redondo?

¿Fue útil?

Solución

Siempre puedes usar un motor de plantillas para agregar variables y campos calculados a tus archivos CSS.

Otros consejos

Lo que encontré que funciona mejor es realmente aprender CSS. Me refiero a realmente aprender CSS.

Puede ser un lenguaje confuso para aprender, pero si lees lo suficiente y practicas, eventualmente aprenderás la mejor manera de hacer las cosas.

La clave es hacerlo lo suficiente como para que sea natural. CSS puede ser muy elegante si sabe lo que quiere hacer antes de comenzar y tiene suficiente experiencia para hacerlo.

De acuerdo, a veces también es un PITA importante, pero incluso los problemas entre navegadores no son tan malos si realmente practicas y aprendes qué funciona y qué no, y cómo solucionar los problemas.

Todo lo que se necesita es práctica y con el tiempo puedes ser bueno en eso.

Si por casualidad estás usando Ruby, hay Sass . Es compatible con los selectores jerárquicos (usar sangría para establecer jerarquías), entre otras cosas, lo que hace que la vida sea más fácil de extender desde una perspectiva sintáctica (te repites mucho menos).

Ciertamente estoy contigo, sin embargo. Si bien me considero un experto en CSS de poca experiencia, creo que sería bueno si hubiera herramientas para CSS como las que hay con Javascript (Prototype, JQuery, etc.). Usted le dice a la herramienta lo que quiere y maneja las inconsistencias del navegador detrás de las escenas. Eso sería ideal, creo.

Esto explica mi respuesta anterior.

Cuando empecé a usar CSS, también pensé que era un dolor que no admitiera variables, expresiones, etc. Pero a medida que comencé a usarlo cada vez más, desarrollé un estilo diferente para superar estos problemas.

Por ejemplo, en lugar de esto: 

a { color: red }
.entry { color: red }
h1 { color: red }

Puedes hacer: 

a, .entry, h1 { color: red }

Puede mantener el color declarado en un lugar haciendo esto.

Una vez que use CSS lo suficiente, debería ser capaz de superar la mayoría de las inconsistencias del navegador fácilmente. Si encuentra que necesita usar un hack CSS, probablemente haya una mejor manera de hacerlo.

Lamento decir eso, pero todos ustedes no entendieron el punto.

La palabra abstracción es la clave. Digamos que usted y Sally están haciendo un sitio web. Estás modelando formas mientras ella hace las esquinas redondas. Tanto usted como ella han definido un puñado de selectores.

¿Qué pasa si, sin saberlo, eligió nombres de clase que chocan con los de Sally? Ya ves, no puedes '' ocultar '' (abstrae) los detalles cuando trabajas en CSS. Es por eso que no puede solucionar un error en IE y luego crear una solución autónoma que otros puedan usar tal cual, al igual que llama a procedimientos en un lenguaje de programación que solo se preocupa por las condiciones previas y posteriores y no piensa en cómo funciona en el interior. Solo piensa en lo que quieres lograr.

Este es el mayor problema con la web: ¡carece por completo de mecanismos de abstracción! La mayoría de ustedes exclamarán: "No es necesario; dejas de fumar crack! "

En su lugar, hará el trabajo de decir, corregir errores de diseño o hacer esquinas redondeadas o debatir sobre el " mejor " marcado para este o aquel caso una y otra vez. Encontrará un sitio que explica la solución, luego copie y pegue la respuesta y luego adáptela a su caso específico ¡sin siquiera pensar qué demonios está haciendo! Sí, eso es lo que harás.

Fin de la perorata.

  

Luego viene el problema del navegador múltiple

Hay esto que ayuda a eliminar algunas inconsistencias de IE. También puede usar jQuery para agregar algunos selectores a través de javascript.

Estoy de acuerdo con Dan , aprende y no es un gran problema , incluso divertido.

Vea, este es el problema con SO-- cada respuesta hasta ahora ha hecho un punto válido y debe considerarse la respuesta final. Déjame intentar resumir:

Creo que una combinación de todo esto resuelve una gran cantidad de problemas (aunque ser justo, aprender CSS no es una opción para todos; algunas personas simplemente no lo usan lo suficiente para justificar el tiempo).

Hay algunos problemas que ninguno de los puntos anteriores cubre (ciertos tipos de campos calculados requerirán escribir una biblioteca JS para mí, piensa), pero ciertamente es un buen comienzo.

Para soporte variable, he usado PHP con encabezados CSS con gran efecto para eso. Creo que puedes hacerlo en cualquier idioma. Aquí hay una muestra de php: 

<?
header('content-type:text/css');
header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT"); 

$someColorVar = "#cc0000";
?>
BODY {
      background-color: <?= someColorVar ?>;
     }
  

Las soluciones a los problemas parecen involucrar a menudo números como un chef que trata de calcular exactamente la cantidad de nuez moscada que debe poner en su famoso budín de arroz

Solo obtengo esto cuando intento que las cosas funcionen en IE.

Si aprende CSS hasta el punto en el que puede codificar la mayoría de las cosas sin tener que buscar la referencia (si aún está buscando referencias regularmente, realmente no lo sabe y no puedo reclamar quejas, creo) , y luego desarrollar para firefox / safari, es un lugar muy agradable para estar.

Deja el dolor y el sufrimiento de la compatibilidad con IE hasta el final después de que funcione en FF / Safari, por lo que tu mente atribuirá la culpa a IE, a donde pertenece, y no a CSS en general.

Las variables de CSS vendrán (relativamente) pronto, pero estoy de acuerdo en que están muy atrasadas . Mientras tanto, es posible utilizar un motor de plantillas CSS como Sass, o incluso el lenguaje web dinámico de su elección, para generar sus hojas de estilo mediante programación.

Para los marcos CSS, puede considerar YUI Grids . Hace que el diseño básico sea mucho más rápido y sencillo, aunque se usa en su forma original, pero no compromete la semántica.

La clave para una comprensión real de CSS (y los dolores de cabeza del navegador) es una comprensión sólida de modelo de caja utilizado por los Estándares CSS, y el modelo incorrecto utilizado por algunos navegadores. Una vez que tenga eso abajo y comience a aprender los selectores, se alejará de las propiedades específicas del navegador y CSS se convertirá en algo que espera con ansias.

También puedes ver BlueprintCSS , un marco de diseño en CSS. No resuelve todos sus problemas, pero sí muchos, y usted no tiene que escribir el CSS usted mismo.

Creo que los errores comunes que tienen los principiantes con CSS tienen que ver con la especificidad. Si está aplicando el estilo a la etiqueta a , ¿está seguro de que realmente desea aplicar el estilo a cada uno del documento o a una determinada " clase " de etiquetas a ?

Por lo general, comienzo siendo muy específico con mis selectores de CSS y los generalizo cuando lo considere oportuno.

Aquí hay un artículo de humor sobre el tema, pero también informativo: Específicamente Wars

CSS toma un poco de tiempo para aprender, pero lo que inicialmente me pareció más desalentador fue el hecho de que se necesitaban tantos trucos para que todos los navegadores se comportaran de la misma manera. Aprender un sistema que no se adhiere a la lógica parece tonto ... pero me aferro a la vaga creencia de que hay lógica detrás de la idiosincrasia de cada navegador, en la forma de la especificación W3. Parece que la nueva generación de navegadores se está alineando lentamente, pero IE6 todavía hace que mi vida sea un infierno todos los días.

Tal vez crear una capa de abstracción entre un código CSS compatible / válido y las implementaciones de mala calidad de los navegadores no sería algo malo. Pero si tal cosa fue creada, ¿tendría que ser alimentada por JS (o jQuery)? (¿Y eso crearía una carga irrazonable, en términos de costo de procesamiento?)

He encontrado que es útil 'nivelar el terreno' al hacer scripts con CSS. Probablemente haya muchos sabores diferentes de reinicio del script, pero el uso de los reinicios de YUI me ha ayudado a reducir la cantidad de peculiaridades que de otra manera encontraría, y las cuadrículas de YUI hacen la vida un poco más fácil a veces.

@SCdF: Creo que su resumen aquí es justo. Pero el argumento de que algunas personas no tienen tiempo para aprender CSS es falso, solo piense por un segundo. Sustituye una tecnología que hayas dominado y verás por qué:

  

yo Odio. Java. ¿Hay algo por ahí que me lo escriba? No todo el mundo tiene tiempo para dominar Java.

Ciertamente, CSS es una tecnología imperfecta. Tengo muchas esperanzas de que dentro de 5 años ya no tendremos que lidiar con las incompatibilidades del navegador (ya casi llegamos), y que tendremos mejores herramientas del lado del autor ( He escrito una macro de Visual Studio para mi propio uso que proporciona el tipo de variables y cálculos que describe, por lo que no es imposible), pero insistir en que debería poder usar esta tecnología de manera efectiva sin entenderla realmente. No es razonable.

Sin embargo, está pensando en esto correctamente, es probable que todavía necesite comprender las diferentes implementaciones de CSS del navegador. Esto es solo entender el entorno en el que vive su aplicación.

Para aclarar: no se trata de comprender CSS. Si conoce bien el idioma, todavía tiene que manejar las estructuras de redundancia, duplicación y falta de control en el idioma.

He estado escribiendo CSS de forma sólida durante más de 10 años y llegué a la conclusión de que, si bien el lenguaje es poderoso y efectivo, la implementación de CSS apesta. Entonces uso una capa de abstracción como Sass o Menos o xCSS para interactuar con el idioma. Estas herramientas utilizan una sintaxis similar a CSS, por lo que está resolviendo el problema en el dominio del problema. Usar algo como PHP para escribir trabajos CSS, pero no es el mejor enfoque.

Al ocultar los problemas en el idioma a través de una capa de abstracción, puede ofrecer un mejor producto que mantendrá su integridad durante todo el ciclo de vida de su proyecto. Escribir CSS a mano acelera putrefacción del software a menos que esté proporcionando documentación sólida que la mayoría de los codificadores CSS no . Si estás escribiendo un marco CSS bien documentado, probablemente no lo escribirías a mano de todos modos. Simplemente no es eficiente.

Otro problema con CSS se debe a su falta de soporte para anidar las declaraciones de bloque. Esto anima a los programadores a construir un conjunto de clases global y plano y manejar las colisiones de nombres con una convención de nomenclatura. Todos sabemos que los globales son malos, pero ¿por qué escribimos CSS de esta manera? ¿No sería mejor darle un contexto a sus clases en lugar de exponerlas a todo el modelo de documento? Y su convención de nomenclatura puede funcionar, pero es solo otra tarea que debe dominar para escribir el idioma.

Animo a aquellos de ustedes que se enorgullecen de escribir un buen CSS para comenzar a aplicar algunas de las mejores prácticas de programación a su marcado. Usar una capa de extracción no significa que no tengas la habilidad para escribir un buen CSS, significa que has limitado tu exposición a las debilidades del lenguaje.

No necesitas una abstracción alejada de CSS, debes darte cuenta de que la CSS en sí misma es una abstracción. CSS no se trata de colocar píxeles en la pantalla. En cambio, se trata de escribir un sistema de reglas que ayuden al navegador a tomar esas decisiones por usted. Esto es necesario, porque al momento de escribir CSS, no conoce el contenido al que se aplicará el navegador; tampoco conoce el entorno en el que lo hará el navegador.

Dominar esto lleva tiempo. No puedes recoger CSS en un fin de semana y estar listo. Es un poco engañoso, porque el idioma tiene una barrera de entrada tan baja, pero las aguas son profundas . Aquí hay solo algunos de los temas que debe tratar de dominar para dominar CSS:

  • La cascada y la herencia
  • El modelo de caja
  • Métodos de diseño que incluyen flotadores y el nuevo flexbox
  • Posicionamiento
  • Las mejores prácticas actuales, como SMACSS o BEM para mantener sus estilos modulares y fáciles de mantener

No es necesario que sepas todo esto por adelantado, pero debes continuar avanzando. Al igual que con otros lenguajes y programación en general, debe buscar continuamente aprender más y dominar el oficio. CSS es una parte fundamental del desarrollo web, y más desarrolladores necesitan tratarlo con el mismo respeto que ofrecen otros idiomas.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top