We all know what CSS (not CGH Single Strand, Cascading Style Sheets ) is. A styling language (probably a programming language) capable of converting entire websites into a work of art. Just like other languages, CSS is a tool and it is a tool that sounds distant from the programming world, mainly because its design based. I personally think CSS is the bridge between designers and Programmers (even though I personally wish designers must learn CSS).
If programmers and designers as 2 different worlds CSS is the bridge between them both.
And if you imagine the Designers world as a place where everything is pretty and nothing functions 🎨;
and the Programmers world as a place where everything functions and nothing is pretty ⚙️, you're probably right.
The Myth of Natural Talent 🪄
If there is anything I know about design tools is that; sometimes they are predictable (And that's the issue). CSS is sometimes predictable.
Whenever I use CSS, for example;
.container {
margin-left: 30px !important;
}
I see the element move upwards instead of to the right. It made me think if CSS was made by the designers to punish us programmers or maybe it was filled with bugs.
There is a common conception in art (belief) that people with certain gene compositions are more inclined to be better artists than others. Personally, I still believe that it is very true (✨ write down your thoughts in the comments), but does the same apply to the skill of CSS?.
At a point in my programming journey, I actually thought that CSS was a very sophisticated, simple looking design tool that only those selected by the language were selected to master from birth.
For example, I just learnt flexbox and I am already thrilled to build landing pages. I build and style the page, turn on the Chrome Devtools (or whatever non-conformists decide to choose). Press the responsive button, set the view to mobile and after that, what my eyes behold is like a child's playroom after a busy day of play. I immediately decide to go to bed tired on what feels like frustration and exhaustion.
Developers (probably not me) have experienced this issue before. Its not new and has happened to probably every growing developer
The reality of learning CSS 🔧
The truth about skills is that they are different. Some skills only require you to learn them in a very short amount of time while some skills require consistent practice. Art and CSS are some of these skills on the latter end. The main thing we should understand regardless, is that there is no shortcut to learning a skill (except some people's ability to retain information within a short time). People whom you think are extremely good at art have a art background that makes them better and more inclined to learn. So what you think is a genetic composition is probably just environmental factors.
On the other hand, CSS is just a tool that requires consistent and resilient practice. So programmers that you think are selected from birth probably just had more practice than you.
Another aspect to learning a skill apart from learning it consistently, is learning it completely. (In the former scenario I gave above, __I never learnt about responsive design). It is very important to learn a skill completely especially if its going to stick with you throughout your developer journey. If a programmer has any issue with CSS is a function of whether he/she learnt it __completely or consistently.
If you can agree with me, consistency is required to achieve a great deal of things on this Planet 🌎
If you are a backend developer trying to build great things with frontend frameworks or maybe you have an idea that you want to bring to life but you don't have the time to use CSS. In this case it is highly advisable to use a CSS framework but this includes a learning curve of its own (even though it is not as steep as that of CSS).
Note that React JS is not a solution to your CSS problem. ReactJS philosophy is to enforce DRY principles not to make your website look like Michelangelo from the 1600s
Practical tips for learning CSS 🌱
When learning CSS it is extremely important to be consistent. How can you be consistent?. by practicing real world projects (building landing pages). Pick a design from Pinterest, Dribble or Behance. or frontend practice sites like Frontend Mentor, Frontend Practice and replicate those designs. It might be hard at first but as you continually do it, it becomes easier to replicate them. Sometimes if you can't, its perfectly alright......
The first set of websites I replicated were not for the color or typography, it was for the layout.
I suggest replicating website layouts before anything else.
Inspecting websites is also another way of learning. Understanding the layout, margins, font sizes and colors can help you reinforce your knowledge about design.
Design Websites like Pinterest, Dribble or Behance usually go extreme when it comes to UI design (that's why I feel designers should learn CSS, some designs are not easy to replicate). It is advisable you start with easy designs.
Also don't compare yourself. Comparing oneself has been the root cause of the CSS gene ideology. Life is in stages and men are in sizes. Comparing oneself is a form of foolishness in my part. Working hard without comparing your achievements another person is a sure-fire way to achieve to your goals on time.
Also know that you can never finish learning CSS. New stuff keeps coming up and new tips and tricks continue to be found. So instead of me insisting that you should be updated, I insist that you should look up for tips and tricks that can help you work better on the long run.
Also engage the community and seek help when needed and also do the same thing for others. Give others help when they need it.
In conclusion, CSS gene is a myth and attaining mastery at CSS requires consistent practice and complete learning.
Top comments (1)
Nice work, Dami. Also, I agree that there's a group of people who are more inclined to art and the concept of design but who am I kidding 🙂↕️. Like I used to say (past tense) design is NOT art. So even someone with an art background could fumble / make mistakes when CSS is involved