You might be on the fence with CSS-in-JS — especially after hearing from Rich Harris about Svelte on The Changelog #332. Max Stoiber writing on his personal blog with his take on the matter: Primarily, CSS-in-JS boosts my confidence. I can add, change and delete CSS without any unexpected consequences. My changes to the styling of a component will not affect anything else. If I delete a component, I delete its CSS too. No more append-only stylesheets!
read more
This is notable/different because it uses descriptive HTML rather than semantic CSS classes: <grid columns=8> <c></c> <c span=3>3</c> <c></c> <c span=7-8>7-8</c> <c span=2+2>2+2</c> <c span=5-8>5-8</c> <c span=1-4>1-4</c> <c span=6..>6..</c> <c span=2..>2..</c> <c span=4..>4..</c> <c span=1-2>1-2</c> <c span=4-5>4-5</c> </grid>
read more
Use dynamic prop based styles with the React bindings and have them transpiled to CSS variables automatically. Great productivity with source maps and linting support. When it comes to web frameworks: ("build-time").wired? && ("run-time").tired?
read more
To wield the mystical magic that is CSS, you must first understand the three primary building blocks of the language and how they work — the cascade, specificity, and inheritance. This post will take 5-10 minutes to read and years to master. Enjoy!
read more
Andy Bell: It’s turning into a bit of a trend—particularly in the JavaScript community—to crap on CSS wherever possible. I could lambaste those who frequently do this, but instead, I thought I’d write about CSS positively to counter the falsities that are spread over the tech tyre fire that is Twitter. Andy makes three compelling arguments in favor of CSS, and I’m glad people continue to talk about this. The conversation is ever more critical as our industry grows and matures.
read more
Cathy Dutton: …the more I looked at my old Sass files the more I questioned whether it was adding value to my site, or just an extra level of complexity and dependency. CSS has evolved over recent years and [sic] the problems that lead me to Sass in the first place seem to be less of an issue today. Lots of great examples in Cathy’s post. While I’m not 100 percent convinced to leave Sass, its days are numbered. CSS has come a long way since I started using Sass in 2012, and while I feel the syntax settled on for variables is a bit verbose, there’s no question it’s pretty powerful.
read more
Ire Aderinokun: The main reason the visibility: hidden rule isn’t just about visual visibility is because it affects the elements visibility to assistive technology as well. Love deep dives like this. Especially how it affects accessibility. Definitely something we front-end developers need to pay more attention to.
read more
Robin Rendle writing on CSS-Tricks: We should see front-end development as a unique skillset that is critical to the success of any project. I believe that’s why frameworks and tools like Bootstrap are so popular; not necessarily because they’re a collection of helpful components, but a global solution that corrects an inherent issue. … Bootstrap isn’t a skill though — front-end development is. It’s supremely ironic that front-end development is incredibly undervalued by many, yet those same people use frameworks because moving a box around in CSS is “hard.”
read more
Typetura provides a GUI for designers to rapidly set type across all screen sizes along with a robust CSS based implementation of your design that scales with animation keyframes, not breakpoints. You probably won’t grok this until you click through to the tool and play around with it a bit.
read more
I love this with my whole heart. 🤤
read more
I was exploring patterns that enable the browser to render a page as fast as possible by including code alongside the initial HTML so that the browser has everything it needs to start rendering the page, without making additional requests. Our two go-to options to achieve this goal are inlining and server push (more on how we use those), but each has drawbacks: inlining prevents a file from being cached for reuse, and server push is still a bit experimental, with some browser bugs still being worked out. As I was preparing to describe these caveats, I thought, “I wonder if the new Service Worker and Caching APIs could enable caching for inline code.” I’ve been dabbling a bit with service workers over on Brightly Colored to improve the loading time, so this exploration of caching inline CSS is fascinating. In fact, I used to completely inline all the CSS on the site, but switched to a file request because of the way I thought service workers, well… worked. Surprisingly, this implementation doesn’t look too difficult.
read more
Andy Clarke on the Stuff & Nonsense blog: Implementing dark mode is easy, but designing for it is less so. Here are some things you should consider when designing a dark mode version of your product or website to ensure you maintain accessibility and readability, and a consistent feel for your brand between Light and Dark. It’s all the rage to “dark mode all the things” right now, but Andy’s practical advice on the topic is great. Finding the right palette and the consequential typography decisions needed, are good to keep in mind.
read more
This must be of the dark arts. Never before has this level of visual UI and control been given to the masses, carte blanche — wow, truly impressed. From Vlad Magdalin (Webflow co-founder and CEO) on Twitter: CSS Grid in @webflow is one of those features that makes me fall in love with our mission all over again. The power and flexibility this places in designers' hands is mind-blowing, and it the amount of creativity this can unleash is super inspiring! 😍https://t.co/mPlezTPgZv pic.twitter.com/INe3N0LEqI— Vlad Magdalin (@callmevlad) October 10, 2018 The video attached to this tweet has been viewed 23,000 times (so far)!
read more
Nick Salloum: When we’re dealing with inputs, there’s a host of techniques to consider in order to give users the best experience. We need to make sure that we’re giving users necessary information at all points in time, and that means finding the balance between too much and too little. Time and time again we’ve been told that having a proper label is a better UX. The thing is, having a bunch of labels on a form can start to look congested. This solution is a great one, and saves us from having to use JavaScript.
read more
Rachel Andrew: There is frequently talk about how developers whose main area of expertise is CSS feel that their skills are underrated. I do not think we help our cause by talking about CSS as this whacky, quirky language. CSS is unlike anything else, because it exists to serve an environment that is unlike anything else. Rachel makes a great point. We give others permission to talk badly about CSS and the immensely valuable skill of writing it, when we also don’t assign it the deserved respect.
read more
Chris Coyier on CSS-Tricks: By getting clever with positioning, transforming, and many other tricks, we can make lots of shapes in CSS with only a single HTML element. Ok, so the first couple ones are easy, but the lower you go on the page, the more complex the shapes become. I had no idea you could do this with just CSS, much less with a single HTML element.
read more
Chris Coyier on CSS-Tricks: Say you have a very simple CSS grid layout with one column fixed at 300px and another taking up the rest of the space at 1fr. … That’s somewhat robust. That 1fr column will take up any remaining space left behind by the fixed 300px column. It’s true that the auto value would do the same, but auto isn’t quite as robust since it’s size is based on the content inside. Chris explains something here which may look pretty simple, but would’ve taken me hours to debug. The distinction he makes between the 1fr and auto defined column is game changing on its own.
read more
Suz, Nick, and KBall are joined by special guest Aimee Knight to talk about CSS, how it’s often trivialized and how that in turn affects the people who write it, what CSS in JS is, and how to get started with it.
read more
So simple and beautifully pleasing to the eye + click to copy code to clipboard…yes!
read more
Here’s a great episode of Five Things with our friend Aimee Knight. Burke Holland’s questions dive into less talked about CSS topics, which was enjoyable. Even if you’ve worked on the frontend for a while, there’s definitely a tip in here for you.
read more
Copy/paste the code in this repo’s README into your browser’s address bar and you end up with a super minimal CodePen-style editor. Pretty cool, and a bit crazy that you can get so much functionality with just 400 bytes of code…
read more
All you ever wanted to know about Flexbox, explained visually. 👇 is just a sample of what you’ll find when you follow the link.
read more
KBall combined his learnings while working on Zurb’s Foundation with some original research to curate this massive list of CSS resources. Topics are arranged in an order that makes sense for learning from scratch. So if you’re brand new to CSS, you should be able to start at the top and work downwards, gradually increasing your understanding. Bookmark this and share it with a friend. 💯
read more
The latest version of Firefox adds some powerful new features. It enables parallel CSS parsing, which combines with their existing parallel CSS style computation to make CSS in Firefox incredibly fast. In addition, this version adds a brand new Accessibility Inspector, giving developers direct access to the ‘accessibility tree’ screen-readers use to interact with a website. This is HUGE for helping developers make websites more accessible.
read more
This is a spectacular project by Diana Smith: Rules I have for myself: All elements must be typed out by hand Only Atom text editor and Chrome Developer Tools allowed. SVG use is limited, and all shapes can only use hand-plotted coordinates and bezier curves - without the aid of any graphics editor. The results are stunning, to say the least. I won’t embed the image here, because it won’t do it justice. You have to click through and see it for yourself.
read more
