How To Boost Your CSS Learning
Here you have a few guidelines on how to understand those weird behaviors and finally get better at CSS!
Unlike many developers, I don’t have a CS degree. I studied Arts instead. I always had a flair for aesthetics. Given my background in visual arts, CSS was the language I got along with the most from the very beginning. The immediate visual response it provides was a strong incentive. I started experimenting and smashing my head against all its weird behaviors, and finally, I fell in love with it! ❤️
I want to share some concepts and tricks I gathered with my experience and helped me to get familiar with CSS so that you can better understand the logic behind this “unpredictable” language.
Expect the unexpected
The first thing we need to understand about this language is that all the rules are connected to each other. With every action, you need to expect a reaction.
There’s a strong interdependence between the different rules we write inside our documents. Often the application of one rule excludes that of another. The most common example is that static-positioned elements will ignore any given value for the properties top, right, bottom, left, and z-index.
div {
position: static; /* default from user agent style sheet */ /* these properties below won't have any effect */
top: 100px;
left: 100px;
z-index: 999999;
}
If we give any different value (e.g relative, absolute, fixed) those will be applied and relative to a target, based on the value we chose.
div {
position: fixed;
top: 100px;
left: 100px;
z-index: 1; /* it's not necessary anymore to give a huge number */ /* now they will be relative to the window */
}
This same issue also concerns the way we place our HTML elements inside the document, some container’s rules can affect its children or siblings. Take the display property as an example, with the value set to block, an element will take the entire horizontal space, pushing all the other elements to the line below. That’s the default behavior of div tag elements, to change it, you can pass an explicit display property set to be inline-block so that our elements will align horizontally.
.box {
display: inline-block; /* now the elemtens will display next to each other */
}
Here you have a joke that describes perfectly this behavior:
“Two CSS properties walk into a bar.
A barstool in a completely different bar falls over.”
Once we accept these relations between rules and elements, it’s much easier to understand why something is not working as expected.
Try, try and try again
So you don’t know how CSS works, just try it!
Try how the different combinations of rules apply in different situations, you can find out which property affects which, and the combinations that cause specific consequences.
When I started, each time I came across a cool web page that caught my eye I tried to replicate its design myself. You should try to do the same! Replicate a web page, a feature, or literally anything that comes to your mind. Practicing is the best way to learn all the little tricks and to build up your confidence, you will learn countless interesting features.
To do this quickly you can create a new “pen” on Codepen.io or prepare yourself a boilerplate with “gulp” set to serve and watch your files (here you have an example), so you can write your code and see the result immediately.
How to debug CSS?
Something that can help your learning curve is knowing how to debug CSS.
Knowing exactly how your style is going to be applied increases your development speed but it is not so easy to predict it with absolute certainty at the beginning. Often some styles don’t apply as expected so you need to try different combinations to fix the problem, and you end up going back and forth between the browser and editor, wasting a lot of time.
Fortunately, there’s a solution to this. Browsers DevTools allows us to perform changes directly on the web page (try this quick get started of Chrome DevTools). We can easily inspect the CSS rules applied to any element just by focusing on it and change them the way we prefer with an immediate visual response, so we can reach the result we like the most. Here you have a complete guide to all the features that Chrome DevTools provides.
Once you’re happy with your style, you then need to apply the same changes to your source files but if you have made quite a few changes you may not remember all of them. DevTools provides a “Changes” section which will show a summary of the lines of CSS you edit. Firefox has the best implementation of this feature, allowing you to export the changes all at once or line by line. Very handy!
The Game Changer: Flexbox
At first, my approach to layout-ing was to use position “absolute” for everything. It was an easy way to place any element exactly where I wished. But as soon as I changed the screen size everything looked wrong. So most of the time I needed to write media-queries to fix it.
When I finally came across Flex-box my way of writing CSS changed completely! Flex-box is an easy way to design fast flexible layouts, and it’s always pretty responsive. To initialize it, you need only assign the value “flex” to the display property, and from the container, you can easily distribute all the children the way you prefer.
.container {
display: flex;
justify-content: center;
align-items: center;
/* common way to center elements inside a container */
}With more complex two-dimensional layouts, Grid becomes pretty handy. It gives us a lot of freedom in the way we can position our elements, following a columns and rows system. You can decide how many rows or columns each element should take with a few simple rules, and build your grid-based layout. In the following example, we divide the space into 12 columns of the same size. Based on the class name, we can assign 2, 3, or 4 columns to an element in the layout.
.grid-col-12 {
grid-template-columns: repeat(12, minmax(0,1fr));
}.col-span-2 {
grid-column: span 2 / span 2;
}.col-span-3 {
grid-column: span 3 / span 3;
}.col-span-4 {
grid-column: span 4 / span 4;
}
These two layout systems can also work together very effectively so that we can build our responsive web pages.
Conclusion
In my opinion, every developer should have at least a basic working knowledge of CSS. In Italian, we say “l’occhio vuole la sua parte” which means that the visual effect of a project is important, it’s part of the project itself. CSS is an amazing language and once you know some little tricks it’s also very enjoyable to use.
So, stop being angry at CSS, because you don’t know what to expect, and start loving it instead! ❤️
If you are now ready to study CSS check out this guide to crack it!
List of referenced links:
