小さくて合理的な先端理論:rscssとrsjs

9893 ワード

フロントエンド開発では、プロジェクトの品質を向上させ、メンテナンスを容易にするために、いくつかのルールと約束を設定してみます.これらのルールや約束についても、内容が簡単で、理解しやすいことを望んでいます.
rscssとrsjsは比較的新しく、比較的コンパクトなフロントエンド開発ルールと約束であり、そのうちrs代表Reasonable Systemであるため、「合理的」なcssとjsを追求していると理解できる.本文はそれらを紹介するだけでなく、少し補足して自分の見方もあり、リンクをクリックして原作者が与えた完全な内容を読むことをお勧めします.

cssの疑問から

rscssはcssを書く中のこのようないくつかのよくある問題を効果的に改善することを望んでいる(css哲学の3問):

このclassってどういう意味?

このclassはまだ使えるところがありますか?

私が新しく書いたこのclass、衝突はありますか?

コンポーネントの原則

rscssはまずコンポーネント(Components)をベースにした考え方を推奨する.BootstrapやMaterializeなどのコンポーネントは、さまざまなフロントエンドフレームワークでほとんど見られます.
1つのコンポーネントはこのような感じです.
ボタンを1つ小さくし、Webアプリケーション全体に大きくすると、表示されるビジュアル要素はコンポーネントとして使用できます.

コンポーネントの名前付け

rscss推奨コンポーネントは、少なくとも2つの単語の名前を使用し、中間は短い横線(-)で接続されています.

.search-form { /* ... */ }
.article-card { /* ... */ }

コンポーネントの要素

コンポーネントの内部のより細かい部分は、コンポーネントの要素(Elements)として扱われます.

要素の名前付け

前のコンポーネントと区別するには、要素の名前には1つの単語しか使用されません.
明らかに、1つの単語だけが衝突しやすいので、rscssは関係セレクタで要素とコンポーネントを関連付けることをお勧めします.

.search-form > .field { /* ... */ }
.search-form > .action { /* ... */ }

推奨サブセレクタ> 競合を回避するために、セレクタを含まない( )

.article-card .title { /* okay */ }
.article-card > .author { /* ✓ better */ }

複数の単語を使用する必要がある場合は、それらを直接接続し(短い横線などの区切り文字を使用しない)、違いを表現します.

.profile-box > .firstname { /* ... */ }

各コンポーネントの要素にclass名を使用し、ラベルセレクタを使用しないでください.名前のある要素はもっと意味があります.

複数の属性またはステータス

コンポーネントにしても要素にしても、さまざまなプロパティまたはステータス(Variants、またはバリエーション)があります.

属性またはステータスの名前付け

属性または状態を表すclassには、短い横線(-)の先頭を使用して名前を付けます.

/* component variants */
.like-button.-wide { /* ... */ }
.like-button.-disabled { /* ... */ }

/* element variants */
.shopping-card > .title.-small { /* ... */ }

ネーミング方式の解釈

rscssが推奨する短い横線を接頭辞とするclass名は少し驚くかもしれませんが、このように書いてもいいですか?答えは確かにいいし、組み合わせもかなり巧みだ.どうしてそう言うのですか.w 3 cのcss識別子の解釈を見てください.
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+0080 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.
このうちISO 10646はUnicodeに等しい.W 3 cは、css識別子で一般的に用いられる英字、数字および一部のUnicode文字(U+0080以上)の他に、短横線(-)や下線(_)に言及しても利用可能であることがわかる.
短い横線を接頭辞とするclass名は、属性や状態を表すclassであることを一目で示す特殊なタグに相当します.

コンポーネントネスト

コンポーネントはネストできます.
対応htmlは次のようになります.


  
    ...
  
  ...
  ...

ネストされた属性またはステータス

1つのコンポーネントが別のコンポーネントの内部にある場合、このコンポーネントを特別に表現したい場合があります.この場合、リレーショナル・セレクタを使用して結合しないことをお勧めします.

