Un usuario preguntó 👇
Hola a todos, Anthony,
Me gusta la idea de CSS funcional (o: CSS atómico / clases de utilidad / CSS inamovible). @anthony, ¿cómo haces algo al respecto?
Entiendo la maldad de este enfoque cuando se agrega a un proyecto existente, pero ¿puede este tema, Quark, agregar CSS atómico al tema hijo?
¿O es una idea realmente loca? ¿Alguien tiene experiencia con esto?
NB Más sobre CSS funcional, pero este es un buen artículo:
https://marcelosomers.com/writing/rationalizing-functional-css/#reusability-of-components
Estoy muy ansioso por saberlo. ¡Gracias!
Autor del tema
(@ahortin)
Hace 3 años, 2 meses
Para agregar algo como CSS atómico a un tema hijo, básicamente tienes que anular cada archivo php, que sirve para tener un tema hijo en primer lugar.
No sé mucho sobre CSS atómico, pero al mirar su sitio, en mi opinión honesta, parece un desastre. Es casi como escribir un CSS en línea con pocas personas.
Dan un ejemplo como …
<div class="Row">
<div class="Fl(start) W(1/2) Bgc(#0280ae.5) H(90px)"></div>
<div class="Fl(start) W(1/2) Bgc(#0280ae) H(90px)"></div>
</div>
<div class="D(tb) W(100%)" role="presentation">
<div class="D(tbc) Bgc(#0280ae) H(90px)"></div>
<div class="D(tbc) Bgc(#0280ae.5) H(90px)"></div>
</div>
<div class="IbBox W(50%) Bgc(#0280ae.5) H(90px)"></div><!--
--><div class="IbBox W(50%) Bgc(#0280ae) H(90px)"></div>
<div class="D(f)">
<div class="Flxg(1) Bgc(#0280ae) H(90px)"></div>
<div class="Flxg(1) Bgc(#0280ae.5) H(90px)"></div>
</div>Se necesitará mucho más tiempo para escribir algo así que usar clases CSS estándar. Además, siempre define cosas como el color y el tamaño en cada elemento, en lugar de solo uno o dos nombres de clase y los usa en todo el html.
Como dije, no sé demasiado al respecto y es posible que haya ciertos beneficios que no veo, pero depende de usted si desea comenzar a usar algo así. Sin embargo, en lugar de agregarlo a un tema hijo, será mejor que cree mi tema y lo modifique directamente.
Esta respuesta fue modificada hace 3 años, 2 meses por. Esta respuesta fue modificada hace 3 años, 2 meses por.
(@sanla)
Hace 3 años, 2 meses
Hola Anthony,
Gracias por su respuesta. ¡Sí, veo lo que quieres decir!
Pensé que solo podía agregar un mínimo de CSS atómico (como estilo de color y elementos de marca específicos), junto al CSS existente que coincida con su tema, y mantenerlo realmente simple.
El ejemplo que cita aquí del sitio web no es a lo que realmente me refería. ¡Mi error, no lo tenía claro! Me refería al contenido textual del sitio web: la explicación de las ‘buenas, malas y posibles soluciones’ y el uso de CSS atómico.
¿Es posible que esto le dé una idea de la posibilidad de poner CSS atómico de forma “mínima”?
Perdón si mi pregunta parece una repetición de la primera. Me gustaría preguntar esto … El enfoque atómico de CSS me parece algo “más natural”, en primer lugar, para diseñar elementos (existentes) más rápidamente. Pero no pretendo repetir el «buen CSS».
Gracias.
Sandra
Autor del tema
(@ahortin)
Hace 3 años, 2 meses
Mientras leo rápidamente ese otro vínculo que proporcionaste, no estoy realmente de acuerdo con algo de lo que dice.
Si cargamos nuestra carga de código ensamblador de estilo en HTML, perdemos todos los beneficios de la cascada
Todo el beneficio de CSS es la conexión en cascada, por lo que se llama CSS (Hojas de estilo en cascada). Es una sugerencia terrible no aprovechar ese efecto en cascada y sugeriría que no conoce bien la SEC.
<div class="box-component flex p2 bg-blue white h4 bold">
The .box-component class wouldn't actually style anything, it would merely be a search key for finding instances where the box component gets used.
</div>
En el ejemplo anterior, él está tomando clases con nombre (es decir, bg-blue white bold). Nunca es una buena idea nombrar sus clases así. ¿Qué sucede cuando el cliente entra y dice, «por favor cambie esto para que tenga un fondo amarillo con texto negro y no en negrita»? Tienes dos opciones. Tienes que hacer que todo suceda bg-blue white con algo como bg-yellow black, junto con la bold clase, o cambia el bg-blue white clases sobre los nuevos colores, lo que significa que ya no reflejan los colores correctos. Cualquiera que sea la solución que elija, ambas son horribles.
Si desea mejorar su velocidad en el uso de CSS, preferiría aprender descarado o menos. https://css-tricks.com/sass-vs-less/
(@sanla)
Hace 2 años, 11 meses
Hola Anthony,
Gracias por la lectura adicional y su respuesta. ¡Lamento mi respuesta tardía!
Pero hice algunas otras «investigaciones» sobre esto. Y cambió de opinión sobre los beneficios de la «forma atómica». Estoy de acuerdo, tenían que evitar la SEC:
• Menos cambios entre HTML y CSS durante la codificación; • Los nombres de las clases son claros cuando sigues la convención Atómica y agregas más nombres de clases con la misma estructura de nombres y me pareció que no había ninguna publicación en lugar de reemplazar clases (en HTML).
Ahora analizo lo que dijo sobre el beneficio de la cascada y las desventajas de perder el mantenimiento (ps, mi breve resumen de su exposición). Y también examiné el descaro. ¡Excelente! También me encontré con PostCSS…. La elección continúa.
😉
¿Solucionó tu problema??
0 / 0