CSS Icon

CSS

Cascading Style Sheets (CSS) is a language used most often to style and improve upon the appearance of views.
78 Stories
All Topics

CSS betterwebtype.com

The state of fluid web typography

Matej Latin takes us through the current state of fluid typography on the web: Fluid typography gives us so many opportunities to better design the reading experiences on the web but, at the same time, it introduces problems of font sizes scaling uncontrollably and potential accessibility issues. Is fluid web typography ready to be used? TLDR: No, it’s not ready. But you should still read the article, which has a great breakdown of pros and cons of fluid typography and other typography approaches.

read more

freeCodeCamp Icon freeCodeCamp

CSS rules that will make your life easier

This is a solid set of recommendations from Nick Gard that will help you keep your CSS in order and in good shape. There’s a lot of rules that relate to accessibility, others to consistency, and some just to simple maintainability, but all are good to at least consider. After years of writing and maintaining a couple of very large web projects and numerous smaller ones, I have developed some heuristics for writing maintainable CSS. I have used BEM, SMACSS, and CSS Modules for naming, though this article is not about naming, per se. (I tend to use a mix of atomic classes and BEM-ish naming.) This article is more about the properties and values I use or avoid.

read more

CSS github.com

A truly monstrous async web chat using no JS whatsoever on the front end

This is a truly glorious hack. How do they do it? Background-images loaded via pseudoselectors + a forever-loading index page (remember Comet?). There’s a more detailed explanation of what’s going on here in the README. Hopefully doesn’t need to be said, but I’ll say it anyway just in case: don’t try this at $HOME

read more

CSS github.com

A just-add-css collection of styles to make simple websites just a little nicer

I commonly make quick demo pages or websites with simple content. For these, I don’t want to spend time styling them but don’t like the uglyness of the default styles. Water.css is a css framework that doesn’t require any classes. You just include it in your and forget about it, while it silently makes everything nicer. Includes a light theme and a dark theme. Demo here.

read more

Max Stoiber mxstbr.com

Why I write CSS in JavaScript

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

CSS rsms.me

Raster – a minimal and straight-forward CSS grid system

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

Andy Bell andy-bell.design

CSS doesn’t suck

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 cathydutton.co.uk

Stepping away from Sass

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

Robin Rendle CSS-Tricks

Front-end development is not a problem to be solved

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

Scott Jehl filamentgroup.com

Inlining or caching? Both please!

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 stuffandnonsense.co.uk

Redesigning your product and website for dark mode

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

CSS webflow.com

CSS Grid sorcery! (build CSS Grid layouts visually with Webflow)

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 callmenick.com

CSS only floated labels with :placeholder-shown pseudo class

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 rachelandrew.co.uk

The way we talk about CSS

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

0:00 / 0:00