年々CSSに関するツールや設計方法（方法論）は増えています。便利になったと言えばそうなのですが、その反面これから新しい方法論を導入しようという方にとってはどこから手をつけていいのか困惑することもあるかもしれませんね。 そこで本稿ではケースごとに「どのCSS方法論が適しているのか」を考えていきます。自身のフロントエンド開発環境に近いものを参考にしてみてください。 ケースで考えるCSSの各方法論 ■ケース1 「シングルページやシンプルなウェブサイトを作りたいです。コンテンツはテキストだけで、1つか2つのフォームがあるようなものです。共同作業者はいなくて、開発者は私（と飼い猫）だけです」 とにかくシンプルにし、クラスを使わずに直接HTML要素を配置しましょう。カスケードを利用し、スタイルを継承させます。サイトが大きくなった場合、OOCSSやユーティリティクラスの使用を考えるのもいいでしょう。 ■
予告：Material Design Liteかっこいい(フロントエンドエンジニア的に)からみんな使え的な記事書きます。 — Toro_Unit（山の上のとろゆに） (@Toro_Unit) August 6, 2015 予告通り書きます。 Facebookのタイムラインで「CSSフレームワークをそのまま使うって発想から抜けないと良くないよ」みたいな話がありまして。 根本的には僕も全力で同意するのですが、それでもBootstrapとかFoundationを案件で使う気が全くしないわけですよ。両方とも何回か扱いましたけどあんまり良い思い出は無いです。フォームとかボタンなどプロパティレベルでは良く参考にしてはいますが。 使いこなしてる人凄いと思います。habakiriつくったキタジマさんとかLightningの石川さんとか。WordCamp KansaiのときにBootstrapとの付き合い方
この記事では個人的に大事だと思う部分を自分の解釈と共に紹介していくような感じとなります。 FLOCSSの書き方 FLOCSSは大きくは「Foundation」「Layout」「Object」の3つ。そして。「Object」の中の「Component」「Project」「Utility」から成り立っています。この5つの構成を正しく守り順番に読み込むことで破綻しにくいCSSとなるわけです。 それぞれに記載する内容をざっくり分けると以下のような感じです。 Foundation ・・・ 要素の初期化やmixinなどのベースを設定。リセットCSSなど。 Layout ・・・ ヘッダーやフッターなど大枠のレイアウトに関する定義。装飾はなく枠だけを用意しているイメージ。 Component ・・・ 再利用ができる最小限のパーツ。どの案件でも使える単位でのパーツです。 Project ・・・ サイト固有の
CSS設計方法論の1つである「BEM」について、徹底的に解説します！ （今回は全2回ある内の1回目の授業です） ◆「BEMとかCSS設計なんて知ってるよ！」という方もぜひ BEMは数あるアプローチの中でも、何かと誤解が多かったり使いどころが難しい方法論です。 ・SMACSSなど、他のルールと併用しようとしてカオスなことになってませんか…？ ・命名ルール（Block__Element_modifier(key_value)）を正確に理解していますか…？ ・実際の開発でBEMを使うメリット、デメリットについて把握していますか…？ 今回の授業ではこうした疑問を解消してまいります！ ◆「BEM？なにそれ美味しいの？」という方もぜひ BEMの知識を身につけておくことで「長期にわたって破綻しないHTML,CSS」を書くことができます！ このスキルを使ってコーディングすることで… ・CSSを一箇所ちょっ
An evolving guide to CSS architecture for sites small and large. I've long lost count of how many web sites I've built. You'd think after having built a few hundred of them I'd have discovered the "one true way" of doing it. I don't think there is one true way. What I have discovered are techniques that can keep CSS more organized and more structured, leading to code that is easier to build and ea
I’m going to make a bold statement — static sites are cool. Jekyll has been one of the libraries at the core of this movement, which has given rise to static site generators made in nearly every language you can think of. Static websites have the benefit of simplicity; they don’t need complex server-side technologies to host, they just need something that can serve HTML. The purpose of any static
ひとまず書き殴った。 プロジェクトでスタイルシートの「一貫性を保つ」ためのドキュメント。 このルールを守っていくのは難しい（しんどい）場合はドキュメント内容を見直そう。 このドキュメントでは以下の内容を含んでる。 エンコードなどのメタルール インデントなどの書式ルール ネストの上限などのコーディングルール メタルール エンコード UTF-8 を使用する: @charset "UTF-8"; コメント 普通のコメントは普通に、 /* */ 形式で書く。 TODO コメントは以下のように書く: .module { backround-image: url(//lorempixel.com/200/200/); /* TODO: change dummy image */ } Sass 使ってる場合、スタイルガイド用のコメントはコンパイル後消されるように // を使って書く: // ## Mod
The React JS or React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. It has grown as one of the best libraries in recent years for component-based GUI development. Although, there are other front-end frameworks like Angular and Vue.js available, what sets React apar
[セミナー] Frontrendというセミナーに参加してきました（フロント開発のフレームワークやツール編） - YoheiM .NET
こんにちは、@yoheiMuneです。 今回は、Frontrendというセミナーで学んできた「フロント開発のフレームワークとかツールとか」について、 いいなぁと思ったところを、紹介させて頂きたいと思います(・∀・) はじめに このページは、セミナーの内容とそれに関する感想を記載したページです。 私自身、今後何回も読み返して、記載したたくさんの情報を閲覧したいと考えています。 そのため、各情報にはチェックボックスを配置しており、そのチェック状況はローカルストレージに保存し、 ページ再訪問時に、前回のチェックボックスの状態を表示するようにしています。 本機能が、私以外の誰かにも役立てば幸いです。 モバイルウェブ開発ベストプラクティス 斎藤 祐也さんという方が発表されていて、スゴく情報量の多い発表で、たくさん学ぶ事がありました(*´∇｀*) 「知って良かった」「更に詳しく学んでみたい」と感じたポ
![[セミナー] Frontrendというセミナーに参加してきました（フロント開発のフレームワークやツール編） - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d14ec039838bd72db390fd8b0bc26e734b6df46/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F128.jpg)
The React Handbook follows the 80/20 rule: learn in 20% of the time the 80% of a topic. I find this approach gives a well-rounded overview. This book does not try to cover everything under the sun related to React, but it should give you the basic building blocks to get out there and become a great React developer. If you think some specific topic should be included, tell me. You can reach me on T
The Road To Reusable HTML Components — Smashing Magazine
In a previous post, Niels Matthijs sampled a couple of common content types (such as products, stories and videos) across different websites. In this article, he sticks to four different views of a single content type: the story (or news article). A few weeks ago, I dug up an old article that I wrote for Smashing Magazine, “When One Word Is More Meaningful Than a Thousand.” While I stand firmly be
CSSの面倒くさいところ CSSは簡単に書けることが良さでもありますが、ある時は試行錯誤を繰り返すうちに、またある時は運用を続けるうちに、記述がもりもりと肥大化してしまいがちです。 （CSSのスパゲッティコード…とはあまり言わないけどそんな感じ）これはCSSの面倒くさいところですよねー。 特に近年Bootstrapなど重量級CSSフレームワークを使用する機会も増えてきていますので、表示を高速化させるために、あるいは保守性を高めていくために可能な限りシンプルに記述していきたい。 …そんなこともありCSSをあの手この手でわちゃわちゃするわけですが、 未使用CSSを見つけ出してリムーブ プロパティ指定の重複を見つけ出して整理 OOCSSやSMACSSやBEMといったCSS設計を採用する SASSなどCSSプリプロセッサ(CSSメタ言語)を使用する .minファイル化やgzipで圧縮する CDN配
If you are like me then you spend way too much time coming up with the perfect class name for an element. You might Google for synonyms or imagine what this element would be if it were a real life object. You know that any semantic name will work, but somehow trying to think up the perfect name seems worth it. To be honest, the perfect name won’t help your stylesheet all that much, but utilizing a
業務委託でSCOUTERのフロントエンド周りの開発をお手伝いしている、 花谷拓磨(id:potato4d) です。 SCOUTER は、先日自社のコーポレートサイトを Nuxt.js + WP REST API 構成にてリニューアルいたしました。 普段であれば SPA や SSR が必要な高度なアプリケーションなど、主にWebアプリケーション開発の文脈で語られる事が多い Nuxt.js ですが、何故Webサイトであえて Nuxt.js を採用したのか、そしてそのメリットから、実際に利用しての課題点まで、制作を担当した私自ら知見を存分にご紹介したいと思います。 新しいコーポレートサイトのご紹介 まずは何はともあれ成果物から。 今回のコーポレートサイトでは、 Vue がアニメーションと親和性が高いこともあり、ブランディングサイトとして十分な価値を示せるようにリッチに仕上げました。Webサイトと
いまちょうどチームでそれなりの大きさのHTMLを書いているので、SMACSSを参考にコーディング規約を作ったりしています。せっかくなので何かの参考にと思い公開してみました。 HTMLコーディング HTML5 HTMLのコーディングはHTML5のDOCTYPE準拠のタグを利用します。
I find it interesting when two (or more) people can say something but the way that something is interpreted can be quite different. Nearly four years ago, Harry Roberts wrote about applying the single responsibility principle to CSS. Within the article, Harry explains how defining too many properties on a class selector may make it difficult to re-use that class in other contexts, thereby requirin
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. CSS is notoriously difficult to manage
モダンなWeb制作をされている方であれば、すでに利用しているかもしれません。 Sass（SCSS）は、うまく使えば、それなりに便利ですが、それほどすごいということは、ありません。 使い方によっては、素のCSSよりも分かりにくくなります。 ネガティブな内容かもしれませんが、ざっとSass（SCSS）をまとめてみます。 Sass（SCSS）とは Sassとは、Syntactically Awesome Style Sheetsの略です。 CSSを便利に書くために作られた言語で、似たものでは、LessやStylusというものがあります。 実際にブラウザで認識させるには、CSSに変換する必要があります。 Sass: Syntactically Awesome Style Sheets 二つの書き方 Sassには、二つの書き方があります。 インデントでネストを管理し、｛｝や；が必要がない書き方。 拡
Our large team of engineers use this front end development guide
By Yangshun Tay Front end development has never been so complex and exciting as it is today. New tools, libraries, frameworks, and plugins emerge every other day. There is so much to learn. Fortunately our web team at Grab has been keeping up with the latest best practices, and has incorporated the modern JavaScript ecosystem in our web apps. The result of this is that our new hires or back end en
(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/css-architecture-2. We hope to fix this soon!). Last week, I shared how I use BEM to create a sensible CSS architecture. Although BEM is awesome, it's only part of the solution. There's another part I've yet to mention — names
最初に HTML5 CONFERENCE 2013 に行ってきて、"モダンなCSS設計パターンを考える" という 谷 拓樹 さんのセッションを聴いてきたのでそのメモを残しておこう。 当日のセッションは ここ（ ルーム1A - HTML5 カンファレンス 2013 - YouTube ） で観れます。 当日使われたスライドは モダンなCSS設計パターンを考える に公開されています。 モダンなCSS設計パターンを考える Goals of Better CSS Architecture 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい 以上のこと実現するために Modular CSS を使う OOCSS - Nicole Sullivan レゴのようにモジュールを分離する。 OOCSS を組む時はレゴを作った時のことを思い出すんだ！ Rule of Three 二つでは規則性が見えない。
free nudes, naked, photos,
Using CSS to Enforce Accessibility I am a big proponent of the First Rule of ARIA (don’t use ARIA). But ARIA brings a lot to the table that HTML does not, such as complex widgets and state information that HTML does not have natively. A lot of that information can be hidden to the average developer unless they are checking the accessibility inspectors across browsers or testing with a suite of scr
Webサイト制作のガイドラインを全国で共有しませんか？ ヒカルデザインのヒカルです。 今回、Webサイト制作ガイドラインの全国共有化への働きかけを決意表明したいと思います。 僕ひとりでも最後までやりきりたいと思いますが、みなさんの知見やアドバイス、そして同じ思いを持つ有志の方に読んで頂ければ幸いです。 １．共有ガイドラインのメリットWebサイト制作のガイドラインを全国で共有した場合、みなさんが享受できるメリットを挙げます。 ・学習コストが下がる ・断片的な情報を探す手間が省ける ・外部発注のハードルが下がる ・成果物の品質が一定になる ・無駄な作業時間が減る ・クリエイティブに集中できる ガイドラインを共有する一番のメリットは、無駄な作業時間を減らしてクリエイティブに集中できることだと思います。 PHPのフレームワークと同じ思想で、同一の設計で構わないものはプラグイン化して、必要なことへリ
選定作業には責任がつきまとう。 おはようございます おやすみなさい 皆さま、初めまして。今回のプロジェクト開発者の一人コースケと申します。 本日は連載中の尾形（以降リーダーと呼びます）に代わり特別編といたしましてイチ開発者である僕からフロントエンド挑戦における失敗談を皆さまにお伝えさせてください。 不安の中始まったフロントエンドの挑戦 今回のプロダクトで僕が任されたのは、フロントエンド周り全般。 特に、デザイン周りでは自分一人で結構な量の調査や選定、実践を行ないました。 HTML/HTML5の調査 CSS/CSS3の調査 Sassの調査 CSSデザイン/設計の参考書の選定 設計方針の選定 参考となる規約の選定 プロトタイプの作成 などなど。 フロントエンドの調査に僕一人で突っ込まれて孤立しながら、右も左もわからぬまま「初心者」と「入門」を＆検索にググり続けました。。 ※画像はイメージです。
対象者 ・CSS設計はむずかしいので「シンプルに」かつ「メンテナンス・拡張可能」なCSS設計をしたい！方 ・エンジニアらしく構造的なCSS設計をしたい！方 ・個人で最初はモックアップ程度に開発して ゆくゆくはチームで開発してもっと大きくしていきたい！方 この記事を読んでできること ・AtomicDesignとは何か理解できる ・AtomicDesignを取り入れたCSS設計 APB CSSについて理解ができる この記事の概略 ■AtomicDesignとは、デザイン設計方法の１つ ・ボタンやラベルなどWebページを構成する要素を５つのステージで構成・管理する Atoms(アトム) - 原子：それ以上分解できない要素（ボタン） Molecules(モルキュール) - 分子：原子同士を組み合わせた要素（フォームとボタンがついたもの） Organisms(オルガニズム) - 有機体：分子同士を組
CSS Architecture Advent Calendar 2014 の12日目。 SMACSS や BEM など、去年のように新しい CSS の設計手法は今年学ぶ機会が作れなかった。その代わり、いくつかのサイトを作る中で気づいたことや、自分なりに気にかけたことがあるのでそれを書いておこう。 コードを載せたら少し長くなってしまったので、ページ内リンクを貼っておく。 要素本体と変化しやすいスタイルを分ける 表現したい内容を正確に表す ショートハンドは少なめに CSS を書く以上はプロパティや値の扱いを軽視することはできない。もしかしたら設計の話からは逸れているかもしれないが、2つ目と 3つ目ではプロパティや値に注意して書くことで予期した結果が得られるというようなことを書いた。 要素本体と変化しやすいスタイルを分ける 基準となるものは除いて、配置場所によって内容が変化しやすいスタイルは主
JSer.info #618 - Parcel 2.8.0がリリースされました。 Parcel v2.8.0 Release v2.8.0 · parcel-bundler/parcel Parcel 2.8.0では、ViteとTurbopackのベンチマーク比較から着想を得たパフォーマンス改善が含まれています。 Is Turbopack really 10x Faster than Vite? · Discussion #8 · yyx990803/vite-vs-next-turbo-hmr 大規模なアプリケーションでのビルド時間とバンドルサイズの削減、HMRのincremental buildのパフォーマンス改善、Tree Shakingの改善によるバンドルサイズの削減などが含まれています。 Deno 1.28がリリースされました。 Deno 1.28: Featuring 1.3
最終的なアウトプットではなくてその前段階のプロトタイプをコード書きながら作っていくというのが以前からの課題なのですが、どうやっていこうかなぁと考えながら、こもりさんのスライド1を見ていたら、スライドに出てきたSMACSSって何だっけと思って、日本語版2があったので買って読んでみました。@cssradarこと斉藤祐也さんの翻訳で、それだけでポチってしまいました。（そもそも斉藤のブログ3がスタート地点な気がするし。） SMACSS（スマックス）は、Yahoo!のウェブデベロッパ/デザイナのJonathan Snookさんのスタイルガイドで、拡張性のあるプロジェクトでも対応できる、特定のHTML構造に依存せずに、メンテナンスしやすいCSSの書き方をまとめたものです。CSSプリプロセッサで書く場合もOOCSSやSMACSS4の書き方が基本のようで、本書の中でも紹介してありましたが、深い入れ子はたし
2013年6月30日 著 Scalable and Modular Architecture for CSS（SMACSS）が、いつの間にか日本語に翻訳のうえ電子書籍として販売されていました（15ドル）。本書の全文一部（※全文が公開されているものと勘違いしていました、ご指摘ありがとうございました）は「英語でなら」Webサイト上で公開されているもので、いつだったか忘れたけれど、ざっと斜め読みした記憶があります。実際、SMACSSの考え方はしばらく前から自分のスタイルシート設計に取り入れてもいます（全部が全部、ではないけれど）。まぁしかし日本語で読めるならそのほうが何かと有り難いし、ということで復習がてら購入して読んでみました。 確かに、日本語で読めるのは有り難かったのですが、しかしやや直訳調で日本語としてこなれておらず、読みにくかったというのが正直な感想。とりわけ、「Depth of App
I'm using SMACSS (Scalable and Module Architecture for CSS): http://smacss.com/ Specifically, I'm using Yahoo's Pure CSS (SMACSS) framework (just the Grids stylesheet): http://purecss.io/grids/ Is it correct to place a grid inside of a module? For example, here is a grid inside of a 'foo' module. The foo module should show a row of three items. <div class="foo"> <div class="pure-g"> <div class="pu
Component Independence
This is an excerpt from a rewrite of Scalable and Modular Architecture for CSS (SMACSS) that I’ve been working on. There are a number of reasons why creating independent modules with CSS can be difficult. style inheritancethe cascadethe browser’s differing behaviour between HTML elementsthe required interaction between modulesStyle InheritanceSome CSS properties are inherited. While this can affec
Web制作をたしなむひとのブログです色々と発表する機会があったので、自動生成型のスタイルガイドのまとめです。 ここでいうスタイルガイドというのは、SMACSS(Scalable and Modular Architecture for CSS)に代表されるようなコーディング・パターンガイド的な側面のものよりは、特定のサイト(またはアプリなど)に定義されている(または定義する予定の)スタイルの一覧やコーディング規約を閲覧できるようにドキュメント化したもののことを指しています。 このスタイルガイドという物自体は今にはじまったことではなく、(いやゆる受託でのWeb制作の仕事であれば)納品物と一緒に同梱するというようなことも多くありました。 サイトの更新者への引き継ぎ、チーム開発の場で共有することでクオリティを担保するという意味で、多人数で仕事をする場合にはあるととても便利なものです。 ただし以前
JSer.info #308 - Ember.js v2.10.0がリリースされました。 Ember.js - Ember 2.10 and 2.11 Beta Released Ember.js v2.10では、7月にα版が出ていたGlimmer 2が正規式に統合されています。これにより、パフォーマンスやファイルサイズが改善されています。 drop-in, completely backwards compatible upgrade for virtually all Ember.js users 特徴として、既存のものと後方互換性があるため、そのままアップグレードできるようになっています。 合わせて次の記事も見てみるといいかもしれません。 5 Things to Know About Ember 2.10 and Glimmer 2 :: madhatted.com The Stat
(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/responsive-grid-system. We hope to fix this soon!). One of the best complement for a custom web design is a custom-made responsive grid system. You can customize everything you need, including the number of columns, the size o
Are you writing legacy CSS code?
Anyone that has worked with CSS for long enough recognizes the pain of working with a large legacy code base. How can we make sure that our next CSS refactor sticks? How can we avoid creating legacy code ourselves? I’ve created many terrible CSS code bases. As long-lived projects progressed, it became harder and harder to keep the code well organized. Decisions I made in the past came back to bite
昨日から自分が所属している会社のユニットメンバー5人日替わりで個人ブログを更新していこうという取り組みをしていくことになりました。 第一回の記事です。 ブログ続かないからちょっと始めてみた#はてなブログ ブログローテーションはじめてみた - ちゃなんログhttps://t.co/B89QaZacnd— nan.nan.nanan (@chanan_nan) 2018年7月24日 ブログをローテーションで書いていくことの良さが記載してあります。 チームで行う取り組みなので個々人に責任感が生まれ強制力が働き良い取り組みだと思います。 というわけで今回は自分の番ということなので書いていきます！ タイトルにもあるようにstyled-componentについて説明をしていきます。 と、その前にcssのことについて軽く触れておきます。 cssの問題点 グローバルスコープ 誰でも簡単に書けてしまう自由さ
最近のReactによる開発は、CSS ModulesとCSS in JSのどちらかを選択する。 実際、どっちの方が使いやすいの？ってあたりを少し考察する。 CSS Modulesの書き方（comoposeなど）やCSS in JSの書き方には触れない。 CSS Modules と CSS in JS の共通項 そもそも、なぜCSS ModulesやCSS in JSを使うのかってあたりから話す。 グローバルなCSS CSSは基本的にグローバルスコープである。 そうなると、クラス名が被ってしまった際に先に書かれた方が上書きされてしまう。 もし、小規模なアプリケーションであれば、こういった問題を考慮する必要はない。 しかし、大規模なアプリケーションになってくるとそうは言っていられない。 数万行のCSS、数人〜数十人のチーム、様々な書き方。それらを全て効率よく管理することは難しい。 CSS設計
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BEM、SMACCS、CSS Modules…のどれを用いるのがいいの？ケースで考える最適なCSSの方法論
Material Design Liteがクールだからみんな使えば良いと思います。 - Toro_Unit
FLOCSSを使って破綻しにくいCSS設計を！ | HPcode（えいちぴーこーど）
【CSS設計】BEMを使った破綻しにくいHTML, CSSの書き方 -前編-｜オンライン動画授業・講座のSchoo（スクー）
Scalable and Modular Architecture for CSS
Building static websites with Middleman
CSS Coding Guide - CHROMA
ReactJS Roadmap 🗺 For Developers 💻
The React Handbook – Learn React for Beginners
CSSCSSでCSSスタイルの重複を整理する - Qiita
Title CSS: A Simple Approach to CSS Class Naming
Web サイト制作にこそ Nuxt.js がベストマッチである理由 - ROXX開発者ブログ
SMACSSを参考にしたCSSコーディング規約 - Qiita
Are you Single?
A Look at Some CSS Methodologies
Organize CSS with a Modular Architecture: OOCSS, BEM, SMACSS - Snipcart
それほど便利ではないSass（SCSS）について語る | ツクメモ - ウェブやアプリをツクるヒトのメモ
Writing modular CSS (Part 2) — Namespaces | Zell Liew
"モダンなCSS設計パターンを考える" セッションのメモ - CHROMA
❤️ Best adult photos at 03log.me
Using CSS to Enforce Accessibility
Webサイト制作ガイドライン共有化構想［#00］｜カトウヒカル
CSS設計の選定に学ぶ仕事術 - Developer’s Blog
個人でのWeb開発にもオススメなAtomicDesignとAPB CSSの紹介 - Qiita
スタイルは適度に小さく正確に - CHROMA
2022-11-17のJS: Parcel v2.8.0、Deno 1.28(`npm:`の対応)、Gatsby 5、Nuxt 3
SMACSSを日本語版を読んでみました ノート dotgraphy
Scalable and Modular Architecture for CSS
5LOG
SMACSS: Is it correct to use a grid inside a module?
september creator | I was born on September
2016-12-06のJS: Ember.js 2.10、Front-End Tooling 2016アンケート、Svelte
How to build a responsive grid system | Zell Liew
Reactのプロジェクトならstyled-components使うのがいいかも - よちよち開発の日々
ReactにおけるCSS ModulesとCSS in JSの話 | ぎじゅつばこ