CSS OWLセレクターへのODE

CSSが大好きな秘密ではありません.数年前、私は非常にシンプルで強力なCSSセレクターと恋に落ちました.それから、私は私のCSSを次のレベルに広げていました.私は特異性とカスケードについて知っていました.私は、CSSをゼロから、またはフレームワークを使用して問題はありませんでした.しかし、私は複雑な解決のために新しいCSSセレクタに遭遇しました.それで、私はCSSに関する知識を広げなければなりませんでした.
私はリソースをオンラインで見つけることから始めたSmashing Magazine . そこで私は彼といっしょに来た'lobotomized owl selector' です.このセレクタは私の心を吹き飛ばした.でCSS Day , 彼は別の美しさを示した'flexbox holy Albatros' (見ることができます).これらのタイプの解決策は、CSSが私が知っていたよりずっと強力であることを私に示しました.CSSで解決する解決は、簡単であるか、エレガントでありえます.そう、heydon、これは(一部)あなたのためです.

"Solving solutions in CSS can be easy or elegant."

lobotomized OWLセレクタ

Heydonは、彼のより良いセレクターを説明しますarticle 私はそうすることができます.しかし、私は簡単な要約を提供します.セレクターは非常に簡単です.* + * . The * CSSでユニバーサルセレクタは、DOM内のすべての要素に適用されます.The + このCSSコードの本当のヒーローです.それは美しい名前です'adjacent sibling combinator' . 最初の要素の直後に定義されたスタイルを2番目の要素に適用します.我々のセレクターで、それはDE DOMの同じレベルのすべての非最初の要素にスタイルを適用します.他の規則が高い場合specificity .

* + * { 
  margin-top: 1.5rem;
}

では、なぜこのセレクタはとても強力ですか?私は、ブログのウェブサイトのために間隔解決を探すとき、セレクタを見つけました.私は段落の間に十分なスペースを作りたかったのですが、親要素にも.これを解決するために多くの解決策が存在する.すべての要素を与えることができますmargin-bottom . これは最後の要素に副作用があります.これを解決するには、:last-of-type 擬似セレクタ.もう一つの解決策はpadding-top and padding-bottom 各段落に.これは親要素のパドルで不要な副作用を作成できます.この特定の問題と解決方法の詳細についてはEvery Layout , これは素晴らしいウェブサイトです.
The * + * 使用するときにエレガントな解決策のようですmargin-top . The margin-top の間にのみ適用されます.しかし、あなたはまたimg or svg 異なる間隔を持つ要素.次に試してみてくださいp + p . あなたは、単純でエレガントな解決を確実にして、あなたが望むように、この構造を作ることができます.しかし、あなたは何がそれを強力に知っていますか?このセットアップでは、ネストした要素で動作します!

左から見るとmargin-top ルールは、リスト内のすべての要素に適用されます.右側では、2番目の要素はスタイル規則を取得しますが、2つの子要素を持ちます.これらの子要素のうち、2番目のものもマージンを取得します.

アルゴリズムのUI

なぜ私はこの小さなCSSのセレクタに執着しているのだろうか?ウェブ開発産業では、そして、2019のCSS日に、再発する主題があります.CSSはプログラミング言語か?この質問に対する答えのために、私はあなたが見つけることができる話を推薦します.この話は、CSSの状態と私がそれをどのように使うかについて考えました.どのように複雑なブラウザの画面に表示される何かにCSSのコマンドを変換することですか?
OWLセレクターは、CSSセレクタを複雑に解析する方法を示す素晴らしい例です.これはCSSの本当のパワーを示しています.なぜ?ネストしているからです.任意のプログラミング言語では、これは複雑な高速になることができます.セレクタの入れ子になった性質はrecursion . 再帰的なソリューションへのダイビングの前に、要素のフラットリストの擬似コードを見てみましょう.
免責事項:使用されるコードの例は、任意のプログラミング言語で動作しない、彼らは擬似コードのスニペットです.

function owl(list, apply) {
  for (i = 1; i < list.length; i++) {
    apply(list[i]);
  }
}

この関数は、要素のリストとapply 入力として機能する.ご覧の通り、我々は2010年から始まります1 . 配列が1から始まるので、CSSセレクタがデフォルトで最初の要素をスキップするためではありません.この関数は* + * のリストを返します.コールバックapply はリスト内の任意の要素に使用されます.しかし、私たちが何かを好むならp + p あるいはimg + p ? 隣接する要素が定義に従うことを確認するためにチェックを追加する必要があります.

function isFirst(item) { ... }
function isSecond(item) { ... }

function owl(list, apply) {
  for (i = 1; i < list.length; i++) {
      if (isFirst(list[i]) && isSecond(list[i - 1)) {
        apply(list[i]);
      }
  }
}

関数を使用すると、さまざまな種類の要素のリストを使用して動作し、隣接する要素が基準に合うかどうかを確認できます.CSSセレクタの入れ子機能が不足しています.我々の要素が子供を持つかどうかチェックできました.もしそうなら、我々はowl 機能再び.しかし、HTMLではどんな要素でも子を持つことができます.これは、我々の隣接した規則に従う我々の要素さえ子供を持つことができることを意味します.代わりにowl 関数は、要素が子を持つ場合、まずapply 関数.それで、それは単一の要素apply and owl が呼ばれる.

function isFirst(item) { ... }
function isSecond(item) { ... }
function hasChildren(item) { ... }

function owl(list, apply) {
  for (i = 1; i < list.length; i++) {
    if (isFirst(list[i]) && isSecond(list[i - 1)) {
      apply(list[i]);
    }
    if (hasChildren(list[i]) {
        owl(list[i], apply);
    }
  }
}

あなたは今我々のフクロウセレクタのようなものを作成する方法を知っている.これは、条件をチェックするいくつかの余分な機能を持つ再帰関数の存在します.我々のCSSがより複雑になるならば、上記の擬似コードはより複雑になることができます.別の擬似セレクタと組み合わせるか、その特異性を変更してみてください.そうすることによって、あなたはどのように強力なCSSがなっているかがわかります.

CSSはプログラミング言語か？

私が言及したように、CSS日の間、再発している話題のうちの1つは「CSSがプログラミング言語です」?ほとんどすべてのシンプルなCSSルールやスタイリングルールを適用することができます.より複雑な(または簡単に)問題を解決するより詳細な知識が必要です.CSS規則の結果であるので、コンピュータサイエンス概念の知識は重要になります.

"Knowledge of computer science concepts becomes important, as they are the result of CSS rules."
Kevin Pennekamp

CSSセレクタは、再帰関数を適用することを意味します.これは他の誰かによって書かれた関数を使うこと以外にはありません.結果の精神モデルは同じままです.あなたはUIを作成するためのアルゴリズムを適用しています.これが私の好きな理由です.何かシンプルな強力なUI操作ツールになることができます.毎回、CSSの解決策を見つけた.それで、私はHeydon Pickering、ララSchenckと私にCSSの本当の力を見せた他のすべてに感謝したいです.
この記事はもともと投稿されたkevtiq.co