BEMIT: Taking the BEM Naming Convention a Step Further – CSS Wizardry
5 August, 2015 BEMIT: Taking the BEM Naming Convention a Step Further Written by Harry Roberts on CSS Wizardry. Table of Contents Namespaces Responsive Suffixes Healthchecks Final Word Anybody who’s followed me or my work for any length of time will no doubt know that I’m a huge proponent of the BEM naming convention. What I’m about to talk about in this post is not an alternative or different nam
ygoto3.com
現在開発担当している AbemaTV で、昨年末にパナソニックさんのスマートテレビ VIERA 向けにアプリケーションをリリースしました。AbemaTV リモコンボタンで AbemaTV にアクセスできます。今回このアプリケーションの UI を開発するにあたって、新しいデザインワークフローを導入しました。 本記事では、 Story-Assured Design というデザインワークフローを、現在プロダクト開発で直面しているデザインの課題とともに紹介します。 Story-Assured Design とは？ Story-Assured Design はその名前が示しているように、ユーザーストーリーを保証することを目的とした UI デザインのワークフローです。UI デザインを３つのステップに分けて行います。 ストーリーデザイン デザインの構造化 視覚情報デザイン 一番重要なユーザーストーリーの
The Performance of Open Source SoftwareHigh Performance Networking in Chrome
The Performance of Open Source Software High Performance Networking in Chrome Ilya Grigorik History and Guiding Principles of Google Chrome Google Chrome was first released in the second half of 2008, as a beta version for the Windows platform. The Google-authored code powering Chrome was also made available under a permissive BSD license–also known as the Chromium project. To many observers, this
GPU Accelerated Compositing in Chrome
Tom Wiltzius, Vangelis Kokkevis & the Chrome Graphics team updated May 2014 This code is changing due to Slimming Paint and thus there may be large changes in the future. Note also that some class names may have changed (e.g. RenderObject to LayoutObject, RenderLayer to PaintLayer). Summary This document provides background and details on the implementation of hardware-accelerated compositing in C
OSCON - React Architecture
React Architecture CHRISTOPHER “VJEUX” CHEDEAU FACEBOOK OPEN SOURCE String Concatenation — 2004 $str = ''; foreach ($talks as $talk) { $str += '' . $talk->name . ''; } $str += ''; Way back in time, in the early days of Facebook when Mark Zuckerberg was still in his dorm room, the way you would build websites using PHP is with string concatenation. It turns out that it’s a very good way to build we
Skyline | Evolving CSS Architecture
We are creating horizons, each new skyline is a unique, living outline that changes with the evolving architecture. Standard Markup We're developing a shared vocabulary, creating common HTML modules with consistent naming conventions. OOCSS & SCSS CSS is written in beautifully organized SCSS partials, grouped by the role each CSS rule and classname play.
学ぶ、考える、書き出す。
2023年1月1日 2022年の振り返り 今年は良くも悪くも某国際球技イベントに振り回された年だった。 2022年12月19日 サウナで整ったけど危険性も感じた サウナで整う状態を初体験したけど、体験してみてこれは身体にとって危ないやつだと思った。 2022年11月23日 eslint-plugin-importによってVitestの設定ファイル上でエラーが発生する場合がある vitest と eslint-plugin-import に依存している環境では、vitest.config.ts内で vitest/config をインポートすると Unable to resolve path to module 'vitest/config'. eslint(import/no-unresolved) というエラーが出る場合があります。 2022年8月24日 Next.js + Vercel
CSS コンポーネント試案
pixivのCSSで使われるクラス名ルールを読んで、僕もここ最近 CSS のコンポーネント設計について似たようなことを考えていたので書いてみる。いまのところ試案で、実際のプロジェクトで実践したことはまだない。 ここでいう「コンポーネント」とは独立したスタイルのブロックの意味で、たとえばヘッダーのナビゲーションとか画像のスライダーとかブログ記事のボディとかを指す。このアプローチの狙いとしては前出の記事とほぼ同じで、これらコンポーネントの「ルート」を明確にし、コンポーネント名が衝突しないようにすること。また管理や共有を考え、特殊な命名規則や不自然なマークアップなどはなるべく避けたいというのもある。Sass などの CSS プリプロセッサーを使う前提だけど、なくてもある程度は使える。 まずマークアップでは、コンポーネントのルートとなる要素に、クラス名と同時に data-component という
pixivのCSSで使われるクラス名ルール
pixivで運用して上手く行っている感触のあるルールを紹介。 CSS的にルートになるセレクターのクラス名は_で始める _始まりのクラスはサイト内でユニーク CSSの何が問題か。それはどこで指定が衝突するのか分からないことである。そこさえ把握できれば気を付けながら書けるので、それでもう問題ないと思っている。CSSには機能がなく、それが美しい（ということにしておく）。最低限抑えるべき要素以外は考えない方がいい。 コード例。 HTML: <section class="_foo-container"> <h1 class="title">foo</h1> <ul class="_bar-items"> <li class="item"><span class="title">item 1</span></li> <li class="item"><span class="title">item
Understanding CSS Stats: How to Make the Most of the Numbers | Envato Tuts+
In case you didn’t notice, the CSS analysis site cssstats.com received an overhaul recently. It’s a beautifully designed tool that gives you a lot of objective insight into your code, but how can you make the best use of CSS statistics? What should you shoot for? What do they mean, and how can you use them day-to-day? Today, we’re going to talk about CSS best practices, specificity and maintainabi
How browsers work
Introduction Web browsers are probably the most widely used software. In this book I will explain how they work behind the scenes. We will see what happens when you type 'google.com' in the address bar until you see the Google page on the browser screen. The browsers we will talk about There are five major browsers used today - Internet Explorer, Firefox, Safari, Chrome and Opera. I will give exam
Optimizing the Critical Rendering Path — SitePoint
October 16, 2014Optimizing the Critical Rendering Path Web pages are getting bigger and bigger in terms of consumed bandwidth and loaded assets (CSS, JS, images, fonts). The share of users who surf the web with mobile phones and tablets is increasing. Sure, at home you have your desktop computer with a really fast internet connection. Yet, a lot of people out there probably don’t visit your site w
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
Refactoring CSS - Programming Principles for Designers
From my presentation at CSS Dev Conf 2014. Abstract: Over the years as designers have transitioned from print to the web we've had a reluctant rel…
csstyle
clean, simple styling for the web csstyle is a modern approach for crafting beautifully maintainable stylesheets. Keeping CSS clean and organized is really hard. csstyle provides a higher-level abstraction for writing modular CSS. Written for Sass, it makes your CSS readable and semantic, generates your selectors for you, and automatically handles things like specificity and nesting. csstyle makes
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BEMおじさんは考えた vol.1
コンセプトから理解するGitコマンド
メンテナブルでありつづけるためのCSS設計
なんでCSSすぐ死んでしまうん
GitHub - davidtheclark/scalable-css-reading-list: Collected dispatches from The Quest for Scalable CSS
