以下、ブログに書いたのとほぼおなじ内容だけどこっちにも転載してみます。 github: https://github.com/rstacruz/rscss githubのREADMEをドキュメント化したもの: http://ricostacruz.com/rscss/index.html （このドキュメント自体がRSCSSの実践例になってる） しばらく CSS とか追ってなかったので、触るにあたって「むやみにCSS書いてたら後で確実に死ぬし、そういえばなんかOOCSSとかあったな」と思っていろいろ調べてたら OOCSS の他にも SMACSS とか BEM とか SuitCSS とか FLOCSS とかなんかいろいろ出てきて大変でした。たしか SMACSS くらいまでは記憶があるんだけど…。 で、どうもどれもしっくり来ないのでさらに調べてみると RSCSS というものを発見。「フレームワー
【CSS設計】SMACSSからCSSプリプロセッサとの付き合い方について学んだこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まずSMACSSとは SMACSSとはCSS設計手法の一つです。『Scalable and Modular Architecture for CSS』の頭文字をとってSMACSSと呼ばれています。SMACSSの特徴は５つのカテゴリに分類をして、それぞれの考え方に合わせた設計を行うのが特徴です。 今回の記事では、SMACSSについての解説は割愛させていただきます。SMACSSの詳しい内容については、『Scalable and Modular Architecture for CSS』をぜひ読んでみてください。こちらは日本語に翻訳もされていて、かなり読みやすく参考になるところも多いのでオススメです。 またすぐに学びたいという方はCodeGridさんの記事が参考になるので読んでみてください。 SMACSSによるCSSの設計 – ベースとレイアウト | CodeGrid もちろん『最強のCSS設計
そのCSS、ヤバイかも？CSS設計が破綻するありがちな失敗パターン4つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
コンセプトは「現場で使える、実践的なCSS設計」です。 以下のようなポイントに当てはまる方は、ぜひ手にとってみてください。m(_ _)m CSS設計を勉強したいとは思ってるけど、まだ本格的には動いていない CSS設計の理屈はわかったけど、いざ実務でやると上手くいかない SMACSSとかBEMとか方法論がいろいろありすぎて、どれをどう使えばいいのかわからない CSSを設計する意義がわからない CSS設計を実務に導入したいけど、絶対に失敗したくない ということで広告はこれくらいにして、本題に入りたいと思いますっ。 1. ドキュメントがない 複数人で開発を行う場合、ドキュメントがないとコーディングルールをはじめとするさまざまなお約束事項をメンバー間で共有することができません。 その結果、命名規則が守られなくなったり、CSSの書き方がバラバラになったりと、設計がみるみる内に崩れていくでしょう。。。
Ashley Nolanは、CSSとJavaScriptの機能やフレームワークをどれだけ使っているかというアンケートを毎年行っています。 以下では2019年版である、The Front-End Tooling Survey 2019というアンケート結果の概要を紹介してみます。 回答者数が昨年から4割も減ってるのだが一体何があったのだろう。 The Front-End Tooling Survey 2019 - Results 3005人の開発者が、27の質問に回答してくれました。 私の家族に女の子が増えたので集計結果を出すのが遅れました。ごめんね！ 昨年からの一年で変わったところを見ることで、みんなの考えやトレンドが他者と共有されているか確認することができます。 これらの結果から、フロントエンドツール全体の知識レベルや使用傾向を分析するのにも役立ちます。 Quick Thanks 手伝って
技術日記＠kiwanami
求められている気がしたので、EmacsLispについて知っていることを書いておこうと思った。 PerlでWebAppの開発に必要なN個のこと - Islands in the byte stream 開発に必要なN個のこと by Google パッケージマネージャ Cask を使うのが今風。先日CartonというPerlのパッケージマネージャと名前がかぶっていたので、改名された。 https://github.com/cask/cask ちなみに、普段使いであれば、Emacs24.xから標準で入っているpackage.elを使うか、el-getを使う。 Bitbucket | The Git solution for professional teams アプリケーションサーバ イベントドリブンなElnodeと、httpd.elをpure Emacsで書きなおした simple-httpd
OOCSS、BEM、SMACSS、FLOCSS、RSCSSを比較して自分にあった設計思想をみつける
フロントエンドエンジニアというポジションに就いて1年半、普段はJavaScriptを中心に開発している。しかし、いつまで経ってもCSSを思いどおりに使いこなせない。理由は、どんな粒度でクラスを分割し、それぞれにどんなスタイルを適用すれば良いのかわからないからだ。 以下が、CSSの闇にのまれ、筋肉に解決に糸口を見出そうとした哀れなフロントエンドエンジニアの心の叫びだ。 — ダーシノ (@bc_rikko) 2017年3月1日 ということで、よく話題にされる5つのCSS設計を比較し、自分にあった設計思想を見つけようと思う。（CSSは苦手なので、おかしな点があったらご指摘ください） 今回比較するCSS設計思想は以下の5つ。 OOCSS BEM SMACSS FLOCSS RSCSS 古代のCSS設計 まずはCSSの設計思想に触れる前に、いにしえより伝わりしCSS遺産について触れておく。 多くの場
One of the most useful features of Sass is being able to separate your stylesheets into separate files. You can then use the @import directive to include the source of your individual files into one master stylesheet. But how should you structure your Sass projects? Is there a standard way of separating out your CSS files? Basic directory structure I like to layout my Sass projects like this: styl
Modern alternatives to BEM
Brainstorming a handful of new CSS organization acronyms August 26, 2022 When I first heard Nicole Sullivan talk about OOCSS, I thought “Oooh, smart.” When I read Jonathan Snook’s riff on that idea in SMACSS I thought “Oooh, smart.” When I heard Harry Roberts say “never use IDs in your CSS files” I said “Oooh, smart.” But when BEM and roboclasses came around… I didn’t have the same reaction. I nev
模写をする習慣がついてから、公開されているいろいろなスタイルシートを見るようになったのですが、その中で気になる表記を見つけました。 .mt5{ margin-top: 5px; } .mt10{ margin-top:10px; } .text-left { text-align: left; } .text-right { text-align: right; } ↑こういう表記です。「common.css」とか「base.css」と名付けられたファイルの中に記述されていることが多く、見かけるたびにこれって業界ではよく使われているのものなの？と思いました。 この表記の意味はわかります。あらかじめわかりやすいクラス名でスタイルシートを用意しておいて、HTMLにクラス名を記述しレイアウトを組んでいく…というものですよね。私も「.clearfix」と名付けたクラス用意して同じ手法を使っています
各CSS設計を、自社のサービスに取り入れる場合どんなメリット・デメリットがあるんだろう、と思って調べたので個人的なメリット・デメリットを含めてまとめました。 ちなみに弊社はSMACSSを採用していたのですが、思った以上に「似ているけれども少し違うため使い回せないパーツ」と「内容に依存するパーツ」が多かったので、そのあたり上手くクリアできる設計手法無いかなと思って探しました。 一覧 OOCSS BEM SMACSS FLOCSS ECSS MCSS OOCSS 特徴 オブジェクト指向 マルチクラス 構造とスキン（見た目）を分離する コンテナと内容を分離する
SassとGruntとStyleGuideと
この記事は Frontrend Advent Calendar 2013 16日目のエントリです。 今年は色々なツールをワークフローに導入したり使用したりしました。中でもSassとGruntとStyleGuideツールの導入が印象深いので簡単におさらい的に紹介します。 Sass & Compass 「CSSでも十分書けるし」と思って導入を渋ってたSass。OOCSSとかに関するスライドなどから影響を受けてたこともあって、実務で書いてたCSSをSCSSで全部書きなおすというところから始めました。 モバイル時代におけるCSSの設計と実装 CSSプリプロセッサの取扱説明書 ちゃんとCSSを書くために - CSS/Sass設計の話 WebデザイナーのためのSass/Compass入門 SMACSS SassとCSS設計 CompassはMixin便利だなーと思って使いまくってたんですが、このエント
SMACSS (スマックスと発音する) は厳格なフレームワークというよりはスタイルガイドである。インストール、またはダウンロードするライブラリは本書にはない。SMACSSはデザインプロセスを分析するための手法であり、厳格なフレームワークを柔軟な思考過程とする手法だ。そしてCSSを使ったウェブサイトの開発に対する一貫したアプローチをドキュメント化する試みでもある。いったい誰が現在においてCSSを使わずにサイトを制作するだろうか!? このアプローチのすべてを活用するのも、部分的に活用するのも、どちらでも最適な方を選んでほしい。もちろん使わなくてもかまわない。このアプローチがすべての人の好みに合わないのは理解できる。ウェブ開発においてほぼすべての質問に対する回答は『時と場合による』だからだ。 Options $ 15.00 CAD - E-book
cssの設計を考えるにあたり参考にした設計思想
こんにちは、てっちゃんです。 みなさんはお花見しましたか？今年は安定した暖かさで例年よりもすごしやすかったなと思いました。 そして、私事ですがこの春から花粉症デビューになりそうというお話をいただきまして、毎日マスクが手放せません。いやー、のどのイガイガがたまらなく嫌ですね。 今回は、cssの設計について調べたことを書いていこうと思います。 弊社でもフロントエンド陣によりある程度のコーディングガイドラインは決まっていますが、 記述の細かい仕様までには及んでいません。コンポーネントの作り方なども人によって差異が出てきます。 複数人で作業とも慣れば尚更その差異は大きくなります。cssは記述自体はとても簡単でそれゆえに、とてももろくすぐに壊れてしまいます。 参考：なんでCSSすぐ死んでしまうん そこで壊れにくcssを設計するためには以下が重要だと言われています。 拡張性 保守性 明瞭性 参考：CS
スタートアップや少人数のチームでは、デザイナー（最終的なデザインの決定権を持つ人）がいないことも少なくないと思う。 また、エンジニアだけで何かサービスを作ることも多いだろう。 僕自身、そのような環境でよく開発をする。 僕はCSSはそこそこ書けるが、デザイナーではないのでサイトのデザインについては他のエンジニアと相談しながら決定している。 IllustratorやPhotoshopもほぼ全く使えないので（紙にざっくりレイアウトを書くことはあるが）、HTMLとCSSを修正しながらデザインを検討することになる。 「CSS書きました。」 「うーん、ここのコンテンツはもっと大きく表示させたい。色ももっと目立つ感じで。」 「なおしました。」 「うーん、やっぱり微妙かも。試しにここ2段組にしてみて。」 「」 なんてことになる。 今更言う必要はないと思うがCSSの設計は非常に脆く、アドホックな修正を繰り返
はじめに みなさまこんにちは！おはようございます！ マークアップエンジニアのうさこでございます！ またお前か・・・という声が聞こえてきそうですね・・・？花粉なんて爆発してしまえばいいと思っている今日この頃でございます。 さて・・・今回はコーディングをする際にきっと頭を抱える方も多いのでは・・・ クラス名の命名規則についてです！！ クラス名の命名・・・地味で単純な作業ですが、悩み始めると止まらず時間のロスに繋がっているのは紛れも無い事実なのです。。 目次 考え方 基本形 Prefix Block Element Modifier 注意点 さいごに 参考URL 考え方 目標はやはりこの4つとなります！ 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい なぜ SMACSS と BEM なのか BEM の Block や Element の考え方は素敵すぎるのですが、クラス名がものすごく冗
OOCSSとかBEMとかSMACSSとか、深く考え過ぎずに、気楽にいいとこ取りして、プロジェクトに合った使い方をしましょうって話。 重要なのはルールを決めること。 命名ルールはBEMで（ただし厳密なBEMルールではなく、BEMっぽく） シングルクラスよりマルチクラスを採用 idセレクタはCSSでは使わない 命名ルールはBEMで BEMの命名ルールを取り入れる事で、CSSをBlock単位で考える事が出来るので、積極的にとりいれる ただ、実際に書いてみるとわかるのだが、厳密なBEMのルールはめんどくさいし見た目が気持ち悪いので、ゆるくしたルールを決める。 Elementは「__」（アンダースコア2つ）、Modifierは「––」（ハイフン2つ）でつなぐ これが命名ルールの基本。 Block、Element、Modifierを2つ以上の単語で表すときはキャメルケースをつかう その方がぱっと見わか
To many Web developers, being good at CSS means you can take a visual mock-up and replicate it perfectly in code. You don’t use tables, and you pride yourself on using as few images as possible. If you’re really good, you use the latest and greatest techniques like media queries, transitions and transforms. While all this is certainly true of good CSS developers, there’s an entirely separate side
はじめに 最近転職をしてフロントエンドエンジニアになりました。 昔からWEBには触れていたものの、独学で細々とブログをやったりWEBページを持っていた程度なので、きちんと学ぶのは初めての初学者です。 WEBの世界はとても広い。広すぎて何を目指して勉強すればいいのかわからない。何を調べたかも忘れそう。なので目印代わりに調べたことをここにまとめておこうと思います。 MarkDownの練習も兼ねて。 YahooでググったりQiitaで聞いたりするきっかけ程度にでもなりますように。 この投稿は初学者がネットの知識や入門書を読んで身に付けた知識なので、間違っているところや不足しているところが多々あると思います。 もし見つけた方がいたら、私と、これから学ぶ方の為にどうぞコメント等でご指摘いただければ幸いです。 言語 HTML/CSS/JSの三種の神器は変わらず。ただし、よりインテリジェントな書き方がで
December 5, 2011 Knyle Style Sheets So I’ve been writing CSS for somewhere around 13 years now. Some might think I’ve learned the right way to write CSS in that time — but if you ask me all I’ve learned is the most efficient way to drive someone insane. CSS is complicated. It’s not object oriented. It’s not hierarchical. It’s a specificity based cascade applied to a dynamic hierarchical data struc
A Unified Styling Language
In the past few years we’ve seen the rise of CSS-in-JS, emerging primarily from within the React community. This, of course, hasn’t been without its controversies. Many people, particularly those already intimately familiar with CSS, have looked on in disbelief. “Why would anyone want to write CSS in JS? Surely this is a terrible idea! If only they’d learn CSS!” If this was your reaction, then rea
CSS in JSの基礎 原点はこちらのスライドがよく挙げられる。 いわゆる「CSSのあらゆる問題をJSで解決する」という感じのもの。 先行の記事としてはこのような感じ CSS in JS(Elm)したら想像以上に良かった Free-Style のススメ ~ CSS Modules は解決策ではない とりあえず今回はReactと一緒に使う前提のことを考える CSS in JS ライブラリの実装系統 CSS in JSライブラリもかなり色々あるが、だいたい下記の観点で分類できそうだった。 スタイルの再現に関する実装 <style>タグを生成して、<head>にinsertする実装パターン 昨今のスタンダードなライブラリの使っている手法 CSSの疑似要素や@media queryもだいたい使える InlineにCSSを展開する実装パターン わりと絶滅危惧種っぽい（開発止まっていたり） そもそも
「Web制作者のためのCSS設計の教科書」を読んでみました
Web制作の仕事について デザイナーがデザインした画面を、マークアップエンジニアがコーディングをしてサイトを公開する。 Web制作という観点から見るとこれで完了かもしれませんが、Webサイトは「いったん完成すればそれで終わり」ではありません。サイト公開後にターゲットユーザーをそのサイトに集客し、サイトオーナーのビジネスを儲けさせるために、運用をしなくてはいけません。運用フェーズに入ると、様々な改修や、新規キャンペーンサイトなどが追加になるかと思います。もちろんサイト公開前にも、「ちょっとココの色変えて」など言われることもあるでしょう。CSSの設計が悪いと、サイト改修を重ねるうちに思わぬところで見た目が崩れて、その修正に余計に工数がかかることになります。皆さん一度はこのような経験をされているのではないでしょうか。 本書は、これらの問題を解決するための思考を学ぶための書籍と言えるでしょう。10
d904b2f9a103c37a25fa#%E8%80%83%E3%81%88%E3%81%A4%E3%81%84%E3%81%9F%E4%BB%95%E5%88%86%E3%81%91%E6%96%B9
はじめに FLOCSSというCSS設計手法で実装をやっていく上で、唯一の悩みどころにcomponentとprojectの判別があります。私のチームでも悩み、チームメンバーがモヤモヤし、あとあとCSSも崩壊しそうだったので、一つの判別基準をつくることにしました。 FLOCSS とは 数あるCSS設計手法のひとつで、OOCSSやSMACSS、BEM、SuitCSSなどのメジャーな設計手法のいいとこどりをした国産の設計手法です。 https://github.com/hiloki/flocss CSSはデザイン通りの見た目を実現するために様々な書き方ができてしまうため、あるルールに則って記述していかないと、一つの変更が予期せぬところのレイアウト崩れを発生させてしまいます。そのルールというのも、かなり練りこんだものでないとあとあと破綻してしまいます。 FLOCSSはそういった要点を抑えたうえで、U
突然ですが、僕はずっとPostCSSを誤解していました… このたび晴れて誤解が解けたので、記念に記事を書きたいと思います。 Sassの代わりではない はい、これです。 この記事で言いたいことは、これがほぼ全てです。 僕は、PostCSSを、コンパイルしてCSSを生成するSassのようなものだと思っていました！ ですが、そもそもSassを使っていたので全くと言っていいほど必要性を感じてませんでした。 PostCSSは自分で必要な機能だけを選べるからカスタマイズ性がある！楽しい！軽い！ とか言われても、Sass遅くないし、むしろ必要な機能を選んで構成するのがめんどくさいと思ってました。というか今も思ってます。 ポストプロセッサーとしてのPostCSS PostCSSというくらいなので、ポストプロセッサーとして、生成されたCSSに対して後処理をすることに使えます。 (導入するプラグインによっては
FLOCSSとは 「Foundation Layout Object CSS」 OOCSSやBEM、SMACSSのいいとこ取りをしたCSS設計思想。 構造 dartsassに移行しましたので構造を修正しました。 scss/ ├─ foundation/ │ ├─ _base.scss │ ├─ ... │ ├─ index.scss ├─ global/ │ ├─ mixin/ │ │ ├─ _hover.scss │ │ ├─ ... │ │ ├─ index.scss │ ├─ variable/ │ │ ├─ _color.scss │ │ ├─ ... │ │ ├─ index.scss │ ├─ index.scss ├─ layout/ │ ├─ _header.scss │ ├─ ... │ ├─ index.scss ├─ object/ │ ├─ component/ │
![[CSS設計] 私のためのFLOCSSまとめ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1fa2b2e8a5566a57011a09bb0835958d7f874037/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCQ1NTJUU4JUE4JUFEJUU4JUE4JTg4JTVEJTIwJUU3JUE3JTgxJUUzJTgxJUFFJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFRkxPQ1NTJUUzJTgxJUJFJUUzJTgxJUE4JUUzJTgyJTgxJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz02ZDM5YjIwMzMyYTA2MmUzN2JlMGFlMzFiODMyYzJjNw%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzdXBlci1tYW5hLWNoYW4mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTFlNDlhODYxNzE0NTQ0ZjcxODg2MDI1NWZlMThlNzVl%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-U09SSUNI%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D44419bc9378d79f85072a2fe09bcb02d)
悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計（Sass対応）Horiguchi Seito
BEM Advent Calendar 2013 の 15日目の記事です。 明日は @kubosho_ さん。 なぜ SMACSS ？ なぜ BEM ？ SMACSS は CSS をより体系立て、構造化させることで開発者の制作とメンテナンスを容易にするテクニックとして、 Jonathan Snook によって提唱されました。 BEM ( MindBEMding ) は CSS のクラス名を明快にし、開発者本人だけでなく、誰が見てもクラス名から意味が読み取られるように、他のクラスとの識別をより容易にするためにロシアの Yandex という会社によって作られました。 SMACSS と BEM 、そして Nicole Sullivan が提唱している OOCSS というものがありますが、これらはどれも CSS に構造を持たせて（プログラムのオブジェクト指向のように）設計しなさいということが書かれ
こんにちは。マツコです。 突然ですが、CSS設計はとても重要なものです。 一定のルールがないと、コーダー各々が違う考え方でスタイルづけをして余計なCSSが増えてしまったり、本人でなければ分からないルールが発生してしまい、メンテナンスがしにくくなってしまいます。 そのため、以下のことを強く意識してCSS設計を行うことが大切だと言われています。 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい 今回は上記の目的を達成するヒントとなる、著名なCSS設計手法である「OOCSS」「BEM」「SMACSS」についてお話したいと思います。 概要 Object Oriented CSS(オブジェクト指向CSS)の略。 オブジェクト指向に基づいて、考案された設計手法です。 Yahoo!のNicole Sulivan氏によって開発され、Twitter（とBootstrap）やGithub、Youtub
![CSS設計における3大メソッド[OOCSS][BEM][SMACSS]](https://cdn-ak-scissors.b.st-hatena.com/image/square/94577520dd0c042b59881ef47d3f516b991bd3b5/height=288;version=1;width=512/https%3A%2F%2Fdxo.co.jp%2Fblog%2Fwp-content%2Fuploads%2F2016%2F03%2Feyecatch.png)
CSSレイアウトが捗るFlexbox、もう使っていますか？ ページ全体のレイアウトのような大掛かりなところよりも、今回紹介するフォームのような小さなところから試してみると便利さを実感できるかもしれません。 HTMLフォーム作成はWeb開発において避けては通れないものですが、その作業が楽しいことはまれなことです。幸いなことに、CSSのFlexboxを使えばこれまで困難だったことでも解決できることがあります。 Flexboxを使用せずに、フォームの一般的なコーディング方法を考えてみます。次のようなフィールドをHTMLでどのようにマークアップしますか？ たいてい次のようにマークアップしますね。 <div> <label for="name">name</label> <input id="name" name="name" type="text" /> </div> <div> <label f
ITCSSまとめ - Qiita
ITCSSは、OOCSSやBEM、SMACSSのようなCSS methodology(方法論)の１つでInverted Triangle CSS(逆三角形CSS)の略称。 提唱したのは、csswizardryのHarry Roberts氏。 ITCSSに関するドキュメントはあまり多くない。 セルビアでITCSSについて紹介している動画がYoutubeにあがってる。そのときのスライドがManaging CSS Projects with ITCSS // Speaker Deck。 ITCSSは、プロジェクトのCSSをより良く管理していくのに、以下のことが必要としていて、 A sane environment that is accessible to lots of people. To tame and manage source order and the cascade. To cr
BEM 101 | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. The following is a collaborative post by guest Joe Richardson, Robin Rendle, and a bunch of the CSS-Tricks staff. Joe wanted to do a post about BEM, which we loved, and just about everybody around here had thoughts and opinions about BEM, so we figured we’d all get together
RailsアプリケーションのカオスなCSSに規約をゆるく導入する 〜要素セレクタ警察〜 - READYFOR Tech Blog
はじめに こんにちは！READYFORでフロントエンドエンジニアをしております、江面（ @neripark ）と申します。 最近は主に Next.js （TypeScript）を用いたSPA開発に従事しております。CSS設計、コンポーネント設計、Netlify などが好きです！ 本日はタイトルにもある通り、既存のRailsアプリケーションにCSSコーディング規約を導入したお話をしようと思います！ 既存のプロダクトのCSSで苦労している方の参考になれば幸いです。 これまでのREADYFORのCSS READYFOR は2011年にスタートした、日本初のクラウドファンディングサービスです。 その中身は Ruby on Rails で組まれた標準的なモノリシックWebアプリケーションで、サービスの成長とともに、機能開発も重ねられていきました。 その流れの中で、いろいろなエンジニアがいろいろな文脈
日々のWebサイトやアプリの制作を通じて、役に立ちそうな技術情報や楽しい話を発信しています。私たちはGMOメディア株式会社のクリエイターです。 初登場、大西です。コエテコというプログラミング教育のサービスでフロントエンドデザイナーをしています。 デザイン周り全般を担当しています。また、サービスデザイン部にも所属しています。 今回、2018年下半期にサービスデザイン部のグループミッションの一貫として、私を含む4名で改善・品質担保チームになり、以下のミッションを行うことになりました。（グループミッションについては、社内横断のデザイン活動を始めるまででまとめられています。） ミッション デザイン制作をスピードアップさせ、全体的な作業の効率化を実現する。 あるあるな手戻り・イライラする作業・一貫性のないデザイン等に対し業務プロセスの見直しやフレームワークの導入等によって改善を行う 「コーディング手
Enduring CSSの設計思想 第1回 ECSSが目指す設計 CSS設計方法、Enduring CSS（ECSS）は、複雑さを排除し、ある程度のCSS容量増加を覚悟することで、CSSの寿命を伸ばすというアプローチを取っています。今回は、その基本となっている考え方から解説します。 はじめに CodeGridでは過去に、OOCSS、SMACSS、BEMの3つのCSS設計概念を紹介しました。 知っておきたいHTMLテンプレート設計法 この連載で紹介するEnduring CSS（以降、ECSS）は、これら3つと同じように、CSSの設計方法を示したものです。エンジニアのBen Frain氏が電子書籍として著し、現在はWebサイト上でもすべてのコンテンツが読めるようになっています。 ECSS: Home Page 先に挙げた3つのCSS設計概念と比較すると、本記事執筆時の2016年5月現在、ECS
フロントエンジニアの茨木です。 皆様はCSSを書く際にコーディング規約を意識しているでしょうか。かつて、弊社にはCSSのコーディング規約が存在せず、CSSファイルの肥大化・クラス命名規則の不統一が発生していました。メンテナンスが難しくなってきた為、1年半ほど前にCSSコーディング規約を設けました。若干のルール追加を伴いながら、現在まで問題なく運用できています。本記事ではフロントエンドで運用しているCSSのコーディング規約に関して紹介します。 導入環境 本記事では以下の環境を前提にしています。 Ruby on Rails 5.0 Sass 3.4 Slim 3.0 CSSコーディング規約のコンセプト 初めにチームでヒアリングを行い、以下のようなコンセプトを決定しました。 読みやすい、書きやすいクラス名やタグ構造にする スタイルを再利用できる セレクタによるスタイルの競合を少なくする 既存の設
フロントで迷ったら読む自分用！javascript,css,htmlの命名規則やコメントの書き方・ルール・規約・ガイドラインについてとかとか - tweeeetyのぶろぐ的めも
はじめに サーバサイドの人間ですが、だからこそ大事にしたいフロント側のルール。 フロント側を一切を触らないのなら構いませんが触ることも多分にあるでしょう。 フロント大好きなのでそっちメインで触りたい時もあるでしょう。 ってことで、そんな自分がフロントのお作法として守っておきたいというときに参考にする自分用メモです こんなかんじ ってことでjavascript,css,htmlについて それぞれ自分が見返せるように参考サイトとティップスをメモ javascript 命名規則 コメント まとめ系 CSS 命名規則 id,class名のサンプル コメント まとめ系 HTML 文書構造 コーディング規約とかルールとか全般 ※HTMLは命名規則て感じではないですね 注釈 お作法といっても命名規則、コメントなどを主としてまとめました（htmlは文書構造) 部分的でも命名規則について参考になれば参考とさ
CSS方法論を使って保全性を高める CSSプリプロセッサ、CSSポストプロセッサのようなツールは、CSS開発のエクスペリエンス向上に向かって長い道のりを歩んでいます。しかし、これらのツールだけでは巨大なCSSコードベースの保守に伴う問題を解決するには足りません。対応策として、人々はCSSの記述方法に関する様々なガイドラインドキュメントを作成し始めました。一般にCSS方法論と呼ばれるものです。 特定のCSS方法論を詳しく知る前に、CSSの長期にわたる保守が困難な理由を理解することが重要です。問題の鍵はCSSが持つグローバル性、定義したスタイルは全てページのあらゆる部位にグローバルに適用される、という性質です。固有のクラス名を維持するために細かい命名規則を用意する、または 詳細度の規則 に抗い、あらゆる要素にどのスタイルを適用するかを決めるのがあなたの仕事になります。CSS方法論は、そのような
この記事は、現在僕が携わっているひだまりプロジェクト (仮称) で使用している CSS 設計ルールについてまとめたものです。 ベースとなる CSS 設計 BEM (MindBEMding) BEM 自体についての説明は省略します。 一部 SMACSS を参考にした独自ルールを取り入れています。詳しくは後述します。 (1) Element をネストしない BEM を使用する際の大原則として block__element という対応関係を厳守します。 NG category__item__name は block__element1__element2 と Element がネストしています。 <head> <style> .category-list {} .category-list__item {} .category-list__item__name {} </style> </hea
BEM失敗談 その1 - canblr
BEM失敗談 その1 この記事はCSS Architecture Advent Calendar 2014 3日目の記事です。 1年ぐらい関わっていたプロジェクトで設計したCSSをざっくり振り返りつつ、そこで経験した失敗談を残しておこうと思います。 タイトルにはBEMって入ってますが、いきなりBEMがあんまり出てこない話になってしまいました。 構成編 このプロジェクトでは、コアを中心とした複数のアプリ展開を行う前提で、CSSの設計も行いました。 Sass + Compassで、最初はCompassのSprite Helperを使っていましたが、途中からspritesmithに乗り換えています。 SMACSSやMCSSなどを参考にしつつ、主に以下の3つの構成としています。 Module Component Theme Module Moduleはパーツの最小単位として、Placehold
BEM失敗談 その2 - canblr
BEM失敗談 その2 この記事はCSS Architecture Advent Calendar 2014 4日目の記事です。 1年ぐらい関わっていたプロジェクトで設計したCSSをざっくり振り返りつつ、そこで経験した失敗談を残しておこうと思います。 昨日の続きになりますが、ようやくタイトル通りBEMの話です。 BEM失敗談 その1 命名規則編 今回のプロジェクトで採用したのはいわゆるMindBEMdingで、あまり厳格にしすぎずゆるくやっていく方針でした。 冗長すぎる BEMを導入した際、ひとつのBlockに対してElementやModifierをどのようにつけていくのか、というのは特に決めていませんでした。 Moduleの中では1Blockに紐づくElementは大体1階層か2階層で、 3階層目ぐらいまで繋げる必要が出てきたら別のModuleにして…という目安で命名しています。 最初
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RSCSS というCSS設計について - Qiita
3000人に聞いた、2019年最先端のフロントエンド開発者が使ってるツールはこれだ - Qiita
How to structure a Sass project – TheSassWay.com
CSSのルールについて考える！ ー OOCSS、BEM、SMACSSって何？ | panmimi design
各CSS設計手法を取り入れる上でのメリット・デメリットをまとめてみた - Qiita
SMACSS - Scalable and Modular Architecture for CSS (日本語)
デザイナーのいないチームでのCSSの書き方 - morishitter blog
SMACSSにBEMを取り入れたクラス名の命名規則 | SONICMOOV LAB
いまどきのCSS – OOCSSとかBEMとかSMACSSとか | 5 LOG
CSS Architecture — Philip Walton
WEBフロントエンドエンジニア初学者の勉強リスト - Qiita
Knyle Style Sheets · by Kyle Neath
Reactと一緒に使う時のCSS in JSのライブラリ選定とか所感とか - Qiita
SassとPostCSSを組み合わせて作るCSS開発環境 ｜ Tips Note by TAM
[CSS設計] 私のためのFLOCSSまとめ - Qiita
CSS Design and Programming
SMACSS に BEM を取り入れよう - CHROMA
CSS設計における3大メソッド[OOCSS][BEM][SMACSS]
まだfloat使ってるの？ フォームのレイアウトはFlexboxで超簡単に実装できる
デザイナーがフロントエンド勉強会をやってみた2018 | GMO MEDIA CREATOR BLOG
Enduring CSSの設計思想 | 第1回 ECSSが目指す設計
CSSコーディング規約を導入して1年半運用した話 - ZOZO TECH BLOG
恐竜に教える現代のCSS – Part 3 | POSTD
現在のプロジェクトで使用している CSS 設計ルール (BEM ベース) のまとめ - Qiita