The way of writing CSS which did make me happy. 🤗
Hello 👋,
My name is Alexander Schranz (alex_s_) and I'm fulltime Webdeveloper working on the SULU CMS and did based on that created a lot of websites.
After a long time of dissatisfaction I did find some time ago a way to structure css the way which did make me happy to work with css. This repository should show the structure and code syntax I used and is mostly for me to reference new developers in the team to it.
It is a combination by the following sources:
- 📐 ITCSS develop by Harry Roberts (@csswizardry)
- 🔥 Rethinking Design Practices by Mark Dalgleish
- ⚒️ BEM a css methodology by Yandex
At this place I really want to thank Harry Roberts and Mark Dalgleish as they were a great inspiration how I write CSS today and they share a lot of there knowledge ❤️. You definitely should follow them on Twitter.
Table of Contents
- Introduction
- ITCSS
- Objects (Rethinking Design Practices)
- BEM
- Conclusion
The directory structure you will find in the src directory comes
from ITCSS
which was build by Harry Roberts (csswizardry)
a Consultant Web Performance Engineer.
I can really recommend to read the blog on xfive.co to get more detail. Another example repository beside this one from the developer of ITCSS Harry Roberts can be found on github.com/inuitcss.
But here a short overview about the directory structure or how they are called in ITCSS "Layers":
(Source: xfive.co)
The settings will just define scss variables like font-sizes,
grid-gaps, font-families and other things. Actually this
scss files will generate zero line of css code.
Common Examples:
More Examples:
Tools are function or mixins we use in our code. For example mixins to make media queries easier or how to set a font size on the elements. so this function and mixins are just define to be reused in the other layers. Also this layer should output 0 lines of code.
Common Examples:
- Nothing listed
More Examples:
Generic is the first layer which will actually output any css
it will, in this layer basic things like box-sizing, reset
or normalize css are defined.
Common Examples:
- _reset.scss or _normalize.scss
- _box-sizing.scss
More Examples:
Elements define the basic styling of any tag its important here that no class selectors are used inside this layer.
Common Examples:
More Examples:
The difference between objects and components are sometimes hard to understand if you were new to CSS methodologies. If you are familiar with SMACSS you can see them as layout components. So objects are used to define the spaces between your other components. They work most with margins, width, display and similar layout css attributes. Things like font-sizes, colors, backgrounds, should in my opinion be not part of any objects component.
Beside the most common media object I can recommend Mark Dalgleish talk about Rethinking Design Patterns in the Objects section we will tak more about them.
Common Examples:
- _media.scss
- _grid.scss
- _container.scss
- _stack.scss
- _inline.scss
- _animations.scss
The components is the layer where we mostly will write the css in project. As in this layer we define how the navigation, footer, header and other components will look like. Its very important that components itself do not define any spaces around them. Have here a look at Mark Dalgleish Talk about Rethinking Design Practices.
Common Examples:
More Examples:
- _pagination.scss
- _slider.scss
The utilities is the last layer of ITCSS it contains utility and helper classes. Most common used to hide elements or some utility classes
Common Examples:
More Examples:
- _space.scss
Object or layout components are one of the important things inside a project if false used the whole project could be a mess. Here I will list my most used object or layout components which every project could profit from.
The container exist in mostly every common CSS Framework for
example Bootstrap.
The task of a container object is to center content and give space
to it to the screen.
This is mostly done to keep content readable because if the text
is too long in one line it is not longer readable to the user.
Grid is also one of the most common object in CSS Framework. Mostly today is worked with 12-column grid. Most designers should keep here in mind that this 12-column grid is not only available over the full width of the page. Also a 12 column grid can be nested or is also available inside a container.
In my case I created my own grid which has no spaces at top and bottom and just inside gaps. Also the width of the grid items are controlled over separated width classes as they are reusable on other none grid elements.
The media object was first published by Nicole Sullivan on her blog it is a reusable pattern for an object which has fixed with (media) beside content (mostly text).
The container which has the media inside it will shrink the minimal size it has and the container with the content will grow the max size it gets. This pattern is common used on social media platform where profile images has fixed width and the text content can grow the size of its parent container.
The media object implementation can also be found on the CSS-Tricks Blogpost here
The stack is an object which will make clear that all child elements of them have the same space in between. It can has additional modifiers so the gap between the elements can be configured over them. The stack does not have any effects on horizontal spacing to other elements just the vertical space between the child elements in it.
This is object is also part of Mark Dalgleish Layout Components in his talk about Rethinking Design Practices (Stack Component 13:00).
The inline object make it easy to work with components which has a dynamic width. The inline object just make sure that all components which are in there have the same space between them vertical and horizontal. Like the other object and components it will not have any space out of it.
This is object is also part of Mark Dalgleish Layout Components in his talk about Rethinking Design Practices (Inline Component 13:50).
Beside the structuring I use the widely spreaded BEM
syntax to write my component. In most cases I try to avoid the
Modifiers as I think its better to have different block elements
then uncompatible modifiers. I common mistake I see here is for
example having one teaser BEM css with a lot of modifiers
instead of having different BEM teasers like teaser-small, teaser-big.
If you look at example repository from Harry Roberts on Github. You see is also using the BEM syntax to create to write its components. But there is also a small prefix in front of every components, object, utility class.
o-forobjectse.g.:o-gridc-forcomponentse.g.:c-buttonu-forutilitiese.g.:u-none
Think this makes also reviews of the code easier. So you can easier find errors that object define design instead of just layout or that components accidentally adding spacing around them instead of using a object / layout component for it. Linters could also make sure that 2 component classes are not used on the same element to avoid strange side effects.
See here also the Blog Post ITCSS with namespaces from Harry Roberts.
The conclusion of my experience yet there a lot of principles and great people out there in the web community which did share us great reusable ways to build our CSS, so we should use them and try to improve them for our way to write CSS.
What I have to say to the end of this article, I hope I could give you a great overview about how I write CSS and maybe you could find here some inspiration, every feedback is welcome.
Maybe you will not use ITCSS in the future I still recommend you to use some widely share CSS Methodology (e.g.: SMACSS, OOCSS, Atomic Design, ...) or use just one as fundamental base and document your changes for it in public repository. This will help you to get other programmers easier into your codebase and help you to develop your websites faster.
Thank you for reading this!
More articles on Github from me can be found here.