10

SMACSSフレームワークは、CSSコードを管理して再利用および保守できるようにするための一貫した方法を導入しますが、実際のフレームワークではなく、CSSを編成する方法のガイドラインに近いものです。その哲学に基づいた他のフレームワークがあればいいのですが、私はそれを見つけたことがありません。

CSSコードを整理するSMACSSメソッドに基づくCSSフレームワークを知っている人はいますか？

4

6 に答える 6

8

Pureは、SMACSSに基づく新しいCSSフレームワークです。YUIプロジェクトに関係しているようです。

彼らの拡張ページから..。

SMACSSに基づく

Pureは、レスポンシブモジュールのセットに分割されます。当初から、CSSを作成するための規則としてSMACSSを採用していました。SMACSSを初めて使用する場合は、特にモジュールルールのセクションを簡単に読んでください。

于 2013-05-28T15:30:09.933 に答える
3

マスコミからは答えが出てこないので、興味津々で見回しました。

かなりの数があることがわかりました、そして私はあなたが今しばらくこれにいるのを見ます。

他の人がLESSまたはSASSを推奨しているのを見て、CompassやSusyのようなソリューションがあることを付け加えます。これらはそれぞれ固有の組織パターンを持っているため、単に調査する必要があります。

しかし、これが私の実際の答えです。

私は、レスポンシブWebデザインの結果として得られるソリューションを、ベストプラクティス、命名規則、その他のパタ​​ーンに編成するCSSフレームワークを探すことに同様の努力を払っています。ですから、これが私が見ているものであり、同等の自由形式の質問で行き止まりになっています。

おそらく問題は、CSSの編成が環境とコンテキストに大きく依存していることだと思いました。したがって、デザインパターンは良いアプローチかもしれません。

これが私の解決策でした。ここで提案します->cssをベース、レイアウト、フォント、要素に分割することについてのあなたのコメントが本当に好きです。これは、場合によっては他の人に利益をもたらす可能性があります。

環境に適した組織の方法論が見つからない場合は、必要なものを実験して設計し、名前を付けて、世界と共有してください。

これは、問題を解決する方法を学ぶという点で、あなたにとって非常に有益です。そして、それは高度な開発者としてあなたにとってよくわかります。

1つのアプローチは、WordPressブログ、Webサイトのサンプルページ、またはgithubリポジトリでソリューションを共有することです。

それが本物で有益である場合は、名前を付け、作成して共有します。これからは良いことしかできません。

幸運を！

于 2012-07-07T05:42:06.220 に答える
2

BootstrapがSMACSSに基づいているかどうかはわかりませんが、Jonathan Snook（SMACSSの創設者）は次のように述べています。

「SMACSSの実装例がどのように見えるか疑問に思っている場合は、ブートストラップが完璧な例です。」

ブートストラップのプレフィックス付きクラス

于 2014-07-14T10:51:45.570 に答える
1

SMACSSという用語をOOCSSまたはAtomicdesignの同義語として使用している場合は、次のフレームワークを検討してください。

于 2016-01-14T01:48:29.333 に答える
0

SMACSSは、CSSを作成するための規則です。したがって、フレームワーク自体は、この規則に従っているかどうかに関係なく重要ではありません。フレームワークを使用する場合は、SMACSSに従う必要があります。

たとえば、誰かがSMACSSでLESSを使用する意思のある人のためにコメント付きの.LESSファイルを作成しました：https ：//github.com/growdigital/LESS-SMACSS

于 2013-08-04T08:13:43.580 に答える
0

Helpers CSSを試してみてください：http ：//helpers.araujo.cc/

学び、理解するのはとても簡単です。

<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>
于 2016-02-19T13:53:35.347 に答える