Best Practices For Naming Design Tokens, Components And Variables — Smashing Magazine
How can we get better at naming? This post is dedicated to naming conventions, tips, and real-world examples that help you name things in a robust and flexible way. Naming is hard. As designers and developers, we often struggle finding the right name — for a design token, colors, UI components, HTML classes, and variables. Sometimes, the names we choose are too generic, so it’s difficult to unders
Design good practices
Learn everything you need to become a better designer standards, conventions and more.
Naming Variables In CSS
“Naming things is hard” goes the software engineering axiom and CSS is no exception. Here are some collected thoughts related to naming CSS Custom Properties. I’m going to use use the terms “variable” and “custom property” interchangeably since they are effectively the same thing for the purposes of what to call them. Disclaimer: What follows is not gospel. CSS to me is a very poetic language, the
Naming things needn’t be hard
Naming things needn’t be hard Find inspiration for naming things – be that HTML classes, CSS properties or JavaScript functions – using these lists of useful words. Word lists Action Describe the behaviour or operation of things. Collection Describe the containment and grouping of things. Comparison Describe the equivalent likeness between things. Numeration Describe the order, precedence and mult
事例あり：成功するブランド名やサービス名の共通点とは【ブランディング入門#4】 デザイン会社 ビートラックス: ブログ
ビジネスアイディアを考え、プランを作成したは良いが、商品やサービス、そして会社名などのいわゆる“ブランドネーム”を何にするかで悩んでしまうケースは意外と多い。 響きが良く、海外の人達にも覚えてもらいやすい。そして、時間が経っても色あせない、そんな優れたブランド名を考えるのは容易ではない。一方で、成功する名前を付けるのは、グローバルブランド構築の第一歩でもある。 有名ブランド名の由来まずは、現在著名になっているブランド名の由来を見てみよう。有名な内容から、全く知られていないネーミングの秘密もあり、面白い。 ナイキ: Nikeギリシャ神話の勝利の女神の名前から。 アップル: Apple創業者のスティーブ・ジョブスが果実食主義者であり、それまで勤めていた会社「ATARI社」よりも電話帳で前にくる名前にしたかったため。 パンドラ : Pandora音楽サブスクリプションのPandoraは由来は、ギ
CSS Utility Classes and "Separation of Concerns"
Software developer, author, and host of Full Stack Radio. August 7, 2017 Over the last several years, the way I write CSS has transitioned from a very "semantic" approach to something much more like what is often called "functional CSS." Writing CSS this way can evoke a pretty visceral reaction from a lot of developers, so I'd like to explain how I got to this point and share some of the lessons a
プログラミングでよく使う英単語のまとめ【随時更新】
チェックマークをつける意味で check を使う場合は例外。 check 自体を避けたい場合は putCheckmark とする。 change 何をどう変更しているのかわからない。 check と同様に具体的な名前にできないか考えてみるとよい。 例外として isChanged のフラグを変更するための Change メソッドに使う場合がある。 xxxManager / xxxController こういう名前をつけるとクラスが肥大しやすい。 単一責任の原則にのっとってクラスを設計するべし。 UNIX 哲学にも「Small is beautiful.」という考え方がある。 xxxType, xxxData, xxxItem, xxxInfo 冗長になりやすい。 Type, Data, Item, Info を取っても意味が通じないか検討してみる。 使わないほうがよい言葉 compare 比
「誰がこんなネーミングにしたんだ……。」プログラミングのネーミングルールを決める時に参考にしたい情報まとめ
サイトのメンテナンスにおいてしばしばネックになるのは、どんなネーミング・構成で制御しているのか分からなくなってしまうことです。しっかりと基準に則った、誰がいつ見てもわかりやすいネーミングでコーディングしていくことは、非常に重要なことです。 今回は、プログラマーがネーミングを考える際に参考にしたいサイトを選んでご紹介いたします。 1. codic - プログラマーのためのネーミング辞書 https://codic.jp/ 様々なサイトに紹介され、「ネーミング」で検索しても上位に表示される素晴らしいツールです。例えば、Webサイトの背景に動画を設置する際に、class名をどうしようか悩んだとします。そこでcodicに「背景動画」と入力すれば「background_videos」と提案してくれます。提案されたネーミング以外にも、その他の候補も出てきます。 考える労力を省くことができるという点で優
Sublime Textでネーミングに悩んだ時などに！codicで英語関数名を手軽に取得する方法
{ // domains to search "domains" : [ { "key": "default", "url": "https://codic.jp/engine?text={{search_query}}" }, { "key": "codic", "url": "https://codic.jp/engine?text={{search_query}}" }, { "key": "google", "url": "https://www.google.com/search?q={{search_query}}" }, // google.co.jpの結果を表示したい場合 // { // "key": "google", // "url": "https://www.google.co.jp/search?q={{search_query}}" // }, { "key":
ネーミングが外国語で危ない意味になってないか調べられる WordSafety.com
WordSafety.comは、外国語では危険かもしれない命名をチェックできるwebサービスです。 19の言語について、あなたのネーミングが外国語の汚い言葉を含んでいないかを、発音の類似も含めて見つけてくれると言っていま […] WordSafety.comは、外国語では危険かもしれない命名をチェックできるwebサービスです。 19の言語について、あなたのネーミングが外国語の汚い言葉を含んでいないかを、発音の類似も含めて見つけてくれると言っています。 サポートしているという19言語の内訳は、アラビア語、ベンガル語、中国語、オランダ語、英語、フィンランド語、フランス語、ドイツ語、ヒンディー語、イタリア語、日本語、韓国語、マレー語、ペルシア語、ポーランド語、ポルトガル語、ロシア語、スペイン語、スウェーデン語ということ。 いろいろ試してみたところ、ものすごく優秀という感じはないですが、フォームで
SLOBSERVER - L'actualité de Second Life
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
コーディング中のクラス名で迷いたくない！よく見るコンポーネントの名前17選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 コーディングをしていて、クラス名に迷うことってありませんか？ ボタンや見出しといった、比較的単純なコンポーネントなら「.button」「.headline」など、すぐに思いつくかもしれません。 しかし、それが複雑なコンポーネントだったりすると、なかなか思いつかないものです。 そんな悩みを解消したいと思いまして、いろいろなサイトのソースコードを見て、開発者がどんなクラス名をつけているのか調査してみました。 今回は、その中からよく使われていたクラス名と、「これはナイスネーミング！」と思ったクラス名をピックアップしたいと思います。 thumbnail サムネイル画像。 アイキャッチ画像やギャラリーページの画像一覧などで用いられます。 avatar ユーザのアバター画像。 Webサービスのユーザ情報ページや、ブ
tarappism.com - このウェブサイトは販売用です！ - tarappism リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
BEMの命名規則は賢い | inkdesign
BEMおよびその命名派生としてのMindBEMdingで使われるfoo__barやfoo--barというようなハイフン、アンダースコアを重ねた命名はキモいし冗長だと嫌われがちだ。僕自身も初見ではそのように思っていた。しかしこれは本当に良いアイデアだと思うし、実務でも僕は採用している。 CSSの設計、その命名のときに考えるのは、それがいかに明白であるかということと、汚染されるリスクを抑えられるか、ということだ。ワードを明確に区切ることによって、その機能・カテゴリを区別するという点においては、別に単一記号であろうが、キャメルケース、スネークケースであろうがなんでもいいかもしれない。しかしスタイルが汚染されるリスク、という点でこの珍妙な命名は優秀だ。 プロジェクトに関わる開発者が多いほど、その書き方にブレは生じる。もちろんコーディング規約なり、スタイルガイドなりであらかじめルールを共有しておけば
モディファイアの付け方
21日も遅くになりましたが、BEM Advent Calendar 2013の20日目の記事です。 モディファイアをどうやって付けるのがいいかなーとか悩んでるので書いておきます。 悩んでるだけなので、特に「これにしろ！！」とかはありません。 画像が左に来て、右にテキストが来るようなブロックを作った際に、画像の左右を反転させるモディファイアを作るとします。 方法1.マルチクラス関係無いですが、マルチクラスする際の区切りの半角スペースを２つにすると気持ち見やすいです。 1-1.元の名前にハイフン２つ付けて、その後に意味を付けます（この時はreverse）他のブロック、エレメントで使用させないように元の名前にプラスする。 JavaScriptで操作する時は、元の名前を書かないといけないので、ちょっと面倒かもしれない。 1-2.元の名前にハイフンを２つ付けて、key-value的な感じにするkey
BEMで命名する時に役に立ちそうな単語
BEM Advent Calendar 2013の10日目の記事です。 ちょっとBEMツールのことは1日お休み。明日やろう明日。 BEMツールの Full stack quick startをやってた軌跡は以下です。 サンプルプロジェクトを使ってみる：BEMツールに触れてみる（1）ブロックライブラリを使ってみる：BEMツールに触れてみる（2）ブロックを作ってみる：BEMツールに触れてみる（3）ということで、今回はBEMで命名する時に役立ちそうな単語を書き出して見ようと思います。 役立ちそうな単語一覧あくまで名付けるときの参考になったらいいな、程度で書いてます。 ※…..で頭合わせしてるのはinuit.cssがやってたからっていうそれだけ。 色々組み合わせて使いそうなものhero とかお洒落っぽいので使う。大きさ順序は hero > main > sub くらいのイメージ。 hero....
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - kettanaito/naming-cheatsheet: Comprehensive language-agnostic guidelines on variables naming. Home of the A/HC/LC pattern.
IT用語から差別や偏見一掃へ、業界で進む言い換え ホワイトハッカーもダメ？ いやそれってそもそも
namae — name new project
SUIT CSS naming conventions
