DEV Community

loading...

What is the biggest mistake new developers make when learning CSS?

Seth Corker
My main focus is JavaScript specialising in frontend UI with React. I like to explore different frameworks and technologies in my spare time. Learning languages (programming and real life) is a blast.
・1 min read

When I speak with some developers they often describe CSS as if they are fighting a battle. They managed to outmanoeuvre CSS and come out on top.

Peter Griffin from family guy trying to adjust blinds

CSS can be challenging when your just starting but it's even difficult for long time programmers. Read about what I think some challenges are here.

The biggest challenge I found when learning was positioning elements. It's gotten much simpler with the advent of Flexbox and Grid and I'm happy about that. The mix of position: relative and float: left spanning multiple elements was very hard to get right as a beginner.

What do you think the biggest mistake new developers make when learning CSS?

Discussion (21)

Collapse
alohci profile image
Nicholas Stimpson • Edited

Learning from cookbooks or frameworks rather than learning concepts. The canvas; the viewport; the cascade; the initial containing block; the line box and its strut; the block and inline formatting contexts; specified, computed, resolved, used and actual values; all these things should be part of CSS 101.

Collapse
darthknoppix profile image
Seth Corker Author

Great points, I think cascading is the most powerful and misunderstood concepts in CSS. I know of developers new to CSS who try and wrestle with cascading and force styles using !important or using ids instead of class selectors.

Collapse
alohci profile image
Nicholas Stimpson

Yes. I think there's a couple of difficulties with the cascade, not only for beginners but even for intermediate CSS devs. The first is that you have to understand it in its entirety to be able to use it effectively. The other is there are very few guides on how to choose complex selectors to exploit specificity to your advantage. The mechanics of specificity is widely described, but there's very little about why it can work so well if it's used correctly.

Collapse
websmyth profile image
Dave Smyth

I worked with CSS for a long time before I actually learned what the principles behind it were. The cascade, specificity, inheritance and box model are crucial to understanding how and why CSS works (or doesn’t work).

You’re right about Flexbox and Grid making things a lot easier. As I get longer in the CSS-tooth, the importance of using the right units is becoming clearer, but that’s quite a large topic and context-specific.

Collapse
darthknoppix profile image
Seth Corker Author

Interesting to hear how your understanding evolved over time, I think I had a similar experience.

With regards to units, I see beginners using pixels for everything! Do you have any tips on choosing which units to use and why?

Collapse
websmyth profile image
Dave Smyth

Such a big topic! That said...

Fonts set with rem are easier to control than em, and if you use that then em becomes a really handy method of specifying space around those elements. I’ve been experimenting with variations on font-size: calc(1rem + 0.3vw); as a way of setting font sizes that don’t need media queries.

Then there are things like trying to use max-width instead of width etc. Really depends on the context. 🙌

Thread Thread
darthknoppix profile image
Seth Corker Author

I know it’s a big topic but thanks for sharing those great tips. The font-size calculation looks great.

I’m loving vw and vh units at the moment for making things more responsive.

Collapse
martinhaeusler profile image
Martin Häusler

When it comes to CSS, in my experience, less is more. When experimenting, and a setting does seemingly nothing at first glance, DON'T just leave it there, remove it. Otherwise it may come back later to bite you, when things don't work as expected and you have no idea why.

Collapse
darthknoppix profile image
Seth Corker Author

Well said. I try to follow this idea too, I’ve definitely cleaned up CSS that has a been cobbled together over time and has properties that don’t have any effect.

Collapse
ryanallmad profile image
ryanAllMad

I think it's skipping past the inheritance lessons (pretty much what I did). Learning CSS is so fun because you can make things look so cool and animate things etc, but from personal experience, it isn't until you begin to understand the inheritance properties of styles that you begin to master layout. So, it's boring but pay close attention to your child elements in HTML and read up on how they inherit their parent's properties.

Collapse
darthknoppix profile image
Seth Corker Author

That’s a great tip!
The boring fundamentals are easy to skip but hinder your understanding down the road.

Collapse
ryanallmad profile image
ryanAllMad

💯!!

Collapse
this_frankie profile image
Frankie

The hardest thing for me was the framework to actual css transfer. I was taught bootstrap, as I’m sure a lot of junior devs are, but I run into other junior devs who haven’t learned (or don’t want to learn) how to do those same things with regular css. It seems to be hard to break away from a library that has everything, even though you only need one thing from it.

Collapse
darthknoppix profile image
Seth Corker Author

That’s really interesting, I’ve heard of beginners learning React before fully understanding JS and HTML.

I think the fundamentals of CSS are essential, you fully appreciate what a framework like bootstrap does for you when you’ve tried to write things from scratch.

Collapse
this_frankie profile image
Frankie

I have heard that too, and I think it leads to the same issue. It’s okay to know how to code in React/Bootstrap, but if you don’t know the why/how, you may be hindering yourself. When I was self teaching myself (shout out to freeCodeCamp) there was a large focus on jQuery and Bootstrap 4 (when it was still in beta). I do think though that it is beneficial to start with something that lowers the barriers to entry. So I don’t know, it’s a give and a take I guess.

Thread Thread
darthknoppix profile image
Seth Corker Author • Edited

Definitely, I think jQuery made working with the DOM easy to get started compared with plain JS. It’s nice to get a head start and feel productive.

I think if you go down that route then it’s a good idea to invest in some fundamentals after the fact. It makes it much easier to pick up new frameworks with a knowledge of plain JS and CSS if you go for a job that requires something different.

Collapse
justgage profile image
Gage

I'm not sure this is a beginner thing, but I think people never learning about functional CSS is a crying shame.

Collapse
darthknoppix profile image
Seth Corker Author

Are there any resources or frameworks you recommend?

I know tachyons and tailwind are some popular CSS frameworks which make use of functional CSS.

Collapse
justgage profile image
Gage

these videos are good place to start. youtu.be/uHVqbCPnOwU
youtu.be/BeZbMx9y1FE

I've used. Tachyons and tailwind and I have to say tayland is probably a little better at this point although the creator of tachyons has a really great article that I link below. Also forgot to mention that the Tailwind docs are awesome.

mrmrs.cc/writing/scalable-css/

Collapse
kylefilegriffin profile image
Kyle Griffin • Edited

Being from the UK, I have been told off by non-technical personnel for alternating between "color" and "colour" when in a sentence. That's because "colour" isn't in CSS and as soon as I am talking about CSS color, I will use the correct spelling of the property.

So for new developers, make sure your properties are spelt correctly, especially when in context.

Collapse
darthknoppix profile image
Seth Corker Author

That’s definitely something English speakers have to be aware of when using CSS and even a lot of tools localised to the US.
Colour is spelt with a ‘u’ in the U.K., NZ, AU, etc.