We've all been there: lookin' a thousands line spaghetti code of CSS, scrolling up and down, trying to find all the declarations, which override each other here and there, and almost cry when we find out that changing one thing affects a lot more page elements than we expected. (In the meantime we mumble some angry words about the previous developer of the file and sometimes we realize that we are talking about ourselves…)

Working with / on open source tools teaches us, that we do not work alone. So it is necessary to write code which is easy to understand and easy to modify. This way we help other developers or our-future-selves to work more efficiently and enjoyable.

Furthermore, well structured code is not just easier to maintain but can help reducing our file size (less override, less comment etc.).

PHP and JS developers have their coding standards for a long time in order to help them to reach these goals. But since 2013 Drupal has CSS coding standards too, including formatting guidelines, Drupal 8 CSS architecture and file organization rules. Since the guide is based on new techniques like OOCSS, SMACSS and BEM, it is up to date and useful to know.

This session will show you how to implement the ideas of the CSS coding standards and mentioned techniques in your everyday frontend work. We will discuss CSS/Sass organization, layout patterns and design components.