<pre><code class="language-none">.elem {
  width: 50%;
  height: 50%;
  background-color: tomato;
  transform: translate3d(0,0,0); /* 強制的にGPUレンダリングさせる */
}
.elem:hover {
  width: 200%;
  height: 10%;
  background-color: gold;
}</code></pre>
	</div>
	<p>GPUレンダリングで表示パフォーマンスが向上することは事実です。特に座標が変わる系では効果が顕著です。</p><p>僕がこれまで案件をやってきて、CSSアニメーションの表示パフォーマンスの改善が難しかったのは以下のパターンです。</p><ul><li>パララックス</li><li>画面全体で動いている</li><li>長大なアコーディオンの開閉</li><li>写真やイラストなどラスター画像を動かしている</li><li>一度に動かす数が多い</li><li>一度に動かす距離が長い</li><li>画面スクロール中に動かしている</li></ul><p>上記のパターンはNull Transformを利用してもほとんど改善できません。GPUレンダリングをしていても、その範囲が大きいとか数が多いと効果が出にくいようです。</p><p>さらに、ラスター画像を動かす場合は <code>transform: translate3d(100%,0,0)</code> で要素を画面の右へ追いやるよりも、<code>left: 100%</code>の方が表示パフォーマンスが良いケースも過去にありました。</p><p>一方、ボタンなどのマイクロインタラクションでは、Null Transformを意識しなくても表示パフォーマンスに体感で影響が出ることはほとんどありません。ですので、今回のデモでもNull Transformは使用しません。</p><p>CSSアニメーションをオーダーされた時は、必ず「表示が重くなる可能性」と「表示パフォーマンスを改善できない可能性」を説明します。それを理解した上でやりたいならば、もちろんやります。</p><h4>BEMでElementの中にも要素があるので、そのElementもBlockにしたいがどう命名すれば良いか？</h4><p>CSSアニメーションの話ではないのですが、僕はBEMが大好きなのでこれには答えざるを得ません。</p><p>ElementもBlockである場合とは、例えば、下記のようなHTMLでしょうか。</p>
	<div>
		<pre><code class="language-markup">&lt;div class=&quot;p-split&quot;&gt;
  &lt;div class=&quot;p-split__col  p-code&quot;&gt;&lt;!-- p-split__col が p-code を兼ねている --&gt;
    &lt;div class=&quot;p-code__header&quot;&gt;...&lt;/div&gt;
    &lt;div class=&quot;p-code__body&quot;&gt;...&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;p-split__col  p-view&quot;&gt;&lt;!-- p-split__col が p-view を兼ねている --&gt;
    &lt;div class=&quot;p-view__header&quot;&gt;...&lt;/div&gt;
    &lt;div class=&quot;p-view__body&quot;&gt;...&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>
	<p>個人的にBEMでElementとBlockを兼業させるのはオススメしません。なぜならば、<code>p-code</code> や<code>p-view</code> Blockのスタイルが<code>p-split__col</code>に依存するCSSで構成される場合があり、別の場所で<code>p-code</code>や<code>p-view</code>だけで使ったときにスタイルが成立しなくなる可能性があるからです。依存があるのかないのかがまちまちですと、メンテナンス性は下がりますね。</p><p>ですので、「依存がない」に統一するために、ElementとBlockを兼業させず、Blockだけで常に独立しているHTML構造にするべきです。</p>
	<div>
		<pre><code class="language-markup">&lt;div class=&quot;p-split&quot;&gt;
  &lt;div class=&quot;p-split__col&quot;&gt;&lt;!-- p-split__col でしかない --&gt;
    &lt;div class=&quot;p-code&quot;&gt;&lt;!-- p-code でしかない --&gt;
      &lt;div class=&quot;p-code__header&quot;&gt;...&lt;/div&gt;
      &lt;div class=&quot;p-code__body&quot;&gt;...&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;p-split__col&quot;&gt;&lt;!-- p-split__col でしかない --&gt;
    &lt;div class=&quot;p-view&quot;&gt;&lt;!-- p-view でしかない --&gt;
      &lt;div class=&quot;p-view__header&quot;&gt;...&lt;/div&gt;
      &lt;div class=&quot;p-view__body&quot;&gt;...&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>
	<p>では、ElementとBlockを兼業させないことを守った上で、<code>p-code</code> Block が <code>p-split__col</code> Elementの中にあるゆえに必要なスタイルは、どう書かれているべきでしょうか？　Modifierで管理しがちですが、Modifierは使いません。理由はいくつかあります。</p><ul><li>命名が難しい</li><li>使いまわさないModifierになる</li><li>シングルクラスのModifierのSass管理しづらさ</li><li>マルチクラスのModifierのHTMLの冗長さ</li></ul><p>まず命名が難しいです。先ほどのHTMLの、<code>p-split__col</code>の中にいる<code>p-code</code>にどんなModifierをつければ妥当でしょうか。<code>--inSplit__col</code>でしょうか？　<code>--blackBack</code> でしょうか？　悩む時間の無駄さが半端ないです。ただでさえElementの命名で悩んでいるというのに。</p><p>そして悩んで命名したけど <code>p-split__col</code> の中以外の場所では使わないModifierになったりしませんか？</p><p>シングルクラスBEMにしているとSassのextendを使わないとしんどいですよね。そのときもextendを使うルールも決めておかないとあとあと管理できなくなってきます。</p><p>かと言ってマルチクラスBEMでModifierつきの名前をHTMLに併記すると、これがまた冗長すぎて苛立ってきませんか。</p><p>ということで、普通に子孫セレクタにして良いです。</p><div><pre><code class="language-css">.p-split__col .p-code {margin: 30px;}</code></pre></div><p>scssファイルはBlockごとにファイル分割し、<code>_p-code.scss</code> のファイルに <code>p-split__col</code> の中にいるときのスタイルを記述しましょう。</p>
	<div>
		<pre><code class="language-Sass">.p-code {
  .p-section__col &amp; {
      margin: 30px;
  }
}

