Create a gist now

Instantly share code, notes, and snippets.

@juno /README.md forked from necolas/README.md
Last active Dec 23, 2015

What would you like to do?
Japanese Translation.

注釈 私はこの規約を SUIT framework で使用している

テンプレートコンポーネント

構造を持ったテンプレートを提供するのに使われる。

パターン

t-template-name
t-template-name--modifier-name
t-template-name__subcomponent-name--subcomponent-modifier-name

t-icon
t-icon--large

t-btn
t-btn--large

t-media
t-media__img
t-media__img--large
t-media__opt
t-media__body

ステートコンポーネント

コンポーネントの状態を示すのに使われる。

パターン

is-state-type

is-hidden
is-collapsed
is-expanded
is-selected

JavaScriptコンポーネント

JavaScriptのみで使用されるフックをコンポーネントが提供するのに使われる。JavaScriptを利用したUIや抽象化されたその他のJavaScriptの振る舞いを実現するのに用いる。

パターン

js-action-name

js-submit
js-action-save
js-ui-collapsible
js-ui-dropdown
js-ui-dropdown--control
js-ui-dropdown--menu
js-ui-carousel

テーマ用コンポーネントについて

以下のように、テンプレートコンポーネントの命名規則を流用できる:

specific-name
specific-name--modifier-name
specific-name__subcomponent-name
specific-name__subcomponent-name--subcomponent-modifier-name

もしくは、どんな形式のものでもよい。

<!--
classの値の前後に空白文字を余計に含めるのはどうだろう?
コードがより読みやすくなり、HTMLの他の情報に比べてコンポーネントがより際立つのではないか?
-->
<div class=" t-unit t-media ">
<div class=" t-media__img ">
<a href="#">
<img class=" product-img " src="http://example.com" alt="">
</a>
</div>
<form class=" t-media__opt js-action-rate ">
<button class=" product-rating " type="submit">
<div class=" product-rating__panel ">
<span class=" product-rating__points ">
5
</span>
<span class=" product-rating__label ">
upvotes
</span>
</div>
<strong class=" product-rating__action t-btn btn-normal ">
Upvote
</strong>
</button>
</form>
<div class=" t-media__body ">
<h2 class=" h2 ">
<a href="#">Product title</a>
</h2>
<p>[content]</p>
<ul class=" t-uilist--hz ">
<li><a class=" tag " href="#">tag name</a></li>
<li><a class=" tag " href="#">tag name</a></li>
<li><a class=" tag " href="#">tag name</a></li>
</ul>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment