It`s no news that CSS has evolved along the way and has become more powerful nowadays. Keeping up to date and staying close to new tools and techniques is important for front-end developer. So in this post I have gathered 40+ Helpful CSS Articles & Tutorials to keep your eye on in 2019.

What is Modular CSS?

Modular CSS is a collection of principles for writing code that is performant and maintainable at scale. It originated with developers at Yahoo and Yandex as a way to address the challenges of maintaining a large codebase. Some of the guidelines were controversial when introduced, but have since come to be recognized as best practices.

The CSS Paint API

The CSS Paint API is extremely exciting, not only for what it is, but what it represents, which is the beginning of a very exciting time for CSS. Let’s go over what it is, why we have it and how to start using it.

New CSS Logical Properties!

Most of us developers used to think in terms of left and right, top and bottom. This is because in the early days of the internet, it was meant mostly for uploading documents, and not for the complex website structures we know today. This is the reason that no one considered the needs of multiple language websites.

Using DevTools to understand modern layout techniques

The modern layouts triple team of Flexbox, Grid and Box alignment introduces certain concepts that may be harder to visualise than previous layout methods. And this is where Firefox DevTools, IMHO, does a great job of facilitating that visualisation.

A CSS Venn Diagram

Adrian Roselli has made a series of rather complex Venn diagrams using nothing but CSS. With a combination of the Firefox dev inspector, plus a mixture of CSS Grid and the shape-outside property, it’s possible to do this and without a ton of hacks, too.

A look at CSS Resets in 2018

In order to deal with the inconsistencies between user agent stylesheets, CSS resets were born. A CSS reset is a set of styles applied to a page before any other custom styles, with the purpose of creating a more standardised base between browsers.

CSS and Network Performance

CSS is critical to rendering a page—a browser will not begin rendering until all CSS has been found, downloaded, and parsed—so it is imperative that we get it onto a user’s device as fast as we possibly can. Any delays on the Critical Path affect our Start Render and leave users looking at a blank screen.

Understanding the difference between grid-template and grid-auto

With all the new properties related to CSS Grid Layout, one of the distinctions that always confused me was the difference between the grid-template-* and grid-auto-* properties.

An Introduction and Guide to the CSS Object Model

If you’ve been writing JavaScript for some time now, it’s almost certain you’ve written some scripts dealing with the Document Object Model (DOM). DOM scripting takes advantage of the fact that a web page opens up a set of APIs (or interfaces) so you can manipulate and otherwise deal with elements on a page.

CSS Border-Radius Can Do That?

This is such a cool technique that he also developed a tiny web app called Fancy-Border-Radius to see how those values work in practice. It lets you manipulate the shape in any which way you want and then copy and paste that code straight into your designs.

Lazy Loading Images – The Complete Guide

Images are critical for every website and application today. Whether it is marketing banners, product images or logos, it is impossible to imagine a website without images. Sadly though, images are large in size making them the single biggest contributor to the page size.

Having fun with link hover effects

I have no idea if an animated squiggle makes for a good user experience and, frankly, that’s not the point of this post. The point is that The Outline had a fun idea with a slick CSS implementation.

Your Body Text Is Too Small

Body text is the key component in communicating the main bulk of a message or story, and it’s probably the most important element on a website, even if people sometimes read just the headlines.

Practical CSS Scroll Snapping

CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling. It’s great for building interactions like this one.

How to create a logo that responds to its own aspect ratio

There are quite a few articles on the web that deal with responsive logos. The most popular example might be the Responsive Logos website that shows some very well known logos in different variations for different screen sizes.

A Strategy Guide To CSS Custom Properties

Dynamic properties provide opportunities for new creative ideas, but also the potential to add complexity to CSS. To get the most out of them, we might need a strategy for how we write and structure CSS with custom properties.

Solved with CSS! Dropdown Menus

A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites.

Scroll to the future

Most of the web pages do not fit on a single screen, so the ability to scroll information is taken for granted by all users. For front-end developers and UX designers, though, implementing scrolling experiences that work well across browsers, fit nicely into a design, and still perform well, can be a challenge.

State of Houdini

In this talk, we look at the overall structure of the Houdini effort and take a closer look at CSS Paint, Animation Worklets and Custom Layout API. We can get a taste of what the future holds: An ecosystem of modules that bring powerful effects from the shelf to your app.

Managing Flow and Rhythm with CSS Custom Properties

An important part of designing user interfaces is creating consistent vertical rhythm between elements. Creating consistent, predictable space doesn’t just make your web pages and views look better, but it can also improve the scan-ability.

Responsive Images on the Apple Watch

There’s a browser on the Apple Watch now. Apple has some experience shepherding a new class of radically smaller viewports into common use on the web; iPhone WebKit brought us

Braces to Pixels

Hopefully this has removed some of the mystery from how CSS goes from the braces you’ve written to rendered pixels in your browser. In this leg of our journey, we discussed how CSS is parsed, how values are computed, and how the cascade actually works. Then we dove into a discussion of layout, painting, and composition.

Fast load times

When you’re building a modern web experience, it’s important to measure, optimize, and monitor if you’re to get fast and stay fast. Performance plays a significant role in the success of any online venture, as high performing sites engage and retain users better than poorly performing ones.

Editorial Layouts, Floats, and CSS Grid

Rob Weychert shows how aligning floated elements to an established grid can be a real challenge, since floats aren’t compatible with CSS Grid.

Redesigning your product and website for dark mode

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.

5 CSS tips you didn’t know you needed

Having worked in web development agencies over the years, I’ve picked up some tips and tricks along the way. There are some things that I use day to day, that I barely even think about.

Concise Media Queries with CSS Grid

Putting things on top of other things

This is a post about stacking contexts: what they are, when they happen, and why.

How to Use the Animation Inspector in Chrome DevTools

Next time you’re putting together some CSS3-based animations you might find it helpful to jump into Chrome DevTools and take advantage of its animation inspection and tweaking features. In this quick tip we’ll give you a rundown of which animation dev tools are available in Chrome, how to access them, and what they can do for you.

Creating horizontal scrolling containers the right way [CSS Grid]

How the flexibility of CSS Grid can help implement a horizontal scrolling component while dealing with some of the pitfalls that comes with it.

Time-saving CSS techniques to create responsive images

As a web developer, there is a high probability that you have encountered the two enemies of this article: images and deadlines. Sometimes, for some reasons, your images won’t fit the layout and you don’t want to wrap your head around this for hours.

Changes on CSS Grid Layout in percentages and indefinite height

A long story on how percentage work on CSS in general and in CSS Grid Layout row tracks and gutters particularly.

On Switching from HEX & RGB to HSL

HSL is a very powerful color format, especially when combined with other CSS features like CSS Variables.

Stuff you can do with pointer-events

Pointer-events is mostly used to bypass click events on an element. But did you know you can reset the pointer events of descendant elements? This allows us to do some interesting things.

Building the Google Photos Web UI

A technical in-depth peek under the hood of how the web version of Google Photos works.

CSS Grid Level 2: Here Comes Subgrid

CSS Grid Level 2 is already in the process of being specified, and the main feature of this level of the spec is to bring us subgrid. In this article, Rachel Andrew explains the new features.

What is the CSS ‘ch’ Unit?

Eric A. Meyer gives a quick introduction to the ch unit.

Level up your CSS selector skills

Math and front-end

Mathematics may seem like something that is far from the creative visual aspect of web design and development but it does have a number of practical applications, so why not brush off that high school math textbook of yours and see if there is anything in there that can inspire you to explore CSS in ways you never thought of before?

Unicode Patterns

CSS has its limit but I really love the way it is and I’m sure there are more beautiful things to be discovered.

How to create pure CSS illustrations and animate them

In this series, we’ll learn how to create three CSS illustrations, ranging from simple to complex. We’ll learn the basics of CSS animations and how to use them to animate our illustrations. Along the way, we’ll find out what concepts, tools and techniques can help speed up our workflow.

Designing with Ratio

This article explains some of thinking behind Ratio and introduces some aspects of the interface in greater detail.