listas - SMACSS based CSS Frameworks

smacss pdf español

Question

El marco SMACSS presenta una forma consistente de administrar su código CSS para que sea reutilizable y mantenible, pero es más una guía de cómo organizar su CSS en lugar de un marco real. Sería bueno si hubiera otros marcos basados ​​en su filosofía, pero no he encontrado ninguno.

¿Alguien sabe de algún marco CSS que se base en el método SMACSS para organizar el código CSS?

Answer 1

Pure es un marco CSS más nuevo que se basa en SMACSS. Parece estar relacionado con el proyecto YUI.

Desde su página extendida ...

Basado en SMACSS

Pure se divide en un conjunto de módulos receptivos. Desde el principio, adoptamos SMACSS como una convención para escribir nuestro CSS. Para aquellos que son nuevos en SMACSS, debe darle una lectura rápida, especialmente la sección de reglas del módulo.

Answer 2

SMACSS es una convención de escribir CSS. entonces los marcos en sí mismos no son importantes si están siguiendo esta convención o no. USTED es el que debe seguir SMACSS al usar CUALQUIER marco.

por ejemplo, alguien hizo algunos archivos .LESS con comentarios para cualquiera que esté dispuesto a usar LESS con SMACSS: https://github.com/growdigital/LESS-SMACSS

Answer 3

No sé si Bootstrap está basado en SMACSS, pero Jonathan Snook (fundador de SMACSS) dijo lo siguiente:

"Si se preguntaba cómo sería una implementación de ejemplo de SMACSS, Bootstrap es un ejemplo perfecto".

Clases prefijadas en bootstrap

Answer 4

Si está utilizando el término SMACSS como sinónimo de diseño OOCSS o Atomic , considere los siguientes marcos:

• Cascade Framework
• Scally
• InuitCSS

Answer 5

Deberías probar helpers CSS : http://helpers.araujo.cc/

Muy fácil de aprender y entender

<p text="gray-80 normal center">
 <span text="bold big line-1 red">
    Can you
  </span> feel the
  <span text="underline italic blue semi-bold">
    future
  </span>? HTML6
  <span text="pre white-80 line-1.5" layout="navy few-rounded inline-block">  advantages  </span>
   are expecting for
   <span text="bolder">you</span>!
</p>

Answer 6

Como no salen respuestas de la prensa, tenía curiosidad y eché un vistazo.

Resulta que hay bastantes , y veo que has estado en esto desde hace un tiempo .

Veo que otros recomendaron LESS o SASS , y agregaré que hay soluciones como Compass y Susy. Estas son simplemente cosas a considerar ya que cada una tiene patrones de organización inherentes.

Pero aquí está mi respuesta real.

Tengo un esfuerzo similar en la búsqueda de marcos CSS que organicen las soluciones resultantes de Responsive Web Design, en las mejores prácticas, nomenclaturas-convenciones y otros tipos de patrones. Así que aquí está lo que estaba viendo , con una pregunta equivlent abierta, en un callejón sin salida.

Consideré que tal vez el problema podría ser que la organización de CSS depende mucho del entorno y el contexto. Entonces, tal vez los patrones de diseño sean un buen enfoque .

Así que aquí estaba mi solución y la voy a sugerir aquí -> Me gustan mucho sus comentarios sobre la separación de css en: base, diseño, fuentes, elementos. Esto puede beneficiar a otros en algunos casos.

Si no puede encontrar una metodología de organización que se adapte a su entorno, experimente y diseñe lo que necesita, luego nómbrelo y vuelva a compartirlo con el resto del mundo.

Esto es mucho más beneficioso para ti, en eso: aprendes cómo resolver tu problema y te muestra bien como desarrollador avanzado.

Un enfoque es compartir la solución en un blog de WordPress, una página de ejemplo de sitio web o un repositorio de Github.

Si es genuino y beneficioso, nómbrelo, compárelo y compártalo. Solo pueden salir cosas buenas de esto.

¡Buena suerte!