When someone asks me to rate myself on HTML, CSS and JavaScript from 1 to 10 (10 being the highest), CSS always has the lowest rating. However, this was not the case always.. When I was new to web development, CSS was all about applying font styles and colours to HTML. With that thought in mind, I went for an interview and was asked to rate myself on the 3 pillars of Web Development. Confidently, I said 8 (highest among the 3) for CSS, much to the interviewers' surprise. What followed was a fat bunch of questions about position, display, grid, box-model, alignment and many more (obviously not a single one on colours and font styles :( ). I was muddled to a point where I started questioning myself on what era of CSS was I referring to when I said 8/10. So, I guess it won't be wrong to say that I've learned CSS the hard way. Though the learning hasn't stopped (no way!) but I am definitely more informed about its power and usage than I was before.
I have been using CSS in all my projects (not like I have a choice). Sometimes I love it, and sometimes I don't. I like things to be orderly, and CSS (IMO) is very chaotic. But again, it's not a programming language. It is a bunch of rules (some say its more of a constraint language), which helps in giving your page a layout. Needless to say the look and feel of a web page are very important. A major part of why I find CSS tough is because I have never really given much time to understand it. May be because everyday there is a new JavaScript framework that pops up. And I have to join the race of how quickly I can add it to my resume.
However, with time and sometimes the need of the hour, I have tried to understand how CSS actually works. How we can position elements to make them behave in a certain way, be it on a desktop or a mobile. We have a lot of expectations from our CSS and yet we don't know it well enough.
There are some CSS properties that still make me very nervous but are extremely important. Some of them might work only when combined with others - then why are they two different properties? Like "background" and "colour" should always be set together but still need to be declared separately.
Here are some of the CSS properties that have always hated me (and vice versa):
position: absolute;
display: block/inline/inline-block;
margin-left: 20px vs left: 20px;
#sidebar h2 vs #sidebar.h2 vs #sidebar + h2 vs #sidebar > h2;
p + h2 vs div.post p + h2 vs .post h1 + p:first-line;
Intense right? Beyond these fundamental concepts (which now I have wrapped my head around), there are multiple others that we need to know to master CSS.
To name a few:
- Building a layout with a responsive design
- Mastering CSS 'position'
- Using pseudo selectors and classes to be very specific about the elements you want to style (although specificity can be your worst nightmare when it starts skyrocketing, so we need to be very careful)
- Style overriding rules when multiple CSS files are used
- CSS Grids and Tables
- Media Queries and breakpoints
You may check out this article to see others..
There is another functionality you need to factor in to make sure your work looks consistent on all browsers: Cross browser compatibility! Honestly, I can't remember the last time I built an application that worked seamlessly on all browsers in the first attempt. There were always some tweaks/additions that needed to be done. For example to apply animation to an element like so: "transform: rotate(60deg)", this alone is not good enough. You need to check out the pretty looking CSS below:
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
Add these prefixes and you are good to go.
Just so you know -
-webkit- Chrome, Safari, newer versions of Opera, almost all iOS browsers,
-moz- Firefox,
-o- Old versions of Opera,
-ms- Microsoft Edge and Internet Explorer.
Some of the browsers simply gave up on CSS and refused to interpret it no matter what (I hope IE is not listening). But recent browsers and their updated versions are much smarter and have a better understanding of how to render CSS. This whole browser incompatibility is the reason video tags (for example) must look like -
<video id="video" controls preload="metadata" poster="img/poster.jpg">
<source src="video/sample_clip.mp4" type="video/mp4">
<source src="video/sample_clip.webm" type="video/webm">
<!-- Offer download -->
<p>Your browser does not support HTML5 video; here is a link to
<a href="video/sample_clip.mp4">view the video</a> directly.</p>
</video>
We simply add a download option in case the browser cannot read video tags. Similarly, we need to make sure we either cover all edge cases or at least have a fallback when something does not work.
Last but not the least: Keep you CSS clean... because if you don't, it will affect browser performance. Yes, CSS is render blocking. Just how the browser has to create a DOM to make the document, it also has to create the CSSOM to apply styles to it. Both of them put together, is what you are seeing right now. If we put it in order, it looks something like this:
CSSOM -> render tree -> layout -> painting
Painting is the last part and it is done pixel by pixel. So, if we have carelessly put 'expensive' styles in our CSS, the browser will have a lot of work to do and it will take revenge by hiking up the loading time of the page. In case you are wondering what I mean by 'expensive' CSS styles, do have a look at this.
The idea here though is not to prove how difficult CSS is, but in a nut shell:
- To remind ourselves how powerful it is.
- It can be mastered if we really give it time.
- It makes your page look beautiful so why not write it the same way - clean CSS.
- In order to learn some CSS concepts, they need to be implemented in actuality, otherwise its a life-long struggle.
- Our document tree, CSS and the browser go hand in hand so we have to be careful while writing our CSS.
- Lastly, a big shout out to people who are struggling with CSS: You are not alone!
Happy styling :)
References:
https://www.tentononline.com/is-css-difficult/
https://news.ycombinator.com/item?id=19021719
https://css-tricks.com/browser-painting-and-considerations-for-web-performance/
https://www.smashingmagazine.com/mastering-css-principles-comprehensive-reference-guide/
Top comments (3)
What a great discussion. As a new developer, I feel sometimes that the sea of CSS is so endless. Pseudo selector vs pseudo elements. Specificity..am I right?! Lol I've been writing CSS for a little while and there are those ah-haaaaa moments where you get it. Constantly practicing positioning and layout. Writing the wildest declarations to make things work. Then you have to go and clean up your mess when finished...ahh the life. But we keep it moving! Thanks for this.
CSS is super easy. Until one thing breaks and then true to its name of 'cascading' everything breaks ONE BY ONE.
I dont think CSS is super easy. But yes, it takes time to understand what exactly is happening especially when you are too busy to do a tutorial on it.