What do you name color variables?

What naming scheme do you use for color variables? Have you succeeded at writing CSS that uses color variables in a manner agnostic to the colors they represent?I’ve tried all of the following, and I have yet to succeed at writing CSS that works well with any color scheme. ☹️
— Lea Verou (@LeaVerou) October 14, 2018

I remember the very first time I tried Sass on a project. The first thing I wanted to do was variablize my …
The post What do you name color variables? appeared first on CSS-Tricks.

Link: https://css-tricks.com/what-do-you-name-color-variables/

Compound Components in React Using the Context API

Compound components in React allow you to create components with some form of connected state that’s managed amongst themselves. A good example is the Form component in Semantic UI React.
To see how we can implement compound components in a real-life React application, we’ll build a compound (multi-part) form for login and sign up. The state will be saved in the form component and we’ll put React’s Context AP to use to pass that state and the method from …
The post Compound Components in React Using the Context API appeared first on CSS-Tricks.

Link: https://css-tricks.com/compound-components-in-react-using-the-context-api/

Edge’s Announcements

The public-consumption blog post:
Ultimately, we want to make the web experience better for many different audiences. People using Microsoft Edge (and potentially other browsers) will experience improved compatibility with all web sites, while getting the best-possible battery life and hardware integration on all kinds of Windows devices. Web developers will have a less-fragmented web platform to test their sites against, ensuring that there are fewer problems and increased satisfaction for users of their sites; and because we’ll continue …
The post Edge’s Announcements appeared first on CSS-Tricks.

Link: https://css-tricks.com/edges-announcements/

Browser Diversity Commentary, Regarding the Edge News

Still no word from the horse’s mouth about the reported EdgeHTML demise, but I hear that’s coming later today. The blog posts are starting to roll in about the possible impact of this though.
Andre Garzia: While we Blink, we loose the Web:
Even though Opera, Beaker and Brave are all doing very good work, it is still Chrome engine behind them and that limits the amount of stuff they can build and innovate. It is like as …
The post Browser Diversity Commentary, Regarding the Edge News appeared first on CSS-Tricks.

Link: https://css-tricks.com/browser-diversity-commentary-regarding-the-edge-news/

DRY State Switching With CSS Variables: Fallbacks and Invalid Values

This is the second post in a two-part series that looks into the way CSS variables can be used to make the code for complex layouts and interactions less difficult to write and a lot easier to maintain. The first installment walks through various use cases where this technique applies. This post covers the use of fallbacks and invalid values to extend the technique to non-numeric values.
The strategy of using CSS Variables to drive the switching of layouts and …
The post DRY State Switching With CSS Variables: Fallbacks and Invalid Values appeared first on CSS-Tricks.

Link: https://css-tricks.com/dry-state-switching-with-css-variables-fallbacks-and-invalid-values/

The All Powerful Front-End Developer

I posted a video of this talk some months back, but it was nearly an hour and a half long. Here’s an updated version that I gave at JAMstack_conf that’s only 30 minutes:

The gist is that the front-end stack is wildly powerful these days. Our front-end skillset can be expanded to give us power to do back-end-ish things and talk with APIs that allow us to build entire products in a way we haven’t quite been able to before.…
The post The All Powerful Front-End Developer appeared first on CSS-Tricks.

Link: https://css-tricks.com/the-all-powerful-front-end-developer/

DRY Switching with CSS Variables: The Difference of One Declaration

This is the first post of a two-part series that looks into the way CSS variables can be used to make the code for complex layouts and interactions less difficult to write and a lot easier to maintain. This first installment walks through various use cases where this technique applies. The second post (coming tomorrow!) will cover the use of fallbacks and invalid values to extend the technique to non-numeric values.
What if I told you a single …
The post DRY Switching with CSS Variables: The Difference of One Declaration appeared first on CSS-Tricks.

Link: https://css-tricks.com/dry-switching-with-css-variables-the-difference-of-one-declaration/

Bridging the Gap Between CSS and JavaScript: CSS Modules, PostCSS and the Future of CSS

In the previous post in this two-part series, we explored the CSS-in-JS landscape and, we realized not only that CSS-in-JS can produce critical styles, but also that some libraries don’t even have a runtime. We saw that user experience can significantly improve by adding clever optimizations, which is why this series focuses on developer experience (the experience of authoring styles).
In this part, we’ll explore the tools for “plain ol’ CSS" by refactoring the Photo component from our existing example.…
The post Bridging the Gap Between CSS and JavaScript: CSS Modules, PostCSS and the Future of CSS appeared first on CSS-Tricks.

Link: https://css-tricks.com/bridging-the-gap-between-css-and-javascript-css-modules-postcss-and-the-future-of-css/

Too Much Accessibility

I like to blog little veins of thought as I see them. We recently linked to an article by Facundo Corradini calling out a tweet of ours where we used an where we probably should have used an <i>.
Bruce Lawson checks if screen readers are the victims of these semantic mistakes…
Whenever I read “some browsers” or “some screenreaders”, I always ask “but which ones?”, as did Ilya Streltsyn, who asked me “what is the current state …
The post Too Much Accessibility appeared first on CSS-Tricks.

Link: https://css-tricks.com/too-much-accessibility/

Bridging the Gap Between CSS and JavaScript: CSS-in-JS

In this article, we’re going to dig into the concept of CSS-in-JS. If you’re already acquainted with this concept, you might still enjoy a stroll through the philosophy of that approach, and you might be even more interested in the next article (coming tomorrow!).
Web development is very interdisciplinary. We’re used to working closely with multiple languages. And, as developing web applications becomes more commonplace and nuanced, we often look for creative ways to bridge the gaps between those languages …
The post Bridging the Gap Between CSS and JavaScript: CSS-in-JS appeared first on CSS-Tricks.

Link: https://css-tricks.com/bridging-the-gap-between-css-and-javascript-css-in-js/