I have earlier on written about why so many developers fear CSS. This is often based on either little to no knowledge or outdated knowledge. Can we help overcome the fear with new knowledge? Let us find out!

CSS Now 🎉

This will be pretty much like a weather forecast. We must first see how the weather is right now. From there we can look into how the weather will be the rest of the week. Okay, maybe this metaphor is too much. You get the point.

The Web Is Everywhere!

Oh no, the days of desktop screens in specific dimensions are long gone. A lot of you have heard about media queries. If you want to attack screens from a certain size, you could do it this way @media screen and (min-width: 600px). But you could also aim for orientation of the screen like this @media screen and (orientation: landscape). And with specific combinations, we could have an Apple Watch as a target! Easy! So we shouldn't really fear, that we have to aim for different devices these days.

Resets

When you work with CSS, you will quickly find out, that the browsers default styling are not the same. There are different ways to deal with those. The two most popular are Reset CSS and Normalize.css. The Reset CSS will wipe out all built-in styling for HTML elements. Normalize.css removes browser inconsistencies for HTML elements. Instead of remove everything like CSS Reset, Normalize.css will preserve some useful defaults. I pretty much always use Normalize.css.

Preprocessors

This was an extremely hot topic a few year ago. A CSS preprocessor lets you generate CSS from an unique syntax with features such as mixins, functions, nesting, inheritance and so on. It will (subjectively) make the code easier to read and maintain. It was a hot topic, and the fire is still burning. We have just gotten used to it being there. We are still using Sass, Less and PostCSS. I myself am very happy for Sass with SCSS syntax and PostCSS. But I kinda see the same story repeating with ECMAScript and jQuery - now with CSS and preprocessors. CSS have now support for variables called CSS custom properties. We will properly see CSS develop in the direction of preprocessors.

Flexbox and Grid

Jøsses (Danish), the fire is getting bigger and stronger! We have properly all heard about CSS Flexbox and CSS Grid. They are both used for layout - but what is the difference? The main difference between Grid and Flexbox is that Grid is two-dimensional and Flexbox is one-dimensional. With grid you can handle both columns and rows and with Flexbox you can either handle a column or a row. The way I see it is, that you should use Grid for the big layout of your page, and that you should use Flexbox for handling the content of your components. Don’t forget that it is super easy centering things with Flexbox nowadays. This example both centers horizontally and vertically.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Architecture

One of the things that developers still are struggling with is file structure of their code base. With Sass you can @import your files, and in that way make a file system. We also now have ITCSS, which stands for Inverted Triangle CSS. It is an architecture that helps you to organize your project CSS files. The concept is that we should not output any CSS in the first 2 layers, then we specify the global selectors and get more and more specific. We then don’t have to make dumb overrides with !important. With this structure, it also gives a good understanding of how the cascading and inheritance work.

CSS Future 🚀

I am by no means a fortune teller. This is just me rambling on. But we know, that the web is spreading to weird devices. We will properly have to deal with that in the future. We are slowly turning towards CSS instead of preprocessors. What will the future bring us? Let us find out!

CSS Properties

CSS is getting stronger than ever. They are adding new properties and values all the time. A new value that I am waiting for to be supported better is display: contents. I love the idea behind this value. display: contents causes the children of an element to appear as if they were direct children of the element's parent. We are then ignoring the element itself. This is especially useful on list elements. I am also waiting for properties like conic-gradient() and media queries level 5. It has so many new features like light-level.

Variable Fonts

I am not a font expert, but this sounds really cool. Variable fonts enables different variations of a typeface to be incorporated into a single file. Then you don't have to have separate font files for every weight or style. We can customize the fonts with font-variation-settings that allows values like wght (weight), wdth (width), ital (italic), slnt (slant/oblique) and you can customize in different other ways. You can look at this guide.

.container {
  font-weight: 400;
}

.container {
  font-variation-settings: 'wght' 400;
}

.container {
  font-variation-settings: 'wght' var(--weight);
}

CSS Houdini

Okay, this is really interesting. Houdini CSS is basically a new collection of browser APIs, which allows you to gain more access to your browser’s CSS engine. We can access these APIs through JavaScript. This new concept is a new W3C task force, whose ultimate goal is to make browser support issues go away forever. Houdini CSS currently has 7 APIs, that each will deal with a specific problem. I know little to nothing about this, but I will definitely try it out!

These are my own little thoughts about CSS. I don't know everything about it. But I like to hand out some knowledge nuggets 🐔

If you are not doing what you love, you are wasting your time.

— Steffen Pedersen 🌚 (@mrsteffenp) June 10, 2019

Thank you for your time!

If you liked this, then please ❤️ and follow me on Twitter.