CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames

2024/07/11 129 users CSS class名 関数名 単語リスト OOCSS

CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Class... 続きを読む

CSS設計って最近こういう感じだと思うんですけどどうですか

2022/07/29 203 users CSS設計 感じ doc CSS Modules https

CSS設計って最近こういう感じだと思うんですけどどうですかという話です。BEM、CSS Modules、CSS in JS、Tailwind CSSとか色々ありますがどういうふうに捉えればよいのだろうという内容でした。 フォローアップ https://paper.dropbox.com/doc/CSS-pXvOHW14FJ4gqJb60mnyI 続きを読む

妖怪人間ベム新作アニメ「BEM」公式サイト

2019/02/07 153 users 妖怪人間ベム 新作アニメ 企画 誕生50周年 公式サイト

2018年に誕生50周年を迎えた名作ホラーアニメ「妖怪人間ベム」が2019 年、企画「ＮＡＳ×プロダクション Ｉ.Ｇ」により、新たに生まれ変わる！ 新作アニメ『BEM』の最新情報をお届けします。 続きを読む

2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査 | コリス

2018/05/15 107 users コリス デベロッパー npm Webpack CSS

フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールについての調査結果を紹介します。 SassやLESS、BootstrapやFoundation、AutoprefixerやModernizr、BEMやCSS-in-JS、CSS GridやFlexbox、NPMやGulp、jQueryやReactやVue.js、WebpackやESLintなど、実際にどの... 続きを読む

BEM を使うべき5つの理由（なぜ BEM が G.R.E.A.T といえるのか） - Frasco

2017/11/18 192 users Frasco モジュラー CSS 出番 命名規則

CSS は、比較的簡単に使いこなすことができます。しかし、それを使い続け綺麗な状態を長期的に保つこととは全く別の話です。知らず知らずのうちに乱雑になっていきます。ありがちですよね？そんな時、 命名規則 の出番です。 様々な選択肢 がある中で私が選んだのが BEM なのです。 Mat Przegiet によるイラスト BEM とは何か BEM とは、命名規則の一種で、 モジュラーでメンテナンス可能 ... 続きを読む

[CSS]classの命名など気になるテクニックがいろいろ取り入れられているレスポンシブ対応のフレームワーク -Skyline | コリス

2015/01/21 106 users Skyline コリス アーキテクチャ class CSS

大規模サイトから個人のポートフォリオやブログまで、さまざまなデザインをサポートするための汎用性に優れたアーキテクチャで設計されたCSSのフレームワーク「Skyline」を紹介します。 Skyline Skyline -GitHub Skylineでは気になるCSSのテクニックがたくさん使われています。 classの命名にはBEM、リセットにはnormalize.css、印刷にはHTML5 Boil... 続きを読む

2014年 Web 制作に使い始めてよかったツールとかいろいろまとめ – WP-E（仮）Web Professional Education

2014/12/25 126 users WP-E ツール web 制作 CSS

何処かで聞いたことのあるタイトルですか? 気のせいです。Web 制作業3年目のぼくが2014年に取り入れてよかったあれこれリストアップしてみます。残念ながら2014年の最新はこれだ! という感じにはならず以前からあるものが殆どになりましたが、2014年と共に水に流して頂きますようお願いします。 BEM https://bem.info/ 最初の拒絶反応から一転、もう BEM 無しに CSS 設計は... 続きを読む

モダンCSS設計の解説サイトまとめ - Qiita

2014/03/26 557 users MindBEMding 図解 CSS 設計手法 部分

最近CSSの設計手法も進化してきたので、モダンCSS設計についての記事をまとめてみました。 MindBEMding（日本語訳） CSSのモダンな記法、BEM記法について詳しくまとめたもの。 Japanese Translations of BEM-Methodology (BEMの日本語訳) BEMについて詳しくまとめたもの。図解あり。上記のサイトと被る部分あり。 General CSS note... 続きを読む

イマドキCSS設計

2014/01/22 498 users Slides AGENDA ATND connpass 運用上

イマドキCSS設計 NTTレゾナント　森本恭平 About Me Twitter:basara669 ディレクター フロントエンドエンジニア 今日のスライド http://basara669.com/slides/140122/index.html ※今日のatndやconnpassにも載っています Agenda なぜCSS設計が必要なのか BEMとSMACSSの紹介 実際の運用上どうするべきか ... 続きを読む

BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号

2013/10/29 553 users MindBEMding アインシュタイン CSS 命名 文書

BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。上記の2つの文書はどちらも@junyaさんが日本語に... 続きを読む