To Understand CSS, Create Stories

Starting to become proficient in CSS after working for a while on the back-end is like a request to turn a building into an art.

I have experienced lots of frustration when trying to implement a clean CSS solution and when you resort to Google search to find a solution and you are bombarded with lots of possible solution that you have no idea why it is solved the way it is solved, your comprehension and understanding level will not be optimal. That is the reason that you need to incorporate various learning strategies in order to transition such learning block.

When you are trying to learn and understand how changing one property in a CSS rule would affect the whole design, creating a story of elements is a good way to understand the interaction between elements.

For instance, suppose you have a main element and inside it has a heading and a p element like below:

<main> 
  <h1>
  <p>
</main>        

Now, at the start everyone is happy with their condition and the main tag has control of its family.

But like any youngster, the content box decides to change his appearance and she goes and buys some padding and border jewelry as follow:

{
  border: 1em solid red; 
  padding: 1em;
}        

The main is still happy about it because he still can control her within the rules of the family.

But comes a day where she claims that she needs her own privacy and space and she has a right.

So she decides to have the same width as her parents: width: 100%

And now the problem begins to surface, she no longer lives within the bounds of her family because she is using the same space as her parent but being inexperienced she can not control the outcome of her decisions.

No the main is a considerate parent and respect her decisions, Thus he offers a solution that allow her to keep her jewelries and also comply with the rules of the house. The solution would be to use:

{
  box-sizing: border-box
}        

Using this, she will be able to keep the padding and border she has recently bought but also keep her parent satisfied.

Creating stories like this would help you?gain a deeper understanding of which properties have more interaction with each other than the others and can make more informed decisions about how to apply more consistent styles on your code.