2012-07-07 25 views
9

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.Frameworks CSS basados ​​en SMACSS

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

+1

+1 buena pregunta, me pregunto lo mismo. –

Respuesta

8

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

de sus extend page ...

Basado en SMACSS

pura se divide en un conjunto de módulos de respuesta. 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.

+1

¡Usted señor es rey! Gracias :) – matsko

3

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

Resulta que hay quite a few, and I see you have been at this for a while now.

I see others recommended LESS or SASS, y voy a 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. So here is what I was looking at, con una pregunta equivlent abierta, en un callejón sin salida.

Consideré que tal vez el problema podría ser que la organización CSS depende mucho del entorno y el contexto. So, maybe design patterns is a good approach.

Así que aquí estaba mi solución y la voy a sugerir aquí -> Me encantan 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, llámelo y vuelva a compartirlo con el mundo.

Esto es beneficioso para usted, en eso: aprende a resolver su problema, y ​​lo demuestra 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!

0

SMACSS es una convención de escritura de 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 utilizar menos con SMACSS: https://github.com/growdigital/LESS-SMACSS

2

No sé que es Bootstrap basado en SMACSS, pero Jonathan Snook (SMACSS fundador) tenía lo siguiente que decir:

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

Prefixed classes in bootstrap

0

Usted debe tratar Ayudantes CSS: http://helpers.araujo.cc/

muy fácil de aprender y comprender.

<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> 
Cuestiones relacionadas