.article-header > .vote-box > .up { /* ✗ avoid this */ }

推奨される方法は、コンポーネントに属性またはステータスclassを追加することです.


  
    ...
  
  ...

次に、このclassに基づいて特別なスタイルを定義します.

.vote-box.-highlight > .up { /* ... */ }

これは、コンポーネントのスタイルがその位置に依存しないようにすることを目的としています.OOCSSの原則の一つ、Separate container and contentも、このような理念です.

レイアウト思想

rscssは、顔、logoなどの固定幅の高い特定の要素を除いて、コンポーネント自体がレイアウト位置に影響を与える属性を定義しないことを推奨します.

位置決め(position・top・left・right・bottom・)

フローティング(float・clear)

外縁(margin)

サイズ(width・height)

コンポーネントを全体と見なすと、適応するはずです.

レイアウト位置のプロパティを定義する必要がある場合

コンポーネントのレイアウト位置に影響するプロパティを定義する場合は、リレーションシップセレクタを使用してコンポーネントとその環境を関連付けることをお勧めします.

.article-list > .article-card {
    width: 33.3%;
    float: left;
}

.article-card { /* ... */ }
.article-card > .image { /* ... */ }
.article-card > .title { /* ... */ }
.article-card > .category { /* ... */ }

上記のコードでは、「コンポーネント自体の外観」と「コンポーネントの環境内の位置」が明確に分離されていることに注意してください.

補助クラス

rscss推奨アシストクラス(Helpers)は1つのファイルを単独で格納し、class名は下線(_)で始まる.補助類もよく使われる!important、対応しているので、できるだけ補助類を使わないようにしましょう.

._pull-left { float: left !important; }
._pull-right { float: right !important; }

下線(_)は接頭辞のclass名として、前文で説明したように、特殊なマークとして補助クラスであることを注意し、慎重に使用してください.
セカンダリクラスは、フロントエンドフレームワークでもよく見られます.

rscssと他のcss理論の比較

rscssのコンポーネント(Component),要素(Element)などの概念は,BEM,SMACSSなどのcss理論においても類似の存在がある.比較すると次のようになります.
RSCSS
BEM
SMACSS
Component
Block
Module
Element
Element
Sub-Component
Layout
?
Layout
Variant
Modifier
Sub-Module & State
BEM、SMACSSおよび前述のOOCSSの紹介については、以前の記事を参考にすることができます.
以上がrscssの主な内容ですが、rsjsを見てみましょう.

従来のwebアプリケーションに注目するrsjs

rsjsが注目しているのは、非単ページアプリケーション(non-SPA webアプリケーション)です.つまり、私たちが一般的に理解しているページは多く、主にjQueryを使用しており、各ページに独自の.jsファイルを持つ伝統的なサイトがあります.
JavaScriptコード自体に従うスタイルガイドがすでに存在するため、rsjsはネーミングスペース、ファイル組織方法などの他のポイントについてのみ提案しています.

行為の原則.

rsjsは,JavaScriptによって実現されるインタラクション機能を,一度に1つのコンポーネント(Component)にのみ影響を及ぼす動作(Behavior)とすることを推奨する.次の例を参照してください.



  

  Home
  ...

/* Behavior - behaviors/collapsible-nav.js */

$(function () {
  var $nav = $("[data-js-collapsible-nav]");
  if (!$nav.length) return;

  $nav
    .on("click", "[data-js-expand]", function () {
      $nav.addClass("-expanded");
    })
    .on("mouseout", function () {
      $nav.removeClass("-expanded");
    });
});

この中には多くの提案が含まれています.

dataプロパティの使用

html 5のdataカスタムプロパティdata-js-___を使用して、動作に関連するDOM要素をマークすることをお勧めします.
IDとclassで要素を選択するよりも、このdata属性の形式は明確な意味を持つ一方で、インタラクティブな動作に関連する要素であることを注意し、一方で多重化しやすく、どのDOM構造にもこのようなdata属性を追加すれば対応する動作を得ることができます.

