Clever Geek Handbook

アトミックCSS-順序と清潔さ





コードの最初の行から、各人はそれを正しく整理し、ワークスペース全体を最適化することの重要性を理解し始めます。



どの業界について特に話をすることは重要ではありませんが、コードがあるところはどこでも、その作成と保管にはルールがなければならないことを理解することが重要です。



もちろん最初のカップルでは、​​特定のルールや順序を順守するのに時間がかかるように見えるかもしれませんが、実際には完全に異なって見えます。 コードを記述する原則の真髄は、それを一度も書かないことです-編集と修正の目的で、常にそれに戻ります。



カオスと予測不能性が支配している場合、このプロセスは現実の問題に変わります。 この混chaosがあなたによってではなく、接触を確立することができない人によって作成された場合、この問題は悪化する可能性があります。 方法論があるのはそのような状況を排除することです。



cssについて話す場合、自信を持って言うことができます-私たちはそれぞれ、意識的またはそうでない特定の方法論を使用します。 ある人が特定のルールや基準を使用していなくても、彼自身の習慣があり、常にトリックを繰り返しています。



コードを記述する方法は、一般に受け入れられ、標準化される必要はありません。他のものは必須である必要があります-それらは予測可能でなければなりません。



注意すべき方法論のリストはそれほど大きくありません。



-BEM、

-Smacss、

-OOCSS、

-MCSS、

-アトミックCSS



アトミックCSSはおそらく最も珍しくて恐ろしい方法ですらありますが、幸いなことに、CSSは非常に理解しやすく、予測しにくいものです。

私の選択を実証するには、少しロールバックする必要があります。



ほぼアトミックなCSS



インターフェイスを作成する段階で圧倒的な数のプロジェクトのルートディレクトリが3つのファイルと2つのフォルダーのように見えたことがありました。 



>fonts >img -index.html -style.css -script.js


しかし、このシンプルさは一見便利に思えるかもしれませんが、実際、少なくともこれら3つのファイルのうち2つでは、ひどいことが起こっていました。



混乱とスタイルの欠如という2つのことが常に私を悩ませています。 Cssでは、さまざまなニュアンスが無秩序の分類に分類されますが、何よりも、さまざまなセレクターの同じルールとプロパティが繰り返し繰り返されることに満足できませんでした。



この問題の最初の解決策は次のとおりです。





このように見えた： 



 ... .class { display: inline-block;} .class { text-transform: uppercase;} ...


その後、以下を受け入れました。 



 ... .menu-link, .primary-button, .form-button, .footer-link, .social-link { display: inline-block;} ...


もちろん、このソリューションは非常に不便で、幸い一時的なものでした。 ファイル間の無限の切り替えに苦しみ、ファイル内の適切な場所を見つけることは長くないので、それぞれ1つの命令を担当する個別のクラスを作成する方がはるかに便利だという結論に達しました。



... 



 .inline-block { display: inline-block;} .block {display: block;} .uppercase {text-transform: uppercase;}


htmlファイルでは、多数のクラスを持つタグは奇妙に見えましたが、この解決策は受け入れられるように思えました。 



 <aside class=”sidebar fixed left top w-30 h-100 main-fill”></aside>




一見すると、これは画面の左側に位置が固定されたサイドコラムであり、幅の30％と高さの100％を占め、メインカラーで満たされていることを理解するのに十分です。



数値に関連するものはすべて、主にこれらは外部および内部のインデントであり、標準形式で記述しました。 これを行うために、各タグまたはタグのグループに最初に来る個別のクラスを追加しました。上記の例では「スライダー」クラスです。



それはほとんどアトミックでほとんど便利なアプローチでした。 いくつかの欠点により、彼は快適になれませんでしたが、最も重要なのは次のような状況でした：





そして、すべての問題を解決するのに役立つ2つのことが助けになりました。これがプリプロセッサとテンプレートエンジンです。



彼らの助けを借りて、方法論を修正し、レイアウトを快適で便利なものにしました。



ほぼ完璧なCSS



プリプロセッサから始めます。 彼の選択は基本的なものではなく、最初にSassを使用し、次にSCSSを使用し、最終的にスタイラスに切り替えました。ミニマリズムを尊重し、スタイラスは可能な限りミニマリズムでした（人気があるため、以下の例ではscssを使用します）。



