How to get into the "from your imagination to your screen" CSS level

This article aims to help you get better at styling. All along with this article, I will change your understanding to CSS. Also, open your eyes to the keys that will unlock the next CSSlevel for you. However, this article won't be a simple course about CSSor another motivational speech that you will forget by the end of your reading. So you better practice more and keep your attention on the best practices included in this article.

The styling hidden problems

I believe that the first step to solve an issue is to find it out first. Except that problems are always tricky and tend to remain hidden. And that’s why I wrote this article: to help you find these sneaky problems and get rid of them all.

The first problem with CSS is that we often treat styling in the selector property value. In other words, we ask about the property that will make the exact effect that we want on the page while forgetting that CSSoperates based on the context of the elements of that page. Consequently, we can’t find the answer to all our questions about our styling. Don’t get me wrong please, I am not talking about the how to center a div kind of questions, but the how to make this animation or this design that I imagined kind of questions. Nevertheless, the answer isn’t ambiguous at all: the style operates as unites and you won’t find a unique property to achieve what you want. You will need a bench of properties and classes that works together. And that’s why I believe that styling isn’t just copy-paste process, but also is requires having an analytical mind.

That’s lead us to the second problem, or as I call it: the how to achieve what I imagine? problem. While the first problem is about misunderstanding CSS for a copy-paste with no analytics process, this one is about how to break down the design we have into structures, therefore creating the appropriate style. Because of this problem, we can’t find answers to all our styling questions on google: you can’t browser for example: how to make this element smaller and put it here and make it do this and do that? That’s why you need to have the ability to turn your complete design into smaller units of style that operate together to create the overall picture.

That been said, the final problem that you may face, is only about memorizing. Indeed, because we often don’t consider the analytical side of CSS we try to memorize as many properties as we can. Unfortunately, we forget them over time. What is wrong with this is that properties operate together, e.g. you may learn about ::after and ::before, but you will be confused why they don’t work because you don’t know how to use content with them. So you don’t need to memorize CSS rules only, but also how they work.

Did make you worry in the first section? Well, don’t feel sad because in the next two sections we will solve these problems together.

Long term best practices

The first thing you need to make sure of is to stop reading those bad articles about how you can be better if you learned the basics, read other people’s code and believe in yourself. You need real solutions!
The first one is to Learn CSS correctly. You can make styling easier by breaking it down into 4 main parts: Measurement units, Position properties, Forms properties, and colors properties.

1. Measurement units: are the units that CSS supports. There are two types generally: absolute and relative units. If you understood how to use them and how to convert from one to another you will be able to give the right size to your elements and to your text.
2. Position properties: are the properties used to position elements on the page. Understanding how these properties work is crucial so that you realize your project, and make it responsive. By means of these properties, you will divide your design into layers using z-index, organize them using grid or flex, or even define their absolute position.
3. Boxes properties: are the properties that either surround an element or for the element itself. For example, padding, margin, shadow, transform, keyframes, before, after, content, etc. If you learned how to use these properties you will be able to change the form of elements, add beautiful style to an element, or create animations.
4. Color properties: These are the properties related to colors like background color, color, gradient, etc.

By breaking down the CSS like above you will be able to ask good questions, and you won’t need to worry about memorizing. Instead, you will look for the exact property that will fulfill your needs.

Next, you need to learn how to divide your design into sections. This is a very important skill you must acquire. Since it will make your code cleaner by working on every single “component” alone. In fact, this brings up another issue which is that the code becomes missy as it grows up. However, if you make the code organized you won’t face spaghetti code problems like unused style, etc. To solve these issues, you need to draw on paper your page as it is divided into components. Then think of what position properties you will need to achieve that design, and what measurement units you will need to make it “responsive”. Finally, add the appropriate colors and the box properties to each element.

In a nutshell, draw your design into mockups, analyze the design and think of what properties you need, organize your code, and remember to practice so that you can improve and see how effective these practices are.

Short term tips

In this section, I am going to give you some interesting tools that can improve your productivity.

• Google Chrome inspect flex/ grid/ transform/ fonts / animations / box-shadow/ margin...: Using these tools you will be able to work with these properties easily. You just need to add into your CSS class for example:

.my-class {
   display: grid;
   /* or display: flex;*/
   animation: leftrotation;
}
.my-other-class {
  box-shadow:
}

To use animations section type Ctl+Shift+p and then look for animations.

@keyframes leftrotation {
 100% {
   transform: rotate(315deg);
 }
}

• Google Chrome style inspect and experimental CSS OverView feature: These features allows you to capture CSS of the website and check the colors and the fonts used, in addition to the unused style declarations and the media queries. You can check the entire website style.

To activate CSS OverView, go to settings by opening your inspect tools and then press F1 to get into settings. Then look for CSS OverView in the Experiments section.

• VSCode extensions: If you use Visual Studio Code,you already know about how these extensions can make your life easier. So I am going to share with you a small collection of those:
• Auto Close Tag + Auto Rename Tag
• JavaScript (ES6) code snippets + ESLint
• Prettier-Code Formatter
• Color Highlight
• Live Server

Conclusion:

I hope you enjoyed reading this article. In this conclusion I want to ask you if you have any addition related to this topic. I would love to read about some exciting methods and tools that can improve my productivity.