色々書き比べた結果Tailwind CSSにしたという話 - Qiita
Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない
React Component 分業の覚書
フロントエンドを Next.js 化する機会が多くなってきた昨今。いざ取り組むにしても、スタイリング込みで実装出来るエンジニアが不足気味ではないでしょうか？また、縦割り分業している現場ではこれまで、マークアップ（フロントエンド）エンジニアが html + css を納品し、それを元にサーバーサイドエンジニアがテンプレートエンジンに組み込むという業務フローも少なくありませんでした。 この様な業務フローの場合、同じリポジトリで作業してもらうという事が難しいこともあります。Next.js 移行期のこれからも同様のことが多々起きると予想しており、完全分業するうえでの最適化を考える必要があります。この件について少しまとめたくなったので、メモ書きとして残します。 前提条件 以下の座組みは React Component 分業で最適だと考えている組み合わせです。マークアップエンジニアはこれまでと変わらず
短いクラス名で運用できる CSS設計 rscss を CSS Modules 向けにアレンジしてみた
はじめに この記事は #EveOneZenn (Everyday One Zenn) vol.09 です。 CSS設計のひとつである rscss を CSS Modules (React向け)にアレンジしてみたので紹介します。 紹介する規約を使った場合、下記のようなクラス名で CSS Modules を運用できます。 import React from 'react'; import cn from 'classnames'; import styles from 'styles.module.scss'; const Component = (props) => ( <button className={cn( styles.searchButton, { [styles.Disabled]: props.disabled } )} > <span className={styles.i
堅牢で保守的な最低限度の CSS 設計 - Qiita
CSS 設計でいう保守性とは、新しいルールの追加・更新のしやすさ をあらわす。保守性を高めるためには、変更の局所化、他のルールへの副作用を最小にするアーキテクチャ を採用します。 設計思想は FLOCSS ベースの ECSS + rscss + Tailwind CSS のいいとこ取り 命名規則は MindBEMding （以降、BEM） 開発言語は Sass + PostCSS コンポーネント粒度 FLOCSS ではプロジェクトにおいて繰り返されるビジュアルパターンをすべて Object として定義します。Object には、Component と Project のレイヤーがあり、この 2 つの判別において Atomic Design のコンポーネント粒度の考えを拝借します。具体的には、 Component：Atoms Project：Molecules に分類します。 単語間の区切り
ブラウザ君「ワイはCSSのセレクタを右から読むんや」 - Qiita
ワイ「↑こんな風にセレクタを書いてやるんや」 ワイ「そしたらブラウザ君は」 ブラウザ君「このページの中で、header要素は・・・お、この1つだけやな」 ブラウザ君「ほんで、その中のdiv要素は・・・この1つだけやな」 ブラウザ君「ほんで、更にその中のa要素は・・・この1個だけやな！」 ブラウザ君「特定しやすいようにセレクタを書いてくれたから、すぐ見つかったわ〜」 ブラウザ君「ありがとう、やめ太郎はん」 ワイ「ってなるわけや」 ワイ「ワイはいっつもブラウザ君のことを1番に考えてるで」 ワイ「あ、娘ちゃんの次やから2番やな」 よめ太郎「（嫁はブラウザ以下かい・・・）」 娘「パパ、やっさしい〜」 ブラウザ君「全然ちゃうで」 よめ太郎「ファッ！？」 よめ太郎「ブラウザが喋った！？」 ワイ「何を驚いとんねん」 ワイ「インコやオウムかて日本語を喋んねんから」 ワイ「ブラウザ君が喋ったって不思議やない
開発体制に合わせたCSS設計 | 吉川ウェブ
Predictable 予測しやすい Reusable 再利用しやすい Maintainable 保守しやすい Scalable 拡張しやすい 参考：https://philipwalton.com/articles/css-architecture/ CSS設計の必要性 コスト削減 実装者の単価を減らせる 実装工数を減らせる 既存のコンポーネントを使うことで工数を減らせる デグレが起きる確率が減り改修工数を減らせる 部分的な改修を行うことで並行して実装ができる 観測した限りのCSS設計 OOCSS オブジェクト指向 Bootstrap BEM（MindBEMding） シングルクラスにする命名規則 SMACSS OOCSSやBEMなどから影響を受けている Base、Layout、Module、State、Themeのカテゴリーから構成される MCSS（Multilayer CSS） OO
デザイナーがフロントエンド勉強会をやってみた2018 | GMO MEDIA CREATOR BLOG
日々のWebサイトやアプリの制作を通じて、役に立ちそうな技術情報や楽しい話を発信しています。私たちはGMOメディア株式会社のクリエイターです。 初登場、大西です。コエテコというプログラミング教育のサービスでフロントエンドデザイナーをしています。 デザイン周り全般を担当しています。また、サービスデザイン部にも所属しています。 今回、2018年下半期にサービスデザイン部のグループミッションの一貫として、私を含む4名で改善・品質担保チームになり、以下のミッションを行うことになりました。（グループミッションについては、社内横断のデザイン活動を始めるまででまとめられています。） ミッション デザイン制作をスピードアップさせ、全体的な作業の効率化を実現する。 あるあるな手戻り・イライラする作業・一貫性のないデザイン等に対し業務プロセスの見直しやフレームワークの導入等によって改善を行う 「コーディング手
UX・モバイル・ゲームUIなどデザイナーの社内勉強会を紹介！ - Pepabo Tech Portal
こんにちは。 デザイン戦略チームの @sizucca です。 社内デザイナーの情報共有や、アウトプットの場作りの一環としてはじまった「Designer’s MTG」。 4 回目となる今回のテーマは「デザイナーによる部活動の紹介」！ 社内のいたるところで開催されているデザイナー主催のミニ勉強会（部活動っぽいので「部」と呼ぶ人が多い）の 活動内容の発表会を行いました。 過去の勉強会のレポートはこちら ペパボのデザイナー社内勉強会 Designer’s MTG #1 レポート ペパボのデザイナー社内勉強会 Designer’s MTG #2 レポート ペパボのデザイナー社内勉強会 Designer’s MTG #3 レポート UX 部「UX 手法の引き出しを増やそう」 放課後ホームページクラブ「ホームページ入門」 モバイルクラブ「ごあいさつ」 ねんどこねこね倶楽部「私たちはこんなものをこんなふう
サーバサイドエンジニアがCSS設計をした話 — みんなのウェディングエンジニアリングブログ
この記事はmwedアドベントカレンダー11日目の記事です。 昨日の 最近使い始めた開発支援系サービスの話 に引き続き @koheisg が担当させていただきます。(2回目) エンジニアの幅を広げるという大層なことを書くと言ってしまいましたが、 この一年、みんなのウェディングで経験したCSS設計の経験を書こうと思います。 CSSの設計の話 CSSからサーバサイドのプログラミングまですべて、プログラマが担当するようになったとき、 まずオススメするのはシングルクラスのCSS設計です。 CSSはカスケーティングによって、記述をDRYにすることができますが、これはプログラミングの記述をDRYにする機能の継承やmixinよりも強力です。ですが、一歩間違うとすぐに設計が負債となってしまいます。 安易に継承しまくったオブジェクトの正体は突き止めにくいですよね？ ですので、カスケーティングでクラスを記述する
細かすぎるけど伝わってほしい私的BEMプラクティス30（ぐらい）
BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。 レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。 BEMを使いはじめてかれこれ３，４年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。 ただし、それはBEM
Nordnetにおける、デザインと開発のためのアトミックワークフロー : BEMとGitの力を借りて | POSTD
私たちは最近、デジタルアセットとワークフローを管理し、スピードをアップさせ、製品提供に関する一貫性を維持するためにAtomic Designの考えを導入しました。 この記事では、アトミックな考え方の概略をお伝えし、私たちがどのように適用してきたかをシェアしたいと思います。BEMとGitの力を、少し借りました。 Atomic Designとは？ *すでにこの概念に馴染みがある人は、このパートを飛ばしたくなるでしょう。コーヒーでもいれて、” アトミックなUIキットを作る”から読んでください。* Atomic Designとは、 デザインシステム の構築に用いられてきた方法論です。この概念は 2013年に、Brad Frostによって生み出されました 。Bradはプロセスを表現するために化学とのアナロジーを用いていて、それによると、デザインは単純で再利用可能なパターンに分解できるというのです。
HTMLのメンテナンス性とBEM - アインシュタインの電話番号
BEMに関するこのあたりの考え方や期待感は、2014年でもう少し突っ込んで取り組みたい所存。Twitterへのツイートをブログ記事にする省エネ投稿。 似たような話として、以前書いたBEMに関する記事ではこういう表現をした。 例えばサーバーサイドやJavaScriptのエンジニアが仮にCSSの設計を把握していなくても、とりあえずBEMの命名規則を覚えてもらえればブロック単位で維持すべきだと理解してもらえるので、それだけでデザインを壊してしまうリスクを結構回避できる。また命名した本人であっても、半年経ってから見たらBEMの名前はわかりやすく見えそう。 BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号 他のコードに比べると、HTMLはより多くの人が編集する場所なので、HTML上に割り振られるID名やクラス名はそれ単体で「何のための名前か」「どういう構造か」「変更
BootstrapをBEMに考えてみる - Blog.おにぎりたまごうぃんなー
この記事はBEM Advent Calendar 2013の22日目の記事です。 こちらの記事を読んで、初めてBEMを知りました。 BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号 ほー。そのうち調べてみよう。と思ってても人間必要に迫られないとやりません！ Advent Calendarに参加することでやらなきゃいけない理由をつくるライフハック。 とりあえずよく使っているBootstrapをBEMで記述するとどうなるかを考えてみました。 よくあるあるヘッダーでBEMる Components - Navbar / Bootstrap bootstrapのコードはこう <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navba
BEM とは - CHROMA
メンテナンスブルな CSS の設計の話で OOCSS や SMACSS ってのがあるけど、そのうちの一つで BEM というのがある。 http://bem.info/ BEM-Methodology Definitionsの日本語訳 を見てみると XJST とか BEMHTML とかいうテンプレートエンジンに関する内容（よくわかってない）も書かれてるんだけど、日本ではこの中の BEM を CSS 用に使いやすくした MindBEMding （日本語訳はこっち ）の命名規則が良いってことで流行ってるみたい。 また、今 BEM っていったら大体は MindBEMding のことを指してるみたい。 BEM-Methodology Definitions の内容全部をこれから理解しようとすると自分が知らない知識が多くてちょっとアレなので.. 、MindBEMding の内容を先に抑えておきたいと思
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - hiloki/flocss: CSS organization methodology.
真のコンポーネント粒度を求めて
各CSS設計手法を取り入れる上でのメリット・デメリットをまとめてみた - Qiita