Taming the Cascade With BEM and Modern CSS Selectors | CSS-Tricks
BEM. Like seemingly all techniques in the world of front-end development, writing CSS in a BEM format can be polarizing. But it is – at least in my Twitter bubble – one of the better-liked CSS methodologies. Personally, I think BEM is good, and I think you should use it. But I also get why you might not. Regardless of your opinion on BEM, it offers several benefits, the biggest being that it helps
Replace JavaScript Dialogs With New HTML Dialog | CSS-Tricks
You know how there are JavaScript dialogs for alerting, confirming, and prompting user actions? Say you want to replace JavaScript dialogs with the new HTML dialog element. Let me explain. I recently worked on a project with a lot of API calls and user feedback gathered with JavaScript dialogs. While I was waiting for another developer to code the <Modal /> component, I used alert(), confirm() and
New in Chrome: CSS Overview | CSS-Tricks
Here’s a fancy new experimental feature in Chrome! Now, we can get an overview of the CSS used on a site, from how many colors there are to the number of unused declarations… even down to the total number of defined media queries. Again, this is an experimental feature. Not only does that mean it’s still in progress, but it means you’ll have to enable it to start using it in DevTools. Open up DevT
What does "revert" do in CSS? | CSS-Tricks
Miriam Suzanne explains in a Mozilla Developer video on the subject. The revert value in CSS “resets” a property back to it’s inherited value, only going as far back as the UA stylesheet. That’s critical, as it won’t reset a <p> to inline, for example, because a <p> is a block-level element as set in the UA stylesheet. So if we had this HTML: <p>Lorem, ipsum dolor.</p> <p class="alt">Fugit, id vel
An Explanation of How the Intersection Observer Watches | CSS-Tricks
There have been several excellent articles exploring how to use this API, including choices from authors such as Phil Hawksworth, Preethi, and Mateusz Rybczonek, just to name a few. But I’m aiming to do something a bit different here. I had an opportunity earlier in the year to present the VueJS transition component to the Dallas VueJS Meetup of which my first article on CSS-Tricks was based on. D
The Great Divide | CSS-Tricks
Two front-end developers are sitting at a bar. They have nothing to talk about. January 2019 — Chris Coyier Let’s say there is a divide happening in front-end development. I feel it, but it’s not just in my bones. Based on an awful lot of written developer sentiment, interviews Dave Rupert and I have done on ShopTalk, and in-person discussion, it’s, as they say… a thing. The divide is between peop
line-clamp | CSS-Tricks
The line-clamp property truncates text at a specific number of lines. The spec for it is currently an Editor’s Draft, so that means nothing here is set in stone because it’s a work in progress. That said, it’s defined as a shorthand for max-lines and block-overflow, the former of which is noted as at risk of being dropped in the Candidate Recommendation. It’s easy to see how max-lines would be nix
1 HTML Element + 5 CSS Properties = Magic! | CSS-Tricks
Let’s say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the background on the root that’s there just to make clear that our one HTML element has some transparent parts), no JavaScript. What would you think that involves? The desired results. Well, this article is going to explain just how to do this and then also sh
Inheriting box-sizing Probably Slightly Better Best-Practice | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. I’m a big fan of resetting box-sizing to border-box, so much that we have a special day of the year around here. But there is a little adjustment to setting it that seems like a pretty good idea. Here’s the adjusted version: html { box-sizing: border-box; } *, *:before, *:af
A Sliding Nightmare: Understanding the Range Input | CSS-Tricks
You may have already seen a bunch of tutorials on how to style the range input. While this is another article on that topic, it’s not about how to get any specific visual result. Instead, it dives into browser inconsistencies, detailing what each does to display that slider on the screen. Understanding this is important because it helps us have a clear idea about whether we can make our slider loo
ABEM. A more useful adaptation of BEM. | CSS-Tricks
BEM (Block Element Modifier) is a popular CSS class naming convention that makes CSS easier to maintain. This article assumes that you are already familiar with the naming convention. If not you can learn more about it at getbem.com to catch up on the basics. The standard syntax for BEM is: block-name__element-name--modifier-name I’m personally a massive fan of the methodology behind the naming co
Prettier + Stylelint: Writing Very Clean CSS (Or, Keeping Clean Code is a Two-Tool Game) | CSS-Tricks
Prettier + Stylelint: Writing Very Clean CSS (Or, Keeping Clean Code is a Two-Tool Game) It sure is nice having a whole codebase that is perfectly compliant to a set of code style guidelines. All the files use the same indentation, the same quote style, the same spacing and line-break rules, heck, tiny things like the way zero’s in values are handled and how keyframes are named. It seems like a ta
Design Tooling is Still Figuring Itself Out | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. It probably always will be, to be fair. At the moment, there are all kinds of things that design software is struggling to address. The term “screen design” is common, referring to the fact that many of us are designing very specifically for screens, not print or any other a
Building Skeleton Screens with CSS Custom Properties | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Designing loading states on the web is often overlooked or dismissed as an afterthought. Performance is not only a developer’s responsibility, building an experience that works with slow connections can be a design challenge as well. While developers need to pay attention to things like mini
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Dilemma of Naming Font Size Variables | CSS-Tricks
Copy the Browser's Native Focus Styles | CSS-Tricks
React Integration Testing: Greater Coverage, Fewer Tests | CSS-Tricks
A Quick Way to Remember the Difference Between `justify-content` and `align-items` | CSS-Tricks
Complexity | CSS-Tricks
The Output Element | CSS-Tricks