したがって、私が最初にしたことは、@ extendディレクティブを使用して、実際のアトムのように見える追加のクラスを作成することでした。 



 .flex { display: flex; flex-wrap: no-wrap; } .flex-jc-center { @extend .flex; justify-content: center; } .flex-ai-center { @extend .flex; align-items: center; }


私はこのアイデアが気に入っており、@ extendディレクティブは原子核と類似しており、その隣には追加の指示がありました。



私はこのアイデアを開発し、生物用に別のファイルを作成することを決定しました。 私は、いくつかの@extendディレクティブを含むクラスを呼び出しました。 



 .header { @extend .fixed; @extend .w-100; @extend .main-fill; @extend .left; @extend .top; @extend .flex-ai-center; @extend .z-top; }


さまざまな生物から小さな「動物園」を作成したので、インデントとサイズに数値を必要とするクラスで何かをすることにしました。



プリプロセッサ機能は、これに再び対処するのに役立ちました。その助けを借りて、いくつかの関数を作成し、変数を追加しました。



最初に、デザイナーから得たグラフィックプロジェクトを詳細に研究し、いくつかのパターンを明らかにしました。





最初のステップは、必要なクラスを作成するための関数とミックスインを書くことでした： 



 //    px  em @function em($pixels, $context: $browser-context) { @return #{$pixels/$context}em };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     


 //       $text-size: ( l: 18, m: 16, s: 14, xs: 12 );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     


 @mixin emFonts($list, $n) { //  $list – , n –        . @each $status, $size in $list { //  -       &-#{$status} { font-size: em($size - $n); //     } } }


ミックスインと関数のこの組み合わせを、都合の良い場所で呼び出すことができます。 



 .txt { @include emFonts($text-size, 0) }


出力では、異なるサイズのテキストに対して4つのクラスを取得します。 



 .txt-m { font-size: 1.125em; } .txt-s { font-size: 1em; }


同様に、見出しのサイズ、テキストと塗りつぶしの色、フォントなどの関数が作成され、呼び出されます。



つまり、各プロジェクトの作業は変数の値を入力することから始まり、クラスと関数自体がプロジェクト間で移行します。



テンプレートエンジン。



多くの人がテンプレートエンジンを使用していると思いますが、これはおそらくパグ（かつてはジェイドと呼ばれていました）です。



アトミックレイアウトでは、次の3つのおかげで必要です。





Pugは、次のコードを変換できるため、面倒なHTMLコードのマイクロクラスを完全に排除します。 



 … <ul class=”menu__list flex-ai-center w-100 relative “> <li class=”menu__item m-color m-font txt-s inline-block bold-border”>first</li> <li class=”menu__item m-color m-font txt-s inline-block bold-border”>second</li> <li class=”menu__item m-color m-font txt-s inline-block bold-border”>third</li> </ul>


編集に便利： 



 -let menuItemClasses = 'menu__item m-color m-font txt-s inline-block bold-border' //            ul li(class=`${menuItemCLasses}`) frst li(class=`${menuItemCLasses}`) second li(class=`${menuItemCLasses}`) third ... </ul>


または、別の実施形態では、ループを使用します。 



 let menuItems = ['first', 'second', 'third'] ul -for(let item of menuItems) { li(class=”menu__item m-color m-font txt-s inline-block bold-border”) -}


これは、必要なクラスを含む行が複数回繰り返されないため、それほど便利ではありません。



この方法の最後の弱点は、コード内に多数の未使用のクラスが残っていることでした。 しかし、この一見深刻な問題は、不要なクラスを削除するプラグインをプロジェクトビルダーに追加することで簡単に解決しました。



おわりに



結論として、私は次のように言いたいです。



「ほぼアトミックな方法論」を使い始める前に、私はsmacssを使用してからBEMを長い間使用していました。 その結果、bemから、インデントとサイズの説明を必要とするクラスの名前、およびファイルとフォルダーのストレージの階層のみを残しました。 既製のクラスと関数のセットは、ライブラリとしてプロジェクトに接続します。



私が注意したい重要な点は、ページとその個々のセクション全体のレイアウトの利便性です。 マイクロクラスのおかげで、テンプレートエンジンでページまたはセクションの「スケルトン」を作成するのは非常に簡単で、それからスタイルを記述します。


More articles:


All Articles