.p-code__header {...}
.p-code__body {...}</code></pre>
	</div>
	<p>これらの管理手法は「<a href="https://necomesi.jp/blog/tsmd/posts/152">細かすぎるけど伝わってほしい私的BEMプラクティス30（ぐらい）</a>」を参考にしています。</p><p>さて、BEMの理解でつまづくのが、「Element＝Block直下の要素」という先入観です。これは明確に誤りで、ElementはElementを入れ子にすることができます。</p>
	<blockquote>
		<div>
			<pre><code class="language-markup">&lt;ul class=&quot;menu&quot;&gt;
    &lt;li class=&quot;menu__item&quot;&gt;
        &lt;a class=&quot;menu__link&quot; href=&quot;https://&quot;&gt;...&lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;</code></pre>
		</div>
		<p><a href="https://en.bem.info/methodology/html/#nesting-of-elements%E3%82%88%E3%82%8A">https://en.bem.info/methodology/html/#nesting-of-elementsより</a></p>
	</blockquote>
	<p>ですので、「Elementの中にも要素がある」からといってBlockにしなければならないわけではなく、そのままElementを増やして良いです。その際に命名に困るというのがBEMあるあるですが、そこは割り切っていくと気持ちが軽やかになるでしょう。割り切りとは、以下のような命名を受け入れることです。</p>
	<div>
		<pre><code class="language-markup">&lt;div class=&quot;p-split&quot;&gt;
  &lt;div class=&quot;p-split__inner&quot;&gt;
    &lt;div class=&quot;p-split__inner2&quot;&gt;&lt;!-- 割り切りポイント --&gt;
      &lt;div class=&quot;p-split__col&quot;&gt;
        &lt;div class=&quot;p-code&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;p-split__col&quot;&gt;
        &lt;div class=&quot;p-view&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>
	<p>おわかりでしょうか、 <code>p-split__inner2</code>です。 <code>__inner</code>の中に別の「インナー的なもの」が必要になったとき、こうして番号をつけてしまうことで考える時間をぐっと減らせます。無理して命名しなくてもいい、命名で困ったらブロックにしてもいい、そんなくらいに考えると良いです。もちろん別の場所で独立したBlockとなるものはちゃんとBlockにしましょう。</p><p>ElementはElementを入れ子にできると書きましたが、「Elementを繋いだセレクタを作って良い」とは言っていませんので、注意してください。Elementを繋いだセレクタとは、<code>.menu__item__link</code> とったものです。これは<a href="https://en.bem.info/methodology/faq/#why-not-create-elements-of-elements-block__elem1__elem2">BEM的にもやってはいけないとされています</a>。</p><h4>終わりに</h4><p>アンケート全体として、<a href="https://oti.github.io/lp58/#demo-3">easings.netのcubic-bezier() を見比べられるサンプル</a>にご好評をいただく声が多く、大変嬉しく思います。</p><p>ウェブサイトとして参照するだけでなく、リポジトリをフォークし、自分の客先に提案しやすいように色や大きさを自由にカスタマイズしてご利用ください。</p><p>ありがとうございました！</p>