CSS Icon

CSS

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

CSS github.com

Enjoy writing CSS in your JS? Try writing JS in your CSS! 😏

First off, everything happens in your CSS file. You can layer this into your websites as you see fit. You can use this to layer on just a little bit more functionality in your CSS here and there or construct an entire page. It’s up to you! If you think this sounds crazy… just wait until you have a look at it: .item { cursor: pointer; --js:( function toggle() { this.classList.toggle('active'); } this.addEventListener('click', toggle ); ); } Play around with CJSS on Codepen, but that’s all I’d advise you to do with it (as would the author).

read more

Rachel Andrew rachelandrew.co.uk

Grid, content re-ordering and accessibility

CSS Grid is a wonderfully powerful technology, making possible incredibly complex and interesting layouts with fractions of the effort of older tools. But with great power comes great responsibility, for it is now also very easy to shoot the accessibility of your site in the foot. Author Rachel Andrew: I think this is something we sorely need to address at a CSS level. We need to provide a way to allow the tab and reading order to follow the visual order. Source order is a good default, if you are taking advantage of normal flow, a lot of the time following the source is exactly what you want. However not always, not at every breakpoint. If we don’t give people a solution for this, we will end up with a mess.

read more

The Changelog The Changelog #349

The state of CSS in 2019

We’re talking with Sacha Greif to discuss the State of CSS survey and results. CSS is evolving faster than ever. And, coming off the heels of their annual State of JavaScript survey, they’ve decided to take on the world of styles and selectors to help identify the latests patterns and trends in CSS. We talk through the history and motivations of this survey, the methodology of their data collection, the tooling involved to build and run the survey, and of course we dig deep into the survey results and talk through the insights we found most interesting.

read more

Max Böck mxb.dev

The CSS mindset

There’s a lot of CSS love & hate that flows around online, and one of the key reasons it is so polarizing is that it takes a different mental model than most other programming. Author Max Böck has put together a list of some of the items that go into that mental model: For most people who write CSS professionally, the mindset just comes naturally after a while. Many developers have that “aha!” moment when things finally start to click. It’s not just about knowing all the technical details, it’s more about a general sense of the ideas behind the language. I tried to list some of these here.

read more

Bradley Taunt bradleytaunt.com

Making tables responsive with minimal CSS

There’s still a use case for tables!! No seriously, there is. If you’d like to learn how to optimize table elements for mobile using minimal CSS, read on… My recent article, Write HTML Like It’s 1999, received far more attention than I ever expected on HackerNews. With this attention came a few comments mentioning how table elements don’t play nice with mobile devices or that it’s not possible to have a useable layout on smaller screens. This simply isn’t true.

read more

Brad Frost bradfrost.com

Reducing motion with the picture element

The prefers-reduced-motion media query is a great tool for improving accessibility and helping users with visual impairments that make animations and such hard to follow, but did you know you can use it inside a picture element with a srcset? Brad writes: This technique would definitely be helpful for posts with embedded animated GIFs in it. Authors would have to grab a static frame of a GIF as a fallback, so there’s a bit of extra work involved, but the technical execution is pretty dang straightforward. What would be even cooler is if blogging and social media services did this automatically…

read more

CodyHouse Icon CodyHouse

Benefits of CSS custom properties over Sass variables

While they may have been inspired by Sass variables, CSS custom properties are a whole other level of powerful, enabling some elegant new patterns in UI development. Just ask Sebastiano Guerriero: Are they the same? Not really! Unlike SASS variables, custom properties 1) are scoped to the element they are declared on, 2) cascade and 3) can be manipulated in JavaScript. These three features open a whole new world of possibilities. Let me show you some practical examples!

read more

CSS Wizardry Icon CSS Wizardry

Self-host your static assets

A revealing look at the costs and risks of linking out to CDN-hosted assets for common libraries. This “best practice” may be anything but, especially with today’s ease of setting up CDNs in front of your own content with tools like Cloudflare. On the practice of linking to 3rd party CDNs, Harry doesn’t hold back: There are a number of perceived benefits to doing this, but my aim later in this article is to either debunk these claims, or show how other costs vastly outweigh them.

read more

CSS joshwcomeau.com

Folding the DOM

This absolutely floored me. Beautiful step by step demonstration of creating 3D interactive effects using React and CSS, all on vanilla DOM nodes. I typically think of web effects in two dimensions, but as author Josh Comeau says: And yet, for years now, browsers have bundled in a surprisingly capable 3D CSS engine! Someone even built an experimental first-person shooter prototype using it 😮

read more

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

0:00 / 0:00