WeAreJavaScripters@15th https://wajs.connpass.com/event/76238/
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
WeAreJavaScripters@15th https://wajs.connpass.com/event/76238/
「Atomic Designの思想で、文系でもわかるCSSフレームワークを作りたい」に識者たちの鋭すぎる突っ込みが入る
うぇびん(holyKurka) @webbingstudio プロジェクトのディレクトリ構成を検討した結果こうなった。Atomic Designの考え方を採用しつつ、そういうのわからない人にも探しやすいディレクトリ構成を考えてみました pic.twitter.com/hUo45EcREA 2017-06-13 19:38:05 リンク Brad Frost Atomic Design Hey there! I wrote a book called Atomic Design that dives into this topic in more detail, which you can buy in paperback and/or ebook formats. We’re not designing pages, we’re designing systems of component
SPAにおけるCSSについて、ひとつの解（追記あり） - エンジニアをリングする
SPAにおけるCSSのありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた— よしこ (@yoshiko_pg) 2017年4月7日 この話を簡単にまとめておこうと思います。 結論を先に書くと「今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった」という感じです。 悩んでいたこと コンポーネント指向でSPAを作っていく上で、CSS（というかスタイリング）はどう書いていったらいいんだろう？ということに結構悩んでいました。 HTMLとJSがコンポーネントとしてまとまっていく中でCSSだけは今まで通り別物として扱い、BEMなどでグローバルスコープと戦うのか？はたまたCSSの枠をはみ出てJSコンポーネントの粒度に合わせたコンポーネント化をするのか？ 加えて、見た目も挙動も複雑なアプリケ
PostCSS まとめ - Qiita
僕はPostCSSは開発当初から追いかけていて、GitHubでPostCSSチームのメンバーのひとりだったり、実際にPostCSSを使ってプラグインやツールをいくつか作ったり、ブログや雑誌で記事を書いたり、勉強会等で話したりしています。 本記事では、自分が知っているPostCSSについての事柄を共有します。 PostCSSとは何か PostCSSとは、ロシア人の Andrey Sitnik という人が開発している、Node.js製の「CSSツールを作るためのフレームワーク」です。PostCSS製のツールとして、ベンダープリフィックスを自動で付与する「Autoprefixer」、未来のCSSの構文の一部を今のブラウザで解釈できるようにする「cssnext」、カスタマイズ性に富んでいるCSSリンターである「stylelint」などが有名です。 PostCSSは2018年2月、かなり広く使われて
Widthの発音について
The document discusses CSS properties like width, linear, and relative. It mentions CSS Nite events from 1996-2011 and references getting up at midnight. The author's Twitter handle is provided as @swwwitch and an email takano@swwwitch.com. The document contains technical CSS and HTML terms when discussing width properties and formatting text.Read less
morishitterのCSSの書き方（2016年夏） - morishitter blog
今、自分がどうやってCSSを書いているのかについてまとめる。 CSSを書く前にすること 持論だが、「デザインの意図を正確に理解した上で書かれたCSSは破綻しない」と思っている。 しかし、自分ひとりでサービスを作るときような、デザインの決定権を持つ人とUI実装者が同じである場合を除いて、デザインの意図を正確に伝え、理解することは難しい。 僕が1番時間を使うのがこの工程だ。 今の仕事ではデザイナーがSketchファイルを作成し、エンジニアがそれを元に実装する。 Sketchファイルを開き、アートボードをひたすら眺めデザインの矛盾がないかを確認し、「なぜこのようなデザインなのか」を質問しまくる。 ここで良い質問と提案をするためにも、エンジニア側に最低限のデザインに対する知識が必要だと思う。 最近読んだ本だと、「みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善
エンジニアはもう一度CSSとちゃんと向き合ってみよう - 詳細度編 - Qiita
WHAT CSSには詳細度（Specificity）という概念があります． 詳細度は、どのプロパティ値が最もある要素に関係があり、適用されるかをブラウザが決定する手段です。 詳細度 - CSS | MDN 簡単に言うと，「スタイルが重複したとき，どのスタイルを優先するか」の優先度を定量評価したものになります． 詳細度はa, b, cのようなカタチで表されます． 細かい説明するのは面倒なので，ざっくりと以下にリストアップします． 全称セレクタ: a=0, b=0, c=0 * 要素，擬似要素: a=0, b=0, c=1 li, ::before, ::first-line, etc. クラス，擬似クラス，属性: a=0, b=1, c=0 .classname, :first-child, [type=password], etc. id: a=1, b=0, c=0 #idname あと
本当にCSSの詳細度は必要なのか | POSTD
(訳注：2016/01/05、頂いたフィードバックをもとに記事を修正いたしました。) まず、初めに言っておきたいことがあります。この記事は、私がどれほど詳細度を嫌っているのかを延々と書いたもの ではない ということです。もしそのような内容の記事を読みたいのであれば、インターネットで探してください。たくさんあるはずです。 この記事の目的はWeb開発コミュニティにただ質問を投げかけることですので、その答えを考えてもらえれば嬉しいです。 問題の核心を突くために、質問を言い換えてみましょう。「 カスケードに詳細度が追加されていない世界の方が良かったのでしょうか、悪かったのでしょうか。 」 もちろん、この質問を見て、 どうでも良いでしょうとか、詳細度は存在するのだから我慢するしかない、考える必要はないだろう と思う人がいることでしょう。 そう思っている人に、このような考えは正しくないということをお知
You Don't Need JavaScript に学ぶ CSS テクニック
さまざまな UI を JavaScript を使わずに、CSS だけで実現するデモ You Don't Need JavaScript を紹介します。 かなり煽ったタイトルのデモですが、作者も「いくつかの点で問題がある」と述べているように、これらの UI を実装するのであれば素直に JavaScript を使うことをおすすめします。あくまでデモとして「CSS の可能性」を感じることができればと思います。 ただ、実装としてはなかなか面白いので、是非ソースも含めてチェックしてみてください。今回は、いくつかあるデモから３つピックアップして簡単な解説と一緒に紹介します。 ＊ サンプルによっては、ブラウザによって正常に表示されないことがあります。最新の Chrome で動作確認をしているので、表示されない場合は Chrome で試してみてください。 アコーディオン ラジオボタンと擬似クラスの :ch
Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of — Smashing Magazine
Houdini is a new W3C task force that introduces a new set of APIs that will give developers the power to extend CSS itself, and the tools to hook into the styling and layout process of a browser’s rendering engine. In this article, Philip Walton is going to talk about how Houdini will solve CSS feature problems and list some of the more exciting features currently in development. He’ll also offer
Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module | POSTD
Buffer のメンバーはReactが大好きで、フロントエンドの多くのコードベースを徐々にReactに移行させています。ReactにFluxを加えると、モジュラー形式の小さなアプリでできた複雑なプロダクトを構築するための、とても健全な方法になると思います。そこで、１つ１つの新しい小さなアプリと機能を、大規模な構造体に追加される、Reactの新しいブロックと考えます。 私は最近、このような新機能の１つに取り組んでいますが、React＋Fluxのアプリケーションを作るのがいかに簡単であるかと、その理由について、さらに夢中になってしまいました。Reactを使うと有意味なコンポーネントを集めてUIを宣言的に構築するのが楽になり、Fluxはその混成体に妥当なデータフローをもたらします。 複雑なアプリケーションを作るときに発生する課題について多くの考察がなされましたが、React＋Fluxの組み合わせ
Web 関連仕様 日本語訳
このページは、 Web プラットフォーム関連の様々な仕様の日本語訳の一覧と， それらの日本語訳に共通な事項についての説明です。 これらの翻訳の正確性は保証されません。 これらの仕様の公式な文書は英語版であり、 日本語訳は公式なものではありません。 誤訳が無いことは保証されません。 ［ 当の仕様の策定者たちが想定している／当の仕様に期待されている ］意味論を完全かつ正確に反映することは保証されません。 翻訳なので、 語彙レベルで原文と正確に一致する意味を表すことは決してありません。 日本語は自然言語なので、 誰がいつどこで読んでも同じ解釈になることは保証されません。 ）（ 実際に誤訳が見つかることも時折あります。 それらについては見つかり次第修正され， 加えて用語の対訳や言い回しなども時折修正されるので、 これらの翻訳が「完成」する日は永遠に来ません。 逆に原文仕様が誤っていることもあり、
BEMで命名する時に役に立ちそうな単語
BEM Advent Calendar 2013の10日目の記事です。 ちょっとBEMツールのことは1日お休み。明日やろう明日。 BEMツールの Full stack quick startをやってた軌跡は以下です。 サンプルプロジェクトを使ってみる：BEMツールに触れてみる（1）ブロックライブラリを使ってみる：BEMツールに触れてみる（2）ブロックを作ってみる：BEMツールに触れてみる（3）ということで、今回はBEMで命名する時に役立ちそうな単語を書き出して見ようと思います。 役立ちそうな単語一覧あくまで名付けるときの参考になったらいいな、程度で書いてます。 ※…..で頭合わせしてるのはinuit.cssがやってたからっていうそれだけ。 色々組み合わせて使いそうなものhero とかお洒落っぽいので使う。大きさ順序は hero > main > sub くらいのイメージ。 hero....
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コンポーネント指向と余白の設計
React沼CSSArchitect
GitHub - Chalarangelo/mocka: Simple, elegant content placeholder
1pxをめぐる戦い - @yoshiko_pg
GitHub - maxbeier/text-spinners: Pure text, CSS only, font independent, inline loading indicators
Page Not Found - NxWorld
10 CSS3 Animation Scripts For Your Next Projects