動作ごとにファイルを個別に作成

それぞれの動作に対応するJavaScriptコードを別々のファイルに分離し、ファイル名で明示することをお勧めします.ファイル名はdata-js-___この属性名の対応名を参照することで、属性名によって対応するJavaScriptコードを見つけやすくなります.
可能なファイルディレクトリ構造:

└── javascripts/
    └── behaviors/
            ├── collapsible-nav.js
            ├── avatar-hover.js
            ├── popup-dialog.js
            └── notification.js

行内JavaScriptを使用しない

htmlには、...またはonclick=""などの形式で行内JavaScriptコードを追加しないでください.動作の論理コードをhtmlとは独立に保つことで、コードのメンテナンスを容易にすることができます.
rsjsのコンテンツから見ると,React,Vueなどのライブラリが存在する今日でも,「コンテンツから行動が独立している」という約束は,従来のjQueryを主とするWebアプリケーションに一定の意義を持つ.

イニシャルデータの取得方法

従来のWebサイトの一般的なシーンの1つは、バックエンド言語がページにいくつかのデータを事前に出力し、JavaScriptがそれらを使用することです.次のようなラベルのをたことがあるかもしれませんが、のによると、これはけるべきことです.



window.UserData = { email: "[email protected]", id: 9283 }
 
 
rsjs建议的方案是，如果这些数据只需要一个组件使用，可以利用之前提到的data属性（保存为值），由行为的JavaScript代码来自行取出。 
 
 
             ，      meta  。
 
 
  ...
  
  

  
  
  
  
ネーミングスペース
  
rsjsは、できるだけ ないグローバル  を  することを  します.  のクラス、  、  Objectに れる、 えばApp:if (!window.App) window.App = {};

App.Editor = function() {
  // ...
};
  
  の   で     なヘルプメソッドは、Objectを  に  し、それらをファイル して  することができますhelpers/:/* helpers/format_error.js */
if (!window.Helpers) window.Helpers = {};

Helpers.formatError = function (err) {
  return "" + err.project_id + " error: " + err.message;
};
  
サードパーティライブラリの  
  
rsjsはサードパーティ ライブラリを  すれば,コンポーネントの  の  も ることを  する. えば、Select 2の  は、  data-js-select2を つ  のみに  を えることができる.// select2.js -- affects `[data-js-select2]`
$(function () {
  $("[data-js-select2]").select2();
});
  
サードパーティ ライブラリのすべてのコードは、サイト  のコードとは  して、vendor.jsのようなファイルに  できます.これにより、サイトがコードを  すると、サードパーティ ライブラリコードを   することなく、ユーザはキャッシュを    することができる.
rsjsの  への  
  
rsjsは、  のコンテンツが   に   で、つまりメンテナンスが  であることに っており、パフォーマンス(ユーザーに   )が  ではない   があると えています.   べた   も、メリットとデメリットがあり、rsjsはメリットとデメリットを  した で、   なメンテナンスに  な  を ただけだ.
rsjsは   ではなく, ページアプリケーション(SPA)などのフロントエンド  が  な  には  されない.  しているのは、JavaScriptがインタラクティブな   なWebサイトである  のWebページです.
 めくくり
  
rscssとrsjsが  する「   」は みな  であり、  ではなく、  ではなく、 れているわけではなく、コードが「  に っている」ことを んでいるだけだ.rscssとrsjsは  このようにして、  な  で、 くない  で、“ さくて   です”を  しています.
  rsjsはまだ   (work-in-progress)であり、rscssは     している.その でも   なアドバイスをお めします!
(  のブログ、  アドレスを   :http://acgtofe.com/posts/2017...)

マウス懸濁制御要素の非表示と表示-cssでのマウスのhover状態

[翻訳]ASPを作成する.NET WebApi RESTfulサービス(8)