Scaling CSS Components with BEM, REMs, & EMs | Lullabot
How a little BEM and cleverness can make extensive use of EMs worth doing, and how it can up your game. Using relative units for measurements has a lot of advantages, but can cause a lot of heartache if inheritance goes wrong. But as I’ll demonstrate, BEM methodology and some clever standardization can reduce or eliminate the downsides. A little vocab before we get too far into this: em units CSS
僕がネイティブなCSS変数にわくわくする理由
数週間前、CSS変数（より正確にはCSSカスタム・プロパティ）が、Chrome Canaryの「試験運用版のウェブ プラットフォームの機能」フラグ1を有効にすることで利用できるようになりました。 Chromeのエンジニアであるアディ・オスマーニがそのリリースについてはじめてツイートしたとき、多くの否定的で、敵対的で、懐疑的な声が寄せられました。その量は驚くべきものでした。少なくともCSS変数にわくわくしいてる僕にとっては。 これらの反応をざっと見渡したところ、苦情の99%は次の2つの点についてのものだとわかりました。 構文が汚くて冗長。 Sassの変数がすでにあるじゃん。興味なし。 もちろん僕もあの構文は好きじゃありません。それは認めます。でも、あれがいい加減に決定されたものではないってことは理解しておくべきです。CSSワーキング・グループのメンバーは、CSSの文法と互換性があり、かつ将来
Unfolding Critical CSS
Inlining critical CSS is an optimization technique designed to make your site render blazingly fast. But does it? A website is one or more web pages bound together by a domain, hyperlinks, commonly used assets, and the browser cache. Web pages are not websites. Websites are not web pages. Optimizations that lighten the payload of a web page may increase the payload of a website. What is the differ
Don't Overthink It (Flexbox) Grids | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Four years ago I posted “Don’t Overthink it Grids” and it resonated with quite a few people. Even back then, I thought we might have been at Peak Grid. Someone was promoting a new grid framework practically every week. That article was my way of saying: “Fear not! You can make a grid yoursel
MaintainableCSS - an approach to writing modular, scalable and maintainable CSS | By Adam Silver
Write CSS without worrying that overzealous, pre-existing styles will cause problems. MaintainableCSS is an approach to writing modular, scalable and maintainable CSS. “A handy little read on learning how to write modular and maintainable CSS.” Smashing Magazine “Finally a good book on how to write maintainable CSS.” Alexander Dajani “I actually love everything about this.” Simon Taggart
What Are CSS Modules And Why Do We Need Them? | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! I’ve been intrigued by CSS Modules lately. If you haven’t heard of them, this post is for you. We’ll be looking at the project and it’s goals and aims. If you’re intrigued, stay tuned, as the next post will be about how to get started using the idea. If you’re looking to implement or level u
Annotating Your (Critical) CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Wladston Ferreira Filho. We’ve covered critical CSS before, but the technique covered was specific to SCSS. Here Wladston covers the basics and introduces another way to do it, through PostCSS, and shows an example (with data) of the result. Critical CSS is a
8 Tips to Write CSS You Won't Hate
We have to admit it. Most of us don't like their CSS code! When you start a new project, you feel very excited and you say “Ok, this time I'm gonna make my CSS as clear and maintainable as I can.” However, most of the time — as the project grows — we start feeling unhappy about it. It's so messy, unorganized, and hard to change. Before I start, I have to say that I'm not the most experienced one a
Understanding CSS3 Flexbox for Responsive WordPress Design
Remember how hard it used to be to vertically center content on your site? If you’re struggling with the words “used to be” in that last sentence, you obviously haven’t yet cottoned onto flexbox, the answer to clean, hack-free CSS layouts. Oh man, remember how hard it used to be to vertically center content on your site? If you’re struggling with the words “used to be” in that last sentence, you o
Please, Please Don’t Use “CSS in JS”
Update (August 2020): I wrote this 4 years ago when the React/component community were still in a relatively immature state. The (poorly articulated) higher level theme in this piece was something like “think critically about whether you need tools created by MegaCorps for MegaCorps with unique mega scale problems”, and when I wrote this, CSS in JS felt like a symptom of that more fundamental prob
Three years with CSS Grid Layout – Rachel Andrew
As I was updating my slides for An Event Apart in San Francisco, I realised how much complexity I was removing from the talk that I gave in May this year. I was able to remove this complexity based on changes to the specification itself, and it made me think about the journey this specification has been on. In my self-appointed role as CSS Grid cheerleader, I’ve been along for the ride and this po
Flexbox Myth Busting
If you write CSS with any kind of regularity, then chances are you have heard of ‘flexbox’ (Flexible Box Layout Module). You might have even heard that flexbox can solve many problems that are thought hard or impossible to solve without the aid of Javascript. But you might have also heard or assumed a few barriers to leveraging flexbox this early. In this post I will be debunking many ‘myths’ that
Magic Numbers in CSS
Magic numbers are numbers that appear in source code without any explanation of what they mean. This makes the code difficult to understand and maintain. In CSS, it's harder to tell if a value is a magic number than in other languages. This is mostly because there are more numbers that don't require additional explanation. Refactoring CSS to remove magic numbers Let's look at this example design.
CSS Transitions and Transforms for Beginners
This post will introduce you to CSS transitions and CSS transforms: the CSS power couple. When used together, these properties allow you to create simple animations and add valuable interaction and visual feedback for your users. Just remember when adding any kind of movement to your project to keep it simple, subtle, and consistent. The movement you create should convey meaning, always enhancing,
CSS constants and variables | BugHerd
CSS constants don't exist in a spec, they're currently just variables that aren't re-assigned. There's become a concern that, in general, CSS is broken ... There's become a growing concern that, in general, CSS is broken. While it hasn't been something that's prohibited me from work, it's becoming more apparent the more complex our application gets. Scoped CSS is something quite a few projects are
Some things I’ve learned about CSS so far
I’ve been writing CSS for a little over 5 years now, but only in the past year have I felt as though I might be getting somewhat good at it. What follows is a brief collection of some of the ideas and learnings I’ve found both valuable and practical. N.B.: These ideas almost certainly originate from people other than myself (and it’s likely that the people I gleaned these ideas from in turn learne
Understanding CSS Counters and Their Use Cases — SitePoint
There are certain CSS features that we probably don’t use very often. I think CSS counters fall into that category for most of us, and more than likely for two reasons: They don’t seem to have many use cases. The code to write them is a bit complex. I recently saw a practical use case for counters, so I thought I would give a brief crash course in how counters are written and share that use case h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flexbox Patterns
Flexbox Froggy
Detecting CSS Animation and Transition End with JavaScript by Osvaldas Valutis
