コンポーネントが増えまくったらどうするか
コンポーネントが増えまくったらどうするか
上記方針だと、Reactコンポーネントの名称のクラス名はグローバルになるので、たとえば、share-menuというクラス名を他の場所で使ったらスタイルが崩れてしまう。
例:
トップページで
<div class="share-menu">Gyazoは共有メニューが充実!</div>
とか
バージョンアップのお知らせダイアログの中で
code:html
<div class="versionup-modal">
<h1>Gyazoがバージョンアップしました!<h1>
<div class="share-menu">
<a class="twitter-share">Twitterで友達に教える</a>
</div>
</div>
とか書いちゃうリスクがある(↑どちらも、中でうっかりshare-menuを使ってる)
怖いのは、既存のコードに含まれているクラス名と同じReactコンポーネントを後から作っちゃう場合。
react componentは、トップの要素に component prefixをつけて、share-menu-component のようにしてもよい(MAY)
componentが何百になってきたら必須そう?
-component が長い(-_-)
__share-menu, c-share-menu にする?
i18nの名前だと、<context>-<component-name>みたいにしてるからそれに揃えるのはどうだろう && そんなに何度も書くわけじゃないので、長くても大丈夫だと思う pastak.icon
contextがあるやつとないやつがあって、ない場合もOKみたいなルールだと、ぱっと見、名前が重複しそう。洛西.icon
例: component名: ShareMenu.js で、cssクラス名は、 image-share-menu と
component名: UserIcon.js でcssクラス名は、 user-icon などが混ざると危険そう。
ない場合はcommonとかutilsとかを使う? う〜ん・・・ pastak.icon
うーん、それなら、share-menu-component ルールのほうが分かりやすいかな。context、正直なにをつけていいかよくわからん。洛西.icon
いやいや、ShareMenu "コンポーネント"は絶対複数できないのだけど(上のルールを守るかぎり)、うっかり、他のトップページやコンポーネントの内部でとかで全然関係なく、<span class="share-menu">Gyazoは共有が簡単です</span> とか書いちゃうリスクがあるのです。
component/images/shareMenu.jsとcomponent/collections/shareMenu.jsみたいにshareMenucomponentが複数できる場合の話だと思ってた pastak.icon
いえ、違います。そこは簡単に防げると思う(ファイル名をみれば分かる)。グローバルなCSSクラス名が全然違う場所の内部で使われるリスクが怖いっていう話です。 洛西.icon
share-menu-component で良いと思います pastak.icon
では、この方針は、やってもよい(MAY)レベルで運用ということで。