Sass Selector Combining

Brad Frost was asking about this the other day…
Sass people, which way do you do it and why? pic.twitter.com/dIBA9BIuCO
— Brad Frost (@brad_frost) October 1, 2018

.c-btn {
&__icon {

}
}
I guess that’s technically “nesting" but the selectors come out flat:
.c-button__icon { }
The question was whether you do that or just write out the whole selector instead, as you would with vanilla CSS. Brad’s post gets into all the pro’s and con’s of both …
The post Sass Selector Combining appeared first on CSS-Tricks.

Link: http://bradfrost.com/blog/post/sass-selectors-to-nest-or-not-to-nest/

The Way We Talk About CSS

There’s a ton of very quotable stuff from Rachel Andrew’s latest post all about CSS and how we talk about it in the community:
CSS has been seen as this fragile language that we stumble around, trying things out and seeing what works. In particular for layout, rather than using the system as specified, we have so often exploited things about the language in order to achieve far more complex layouts than it was ever designed for. We had to, …
The post The Way We Talk About CSS appeared first on CSS-Tricks.

Link: https://rachelandrew.co.uk/archives/2018/10/04/the-way-we-talk-about-css/

Deliver exceptional customer experiences in your product

(This is a sponsored post.)
​Pendo is a product cloud that helps create lovable products that customers can’t live without. Pendo enables product teams to understand product usage, collect user feedback, measure NPS, assist users in their apps and promote new features in product — all without requiring any engineering resources. This unique combination of capabilities is all built on a common infrastructure of product data and results in better onboarding, increased user engagement, improved customer satisfaction, reduced churn, …
The post Deliver exceptional customer experiences in your product appeared first on CSS-Tricks.

Link: https://synd.co/2O6tka6

Quick Tip: Debug iOS Safari on a true local emulator (or your actual iPhone/iPad)

We’ve been able to do this for years, largely for free (ignoring the costs of the computer and devices), but I’m not sure as many people know about it as they should.
TL;DR: XCode comes with a “Simulator" program you can pop open to test in virtual iOS devices. If you then open Safari’s Develop/Debug menu, you can use its DevTools to inspect right there — also true if you plug in your real iOS device.
Direct Link to Article…
The post Quick Tip: Debug iOS Safari on a true local emulator (or your actual iPhone/iPad) appeared first on CSS-Tricks.

Link: http://mediatemple.net/blog/tips/quick-tip-debug-ios-safari-true-local-emulator-actual-iphoneipad/

The dialog element

Chris Manning digs into :
A dialog element provides:

An element that is easy to show and hide, including an open boolean attribute on the element itself.
Two versions: a standard popover or modal version.
A ::backdrop pseudo-element for modal types.
Built-in focus: see dialog focusing steps.
ARIA role support (dialog is the implied default). Also accepts the alertdialog role.
A pending stack for multiple dialogs.
A DOM interface with the open boolean and methods show,


The post The dialog element appeared first on CSS-Tricks.

Link: https://www.viget.com/articles/the-dialog-element/

Unbuttoning Buttons

We dug into overriding default buttons styles not long ago here on CSS-Tricks. With garden-variety fully cross-browser-supported styles, you’re looking at 6-10 CSS rules to tear down anything you need to off a button and then put in place your own styles. Hardly a big deal if you ask me, especially since it’s extremely likely you’ll be styling buttons anyway.
Scott O’Hara has taken a look as well. I think the solution offered to use a

Link: https://www.scottohara.me/blog/2018/10/03/unbutton-buttons.html

CSS Only Floated Labels with :placeholder-shown pseudo class

The floated label technique has been around for a good long while and the general idea is this: we have an text input with the placeholder attribute acting as a label. When a user types into that input, the label moves from inside the input to outside of it.

Like so:
Although I don’t see this pattern used on the web all that much, I do think it’s an interesting one! There are different approaches to it, but Nick Salloum …
The post CSS Only Floated Labels with :placeholder-shown pseudo class appeared first on CSS-Tricks.

Link: https://callmenick.com/dev/floated-labels-with-placeholder-shown/

The industry’s best open API

(This is a sponsored post.)
With our robust SDK, super clean dashboard, detailed documentation, and world-class support, HelloSign API is one of the most flexible and powerful APIs on the market. Start building for free today.
Direct Link to Article — Permalink…
The post The industry’s best open API appeared first on CSS-Tricks.

Link: https://synd.co/2zzwVEw

The Codification of Design

Jonathan Snook on managing the complexity between what designers make and what developers end up building:
Everything that a designer draws in a Sketch or Photoshop file needs to be turned into code. Code needs to be developed, delivered to the user, and maintained by the team.
That means that complexity in design can lead to complexity in code.
That’s not to say that complexity isn’t allowed. However, it is important to consider what the impact of that complexity is—especially …
The post The Codification of Design appeared first on CSS-Tricks.

Link: https://snook.ca/archives/design/codification-of-design

Selectors That Depend on Layout

“Why the heck don’t we have ::first-column?"
I heard someone ask that the other day and it’s a valid question. I’d even take that question further by asking about ::nth-column() or whatever else relates to CSS columns. We have stuff like ::first-letter and ::first-line. Why not others?
There are many notable things missing from the "nth" crowd. Seven years ago, I wrote "A Call for ::nth-everything" and it included clear use cases like, perhaps, selecting the first …
The post Selectors That Depend on Layout appeared first on CSS-Tricks.

Link: https://wiki.csswg.org/faq