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 続きを読む

CSS設計における、すべてがコンポーネントであるという誤謬

2022/06/11 74 users 誤謬 コンポーネント CSS設計 コンポーネントベース すべて

BEMによってもたらされた、コンポーネントベースのアプローチでは、「ページはコンポーネントの集合によって表現されるべきであり、ページに含まれるのはすべてがコンポーネントである」と考える。しかしこれまでCSSを書いてきた経験から、これではデザイン意図を的確に表現することができないと感じるようになってきた... 続きを読む

【CSS設計手法】BEM、OOCSS、SMACSSの違いと特徴のまとめ | Web Design Trends

2019/03/21 96 users OOCSS SMACSS CSS設計手法 特徴 まとめ

CSSの設計手法とは、CSSのメンテナンス性や作業効率を向上させるためのHTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のことを言います。命名規則などとも呼ばれたりしますね。 ページ数が少なく、コード量もそこまで多くないような場合はあまり気にする必要はありませんが、大きなプロジェクトになるとCSSの... 続きを読む

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

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

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

なぜSassが必要なの？ | Stocker.jp / diary

2018/10/09 82 users Sass JavaScrip Stocker.jp 基礎 必須

「スマートフォン時代のWebコーディングスクール」開催！PC・タブレット・スマートフォンに対応したHTML・CSS・Sass・JavaScriptを基礎から学べます！ 【日曜開催】「1日で分かるSassとBEM講座」ではWeb制作で必須となったSassと効率よくコーディングするためのBEMを1日で学べます。 【日曜開催】「1日で分かるJavaScrip... 続きを読む

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 とは、命名規則の一種で、 モジュラーでメンテナンス可能 ... 続きを読む

自分のHTMLやCSSのコーディング環境がベストか見直してみよう！作業を効率化する技術やツールの導入・使い方がよく分かるオススメの本 | コリス

2015/04/28 93 users コリス less Git Sass Gulp

SassやLESSなどのCSSプリプロセッサ、OOCSSやBEMを使ったCSSの設計、Gitでのバージョン管理、gulpを使ったタスクランナー、Bootstrapなどのフレームワークの導入など、ここ数年でコーディング業界にさまざまな新しい技術やツールが登場しました。 なんだか便利そうなのは分かるけど、どこから手をつければよいのか分からない。似たようなものがあるけど、どれが自分にあっているのか？ コ... 続きを読む

3, 4 日で React を案件に導入(先っちょだけ)した話 - Qiita

2015/04/10 92 users Qiita React 案件 JavaScript 経緯

はじめに まずこの話は 最近話題だった React を案件に とりあえず 使ってみたという話をダラダラと書いた記事です。 React について深く書くという記事ではないでの悪しからず。 状況と経緯 まず状況を整理します。 私の話 フロントエンジニアといして有りたい存在 javascript も少し書くが、そこまで自信を持てるコードではない。という感じ。 最近 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設計 - < /gecko >

2014/12/01 74 users Gecko CodeGrid CSS ハイフン CSS設計

CSS Architecture Advent Calendar 2014 1日目の記事です。 CSSの設計をしていく上で大事なネーミングルール。 今年僕が関わったプロジェクトでのネーミングルールをゆるく紹介したいと思います。 こうやって名前をつけてました。 基本となる設計思想はBEMです。 BEMについては、 CodeGrid を御覧ください。 ネーミングルールを決めるとき、区切り文字をハイフン... 続きを読む

モダン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 Architecture with OOCSS, SMACSS, BEM

2014/03/09 67 users OOCSS SMACSS

CSS Architecture with OOCSS, SMACSS, BEM Presentation Transcript CSS Architecture with OOCSS,SMACSS,BEM jsCafe 2014-03-09 Katsunori Tanaka OUTLINE 1. CSS Architecture 2. CSS Methodology 3. CSS Preproc... 続きを読む

イマドキ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の紹介 実際の運用上どうするべきか ... 続きを読む

CSSの命名規則にBEMを取り入れてみる | dskd

2013/12/01 67 users dskd Element block フロントエ CSS

CSSの命名規則にBEMを取り入れてみる 2013/12/02 01:15 category : CSS 今年もあと一月ということでブログをリニューアルしました。ということでこの記事は BEM Advent Calendar 2013 １日目のエントリです。日付過ぎてしまいましたね。 BEMって何？ BEM とは Block, Element, Modifier の頭文字をとったもので、フロントエ... 続きを読む

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

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

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