循環的な複雑さ：CSSロジック

長年にわたり、CSSにはロジックはないと主張してきました。 したがって、制御フローもプログラムで操作する方法もないと言いたかったのです。 ロジックのこの固有の欠陥は、プロセッサを使用することを支持する引数として（この欠落した機能を提供するために）、プリプロセッサに対する引数として使用されました（CSSはロジックの存在を暗示しないため、実装を試みるべきではありません）。



しかし、最近、CSSに実際にロジックがあることを実感させる考えに出会いました。CSSが一般的にかなり弱いのは、CSSがそのように考えられることはめったにないからでしょう。



複雑なセレクターをアイテムで構成されているかのようにクライアントに説明していることがわかりました-私たちが実際に興味を持っているもの-そしてその条件です。 例：

div.sidebar .login-box input.btn span { }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この複雑なセレクターでは、サブジェクトはスパンであり、その条件はIF（.btn内）AND IF（入力内）AND IF（.login-box内）AND IF（.sidebar内）AND IF（div内）です。

 @if exists(span) { @if is-inside(.btn) { @if is-on(input) { @if is-inside(.login-box) { @if is-inside(.sidebar) { @if is-on(div) { # Do this. } } } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おそらくない。 曲がりすぎて紛らわしい。 おそらくもっと良くできたでしょう。

 @if exists(.btn-text) { # Do this. }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

セレクタを挿入または定義するたびに、別のifステートメントを追加します。 これにより、いわゆる循環的複雑度が増加します。

循環的な複雑さ

プログラミングでは、循環的複雑度は、コード内の「可動部分」の数を示す指標です。 これらの可動部分は通常、特定の制御フローのポイント（if、else、whileなど）であり、それらが多くなるほど、循環的複雑さが大きくなります。 実際、複雑さの増大は、とりわけ以下のことを意味するため、循環的な複雑さを可能な限り小さくする必要があります。



•コードの評価がより困難です。

•より多くの潜在的なエラーポイントがあります。

•コードの変更、保守、再利用がより困難です。

•より多くの結果と副作用を考慮する必要があります。

•また、コードのテストははるかに困難です。



CSSに関しては、主に、ブラウザがスタイルを設定できる、または設定できない前に行う必要がある決定の数に注目します。 セレクターのifステートメントが多いほど、このセレクターの循環的複雑度は高くなります。 これは、セレクターが動作するために満たす必要がある条件がより多くあるため、セレクターがより脆弱であることを意味します。 これは、ifステートメントを含めると必ずしも偽陽性の一致につながるとは限らないため、セレクタの明示性が低くなることを意味します。 これにより、セレクタが必要以上に完全にジャンプするため、セレクタの再利用性が大幅に低下します。



したがって、.btn（など）内のスパンにバインドする代わりに、バインドする新しいクラス.btn-textを作成することをお勧めします。 これは、より直接的かつ合理的であるだけでなく、より直接的な方法です（多数の@ifは、壊れやすいセレクターの作成につながり、失敗する可能性が高くなります）。



秘Theは、ブラウザーがそれらを分析する方法でセレクターを記述することです：右から左へ。 そのため、セレクタのスコープを狭めるために、多くの条件付き構造でスパンを定義する必要があります。 もう一方の端から始める必要があります。 明確で理解しやすいものを書き、条件を完全に放棄します。



セレクタが最初に膨大な数のDOM要素をキャプチャする代わりに、条件によるカバレッジを減らすために、キャプチャするDOM要素の数を減らすことをお勧めします。



循環的複雑度はCSSで使用できるかなり興味深い原則ですが、それを原則としてのみ見ると、「ロジック」で複雑度を視覚化し、さらには測定することができ、これに基づいてより良い意思決定を開始できます。



いくつかのルール：

•セレクターをミニプログラムとして扱う：何かを入力または定義するたびに、ifステートメントを1つ追加します。 セレクターをシンプルに保つために、声を出してこれらすべてを話します。

•サイクロマティックの複雑さを最小限に抑えるようにしてください。パーカーなどのツールを使用して、サイクロマティックの複雑さに関してセレクタを追跡します。

•ネストされたセレクターの使用を最小限にします。CSSでネストすることが必要な場合がありますが、ほとんどの場合は必要ありません。 このトピックに関する素晴らしい記事 。

•セレクターを右から左へ見ていきます。必要な要素から始めて、最小限の追加CSSを記述して、正しい一致を実現します。

•セレクターの目的を絞り込みます。機能していることが判明したセレクターだけでなく、必要なセレクターを作成してください。



セレクタは、CSSアーキテクチャの主要な側面です。 それらをスマートでシンプルなものにしてください。