BEMの強迫観念。 パラメトリック設計の結果

私はアイドル状態で何千時間も投資しました。 10,000時間のルールを信じているなら、もう少しすれば、私は許容できるバイオリニスト、職人、アスリート、または他の誰かになることができます。 しかし、開発と設計では、これは機能しません。 すべてのスラグが削除され、時計がリセットされます。 そして、エラーの数と変化率は非常に大きいため、得られた経験についての考えを捨てることができます。



プロジェクトまたはプロジェクトファミリーのエコシステムに入るためのしきい値は、それほど狂ってはならず、世界遺産として扱われるべきではありません。 集団的経験を使用するシステムが必要です。これにより、自分自身のために特別に修正しながら、集団で自分自身を改善することができます。



デザイナーとして、私は自分の時間の90％を環境（構造、コレクター、およびその他の類似のもの）の作成に費やしたくありません。 そして、古い方法でHTMLとCSSを書く余裕はありません。 したがって、 スマートな設計のための環境が必要です。

反カスタマイズ

しばらくの間、私はその仕事を誇りに思っていました。 チーム内のプロセスの変化、完全な設計の混乱から抜け出した方法。 これについては、 「Designing Scalable Projects」という記事で説明しました。 しかし、私はいくつかの点が心配でした。 そして、私たちがカスタムを書いたという感覚は（タスクに適切に対処しているものの）ますます面倒です。





Vitaly Harisovが@cssunderhoodの 1つに登場すると、すべてが変化し始めました。 彼のつぶやきで、彼は現在のプロセスのそれらのかゆみのある問題にますます強く押し込みました。 そして、週の終わりまでに私は完全に落胆し、BEMをより徹底的に試さない理由は見当たりませんでした。

方法論などとしてのBEM

私は、 MCSSを通じて段階的にBEM方法論に取り組みました 。 そして、その使用の問題はもはや立っていませんでした。 しかし、 「ブラウザでのデザイン」は多くのデザイナーにとってひどく恐ろしいことであり、BEM手法を使用して手動の方法で実装することは単にがっかりさせられます。

BEMは単なる方法論ではありません

全体的な問題は、結果のコードを書き込もうとしていることです。 ただし、 プロジェクトスタブを配置してBEMJSONでインターフェイスを記述しようとすると、すべてが劇的に変化します。 私は、これは一種のノーリターンのポイントだと思います-思考、インターフェースの認識、その構造と実装方法が取り返しのつかないほど変化するとき。 githubのコミットマップの例を次に示します。 ここで、私がプロジェクトスタブに出会った瞬間を見ることができます

ビームコンポーネント

BEMコンポーネントは、BEMの使用を開始する主な理由の1つでした。 プロトタイピングに理想的でした。 控えめに言っても、コンポーネントの設計は予測できません。 これについては、ジャンルのレポートから推測できます-「ボタンの作り方」。 しかし、松葉杖で以前に我慢しなければならなかった、または松葉杖で解決しなければならなかったすべての物議を醸す問題をブロックしたのは、まさにこれらの構造でした。



私にとっては、パラメーターの規則性が重要でした。 BEMチームを注文する傾向を知っていたので、Yandexインターフェースのパターンを見つけることを期待していました。 Yandexサービスの大部分を見て、すべてのプロジェクトの外見的な類似性にもかかわらず、多くの異質性が見つかりました。 そして、私は自分のために設計環境を強化することにしました。

ガットbemコンポーネント

1. 私のスタートは、 bem-componentsを使用したBEMJSONのプロトタイプ作成から始まりました。 プロトタイプの場合、小さなガイドを作成する必要がありました。 いくつかのYandexサービスを完了したため、Webコンポーネントを除いてそれほど多くのサービスはありませんでしたが、それらのUIがどのように機能するかについてはすでに共通の理解を持っています。 各サービスを複数のコンポーネントに分割しました：タイポグラフィ、色、インデント、コントロールのサイズ、デザインなど。 ガイドの生活スタイルの形成で得られた経験に基づいてパターンを見つけたので、プロトタイプ用のそのようなガイドを作成し、ページフレームデザインにbem -gridを使用しました。
   
   
2. 私にとっての2番目のグローバルな課題は、カスタマイズを追加することでした。 プロトタイプに基づいてデザインUIを作成します。 そして、私は花から始めました。 色の便利なカスタマイズのために最適化されたbem-components 。
   
   
   1. ファイルcommon.blocks / component / _theme / component_theme_island.stylにあったすべての色を引き出しました。 結果は（色合い、透明度などとともに）31色でした。
      
      
   2. 彼はすべてをhslaに持ち込み、主要な色がはっきりと見えるようにしました。
      
      
   3. 主な色に応じて、色（シェード）をグループに分けました。
      
      
   4. 変数の主要な色を引き込みます：
      
      
      • $ base =＃000
      • $アクティブ=＃070
      • $リンク=＃44b
      • $プロジェクト=＃fc0
      • $アラート=＃e00
      • $ normal =＃f6f5f3
      
      
      
   5. スタイラスを介して色相、彩度、明度、不透明度を設定します。
      
      
   6. ファイルデザイン/ colors.stylを作成し、コンポーネントスタイルにインポートしました。
      
      
   7. 最適化プロセス-codepen.io/koloskof/full/gaNGgB
      
      
   
   
   何が起こった-github.com/bemdesign/bemdesign-components/tree/cosmetic
   
   
   
   良いスタートでしたが、より柔軟な設定が必要でした。
   
   
3. 彼は、プロジェクトのスタイルに従って、「テーマ」を作成するときに変更する必要があるすべてのパラメーターを分析しました。 したがって、彼らは200個になりました 。 それらはすべて別のファイルで取り出されました。 それらの多くは、BEMコンポーネントの設計機能を反映しているため、明らかではありませんでした。 そのため、各変数の横に変数が変化していることが示されます（現在最適化プロセスが継続しています）
   
   
4. Parametric Designに対処するためにほとんどの依存関係がある場合、停止するのは困難です。 そして、タイポグラフィに焦点を当てたかった。 Jeffrey Zeldmanの統計によると、インターフェイスのコンポーネントの90％は活版印刷です。 そして、それは特別な注意に値するので、私はそれをいくつかの修飾子のグループを持つ別個のコンポーネントに入れました。 これにより、コンポーネントでの柔軟な、しかし規律的な使用が可能になります。 （サイズ値のペアはコンポーネントと交差するため、カスタマイズする際に注意する価値があります）
   
   
5. インデント変数と色をブロックにインポートするStartonul基本キット 。 これは、オープンプロトタイプキットの湿ったアウトラインです。これを使用して、多くの実験を行い、設計のニーズに合わせてBEMを磨きます。
   
   

最も貴重なデザイナーの投資

私はこの素晴らしい方法論の最初の部分だけを吹き込みましたが、BEMは私にとって最も価値のある設計投資になりました。 「 ブラウザでのデザイン 」に対する私の「共感」を知っていれば、BEMが高品質のUIを実装するための論理的で強力かつ最も自然な方法になっていると言えます。



PSデザイナーとしてBEMで最初のステップを踏んでいない場合は、素晴らしい機会があります。 BEMコミュニティを気軽にノックしてください。BEMコミュニティは非常に活発で、st迷の瞬間にあなたを正しい方向に導きます。



BEMedを維持！