Théatre des Variétes, where dotCSS took place

dotCSS and why CSS is a big deal

Last Friday I had the privilege of attending dotCSS, a conference taking place in Paris at the Théatre des Variétés. It is an early 19th century building which provided a quiet environment for a sequence of brilliant talks.

In order to make the most of the place, the organisation asked us to keep the phones and laptops off, so everyone could enjoy the conference without distractions.

The talks were masterfully planned, with a break for food and drinks between each block, provided by the house. Ah, the French sure know how to organise events!

Cofee break snacks at dotCSS

There were some insightful lessons to be learned from the conference, some of which we really look forward to implementing in our products. I am not going to cover all the talks, but if you’re interested in reading more about them all, please head to pixelelastic’s post.

Grid all the things!

That said, once the first speaker came on, the lights in the audience slowly faded, making Rachel Andrew the centre of attention. She opened the talk on a funny note, with a couple of reminders of what dealing with CSS layouts used to be like — in summary, table hell, then float hell, then… what the hell? But no one is using these things nowadays, right? Right?

Looking at the future and smarter style sheets, Rachel introduced us to the new grid layout working draft, by comparing the code required for a series of different layout styles to flexbox and to the new grid.

If you are still struggling to understand flexbox, you’ll quickly adapt to the grid syntax, which is more straightforward to work with. However, each layout mode is adequate to different use cases. Grid will be particularly useful when reordering and distributing blocks and lists, when it is not possible to predict the number of elements.

One way or the other, I decided to give it a try with CentralDish, as I felt using grid would simplify the code in this case. For the restaurant menus, we are using flexbox to distribute the columns that contain the meal description, title, order button and price. This is what it looks like:

And a simplified version of the code with flexbox:

In this particular situation, grid makes it simpler:

The number of sizes passed to grid-template-columns represents the number of columns. The fr unit is new and means the column it refers to should take 1 fraction of the remaining space. In this case, the second column will be precisely 5rem, while the first column will occupy the remaining space.

Yeah, yeah, but what about browser support? The good news is that, according to the speaker, this will happen very soon. Since Microsoft has been one of the main drivers of this specification, IE11 and Edge already support it. Firefox, Chrome and Opera already support it under experimental flags, according to caniuse.com.

For more comprehensive grid examples, check Rachel Andrew’s presentation slides.

Andrey Sitnik talks about PostCSS to a laptop-free audience

Modular CSS (really)

Since we started modularising our code at FOODit, one of the biggest constraints has been the fact that the SCSS files included in our components are not truly modular. In fact, avoiding collisions depends a lot on each developer’s judgement, which worsens the learning curve when getting started on a new project.

Wait no longer! Andrey Sitnik’s talk on PostCSS has revealed how mature the technology is becoming, with many useful plugins that can automate our CSS workflow. Basically, it runs on top of the final CSS files and adds those bits of code that should be done by a machine rather than a human.

The plugin that solves our particular problem is postcss-modules, which allows writing simple CSS selectors in the templates and CSS without extra clutter. The plugin adds a unique suffix to the module name, so there is no way that nasty search component will accidentally acquire the styles of the search view.

In practice, if we write our searchTabs component like this:

postcss-modules will generate something like this:

And it can be used in conjunction with SASS, which means there is no migration path if we want to start using it right away. And it works pretty nicely with WebPack, which means it is pointed towards the future of the web.

Plus, the tool is maintained by him in a company called Evil Martians. You can’t go wrong with that.

“Writing CSS is not programming” — whaat?…

This was the main phrase of a great talk by Chris Eppstein, the creator of Compass and a part of the core team of SASS. In a humorous fashion, he walked us through the main reasons why most people don’t consider CSS a programming language, pointing mainly at its origins.

In the initial specification docs there is a clear intention of CSS being built for people who don’t know how to program, and this has hindered the development of the language. But who are, after all, the people who use CSS besides developers? Does not CSS take an input, transform it and result in an output? Does it not require skilful developers and architects to work with it? If it’s simple enough for anyone to use it, why is it so difficult?

Along with Daniel Eden’s talk on recovering Dropbox’s CSS from a disastrous architecture, Chris has shown us that we need to take CSS seriously: when done right, it is powerful and reusable, even if we do need the help of pre and post processors. Forgetting this fact may lead to numerous UI bugs which can quickly get out of control.

He finished by addressing the elephant in the room: is this bias against CSS the reason why most CSS developers are not considered “developers” and are usually paid less than their counterparts? And is that the reason why there are still more women working with CSS rather than any other parts of the web stack?

Chris Eppstein’s slides are an interesting read, go and get ‘em.

3D fun

After Tom Ginnattasio’s demonstration of the complexity of tri-dimensional CSS, I wanted to try it out again, since it had been a while since I played with it. For this, I attempted to recreate the letters in the façade of the Théatre, as seen in the initial photo of this post.

Warning: as this is just a quick example, it uses the webkit-text-stroke property, so it won’t work in other browsers. Sorry about that! :)

Conclusions

From everything I’ve heard, it looks like CSS is finally taking off and being considered a proper programming language. The CSS Working Group is joining efforts towards adapting it to the modern web, which means exciting new features are coming our way: particularly the Houdini project, which follows the ideas theorised in the Extensible Web Manifesto.

But there is still a long way to go, and these guys need our input and support!

There was a number of other interesting subjects tackled at dotCSS, but I will not be able to cover them all in this post, since it’s getting very long. It was loads of information for such a short day!

If you’re yearning for more info, please head to their website or to #dotCSS on Twitter.

DotJS

And stay tuned for the next post, about the sister conference, dotJS.

Inside the Théatre des Variétés