Depending on your skills and your experience, CSS coding can sometimes become a nightmare. So in this post we`ve gathered some of the most useful & obscure CSS tricks, tips, techniques and coding solutions which can improve your efficiency.

Maintainablecss

MaintainableCSS is an approach to architecting and writing CSS that helps you and your team write modular, scalable and maintainable code. If you have ever experienced pain in maintaining CSS, this book can help you avoid common problems. Whether you’re in a team of 1 or 100, I think you will find useful advice in this book. Even more so if your site is constantly evolving.

Protips

A collection of tips to help take your CSS skills pro.

Must-Watch CSS

This is a collection of well-received talks about CSS, covering topics such as CSS frameworks, Sass, SVG, animation, scalability, CSS performance, tooling, mobile tips, and more.

Changing the Cursor with CSS for Better User Experience

Still, it’s easy to overlook cursors and their impact on the user experience of our sites. Remember when we learned ::selection was a thing and every site started using it to personalize the background color of text selections? Customizing cursors is just as easy and adds that extra bit of understated flourish when used correctly.

An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements

Without getting overcomplicated with the W3C’s technical definition, a pseudo-class is basically a phantom state or specific characteristic of an element that can be targeted with CSS. A few common pseudo-classes are :link, :visited, :hover, :active, :first-child and :nth-child. There are more, and we’re going to see them all in a minute.

The Fab Four

I think I found a new way to create responsive emails, without media queries. The solution involves the CSS calc() function and the three width, min-width and max-width properties.

Optimizing for Large-Scale Displays

Serving the best possible experience at any screen size is imperative. When it comes to optimizing our content for large-scale displays, we shouldn’t stop short of common desktop resolutions. With the proper planning, we can leverage the tools already available to us when building responsive websites to scale up and adapt our content for large-scale displays.

Get to Know the CSS Object Fit and Position Properties

In this post we are going to talk about two CSS properties that not a lot of web developers know about. They are called object-fit and object-position and both have to do with styling images and video.

CSS element() function

Today, I want to share a much more awesome CSS feature. But before starting, let me warn you: the feature I’ll show is only supported in Firefox for now and no other browser vendor has shown interest with. Maybe, this could change in a near future.

CSS custom properties

When designing an application it’s a common practice to set aside a set of brand colors that will be reused to keep the look of the app consistent. Unfortunately, repeating these color values over and over again in your CSS is not only a chore, but also error prone. If, at some point, one of the colors needs to be changed, you could throw caution to the wind and “find-and-replace” all the things, but on a large enough project this could easily get dangerous.

Essential CSS Recipes

Today we are going to talk about some useful tricks in CSS. Let’s begin with…

Arttheweb

With a few lines of CSS, you too can create reusable, unifying filters for your web projects without needing to open an external program.

CSS Modules

CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

Building and shipping functional CSS

Because functional CSS places the utmost importance on tiny, reusable classes, the resultant stylesheets are necessarily free of bloat, which makes for substantially smaller file sizes. This in turns gives us much faster transfer speeds, less time and processing spent on stylesheets, and most importantly, time and money saved on the part of the end user.

How to lint your Sass/CSS properly with Stylelint

Stylesheet linting. Not many people do it. Many more people should—especially diverse teams that have a lot of hands touching the codebase. In this article I’m going to talk about why we should lint our stylesheets, and how to implement stylesheet linting into our build pipelines for both vanilla CSS and Sass.

The future of loading CSS

It’s common to bundle all of a site’s CSS into one or two resources, meaning the user downloads a large number of rules that don’t apply to the current page. This is because sites can contain many types of pages with a variety of “components”, and delivering CSS at a component level hurts performance in HTTP/1. This isn’t the case with SPDY and HTTP/2, where many smaller resources can be delivered with little overhead, and independently cached.

Finally, CSS In JavaScript! Meet CSSX

JavaScript is a wonderful language. It’s rich, it’s dynamic, and it’s so tightly coupled to the web nowadays. The concept of writing everything in JavaScript doesn’t sound so crazy anymore.

Flexbox Patterns

Flexbox is awesome, but it introduces many new concepts that can make it difficult to use. These interactive examples will show you practical ways to use it to build UI components. They start out simple and get more complex near the end. You can start using these patterns in your own code right away,