MindBEMding と近代 Component 設計の共通点 - Qiitaマークアップ歴の長い方からすれば大した話でもないのですが、フルスタックエンジニアの方々がフロントエンド開発に参入される昨今。CSS指定に関して、備わっていると良い感覚を共有できればと思ったので、メモを書きます。 MindBEMding が解決した課題 Vue.js のスコープ付き CSSについて見てみましょう。本家のドキュメントを引用します。
【CSS設計】拡張や修正に強いコンポーネントをマークアップする6つのテクニック | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 皆様、CSS書いてますでしょうか。 今回はSMACSSやBEMをある程度ご存知の方向けに、コンポーネントをマークアップする際に役立つテクニックと題して、「SMACSSを使う際に役立つテクニック」「BEMを使う際に役立つテクニック」「さまざまなシーンで役立つテクニック」をご紹介したいと思います。 なお、SMACSSやBEMをご存知ない方は、本記事の参考文献＆記事のリンクが参考になると思いますので、はじめにこちらをご参照いただければと思います。 ※「コンポーネント」という言葉は、使われるシーンによってさまざまな意味になりえますが、本記事においては「Webページを構成するパーツ」と定義させていただきます。 SMACSSを使う際に役立つテクニック編 まずはSMACSSを使う際に役立つテクニックからご紹介します。
モデルやメソッドに名前を付けるときは英語の品詞に気をつけよう - Qiita
はじめに 他の人が書いたコードを読んでいるときに時々気になるのが、英語の間違いです。 特に動詞、名詞、形容詞の使い分けが間違っていたりすると、かなり違和感を感じます。 そこで今回はモデル（＝クラス）やメソッドに名前を付けるときの基本的な原則をまとめてみます。 また、英文法的に正しい品詞が選べるようになるための習慣についても最後に説明します。 想定する言語/フレームワーク この記事の説明ではRuby/Ruby on Railsを想定しています。 ただし、基本的な考え方は他の言語でも同じように使えるはずです。 モデルの名前は名詞にする 例: 「支払い情報」を表すモデルを作りたい場合 × Pay ○ Payment 「支払う = payか。よし。」でモデルを作ってはいけません！ payは動詞で、payの名詞形がpaymentです。 Payモデルではなく、Paymentモデルを作りましょう。 例:
お探しのページは見つかりませんでした | mkasumi.com
普段はWebプロダクト周りのデザインをしている森田かすみの技術ブログです。Webプロダクトを改善していくにあたり、学んだことや体験したことを記録しています。
CSS Subclassing
上野 学（@manabuueno）- 2014年1月17日 CSS Subclassing は、主にアプリケーションよりのウェブの実装に役立つ CSS の書き方である。 アプリケーションよりのウェブとは、企業広報サイトのように各画面でデザインの個別性が高いものではなく、コンポーネント化されたUI要素の組み合わせのみで各画面が構成されるようなもののことである。 CSS Subclassing の目的は、HTML 要素をユーザーインターフェースオブジェクトのインスタンスとして捉え、そのスタイルをクラスとして定義することにある。そしてあるクラスの性質（スタイル）を継承した、サブクラスの定義もできるようにする。 HTML 要素にスタイルをあてる場合、class 属性にクラス名をセットしてそれを CSS のセレクターに用いることは普通に行われる。しかし HTML 要素の class 属性は、いわゆる
正しいJavaScriptの変数名の話をしよう
「var π = Math.PI; が文法的に正しいJavaScriptだと知っていますか？」という書き出しで始まるJavaScriptの変数名についてのエントリが話題になっていました。エントリーを書いたのはベルギーのフリーランスWEB開発者のMathias Bynensさんです。彼はUnicodeのどんなグリフが識別子として利用できるのかECMAScriptの仕様を見てみることにしたそうです。 ECMAScript 5.1によれば: 識別子は予約語ではない識別できる名前 となっており、直接記号やグリフについての制約には言及していません。元記事ではさらに予約語や識別子に使用できる文字の例外などについて解説した後に、下記のようなコードが有効なJavaScriptの変数名であるとして紹介しています。 // How convenient! var π = Math.PI; // Sometime
CSSや画像の命名規則について - kojika17
コーディングで時間のかかる要素の1つとして、id,class名や画像名などの命名規則が挙げられます。 特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、 その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。 一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。 カテゴリに分類して、つなげる。 ページのどの位置に属すか分類し、つなげる方法を取っています。 基本的に、CSSや画像名は同じにします。同名にすることで、名前を考える手間も省け、変更箇所の特定がしやすくなります。 例： CSS #top-side-nav 画像 top-side-nav-home.png top-side-nav-company.png 上記のように命名することで、 デザインを見なくても、どのような箇所に使われている
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ヒューマンリーダブルな CSS 記述法（異次元編）：2016年5月13日 CodeGrid 四周年記念パーティー
スタイルシート［CSS］/CSSの基本/ID名とクラス名 - TAG index