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カスタム・プロパティ）が、Chrome Canaryの「試験運用版のウェブ プラットフォームの機能」フラグ1を有効にすることで利用できるようになりました。 Chromeのエンジニアであるアディ・オスマーニがそのリリースについてはじめてツイートしたとき、多くの否定的で、敵対的で、懐疑的な声が寄せられました。その量は驚くべきものでした。少なくともCSS変数にわくわくしいてる僕にとっては。 これらの反応をざっと見渡したところ、苦情の99%は次の2つの点についてのものだとわかりました。 構文が汚くて冗長。 Sassの変数がすでにあるじゃん。興味なし。 もちろん僕もあの構文は好きじゃありません。それは認めます。でも、あれがいい加減に決定されたものではないってことは理解しておくべきです。CSSワーキング・グループのメンバーは、CSSの文法と互換性があり、かつ将来
Tools & tips that may help you build your next web experience or simply scare you away from it. 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
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. 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 yourself! You
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
Flexbox PatternsBuild awesome user interfaces with CSS flexbox. Examples and source code included. Flexbox is awesome, but it introduces many new concepts that can make it difficult to use. These interactive examples will show you practical ways to use it to build UI components. They start out simple and get more complex near the end. You can start using these patterns in your own code right away,
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. 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 up your
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. 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 an effec
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
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
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
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
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 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.
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 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
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
Detecting the end of CSS animation and transition could be useful if you want to back up some of your JavaScript behavior on CSS. The most common uses of this in my practice are: Animating the display: none. I used the technique on Readerrr for tabbed content and modal boxes: the new content or modal box shows up only after the old one disappears. And… Animating the disappearance of an element and
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ページを開く
