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.
...
For further actions, you may consider blocking this person and/or reporting abuse
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.
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
!importantor using ids instead of class selectors.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.
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.
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?
Such a big topic! That said...
Fonts set with
remare easier to control thanem, and if you use that thenembecomes a really handy method of specifying space around those elements. I’ve been experimenting with variations onfont-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-widthinstead ofwidthetc. Really depends on the context. 🙌I know it’s a big topic but thanks for sharing those great tips. The
font-sizecalculation looks great.I’m loving
vwandvhunits at the moment for making things more responsive.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.
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.
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.
That’s a great tip!
The boring fundamentals are easy to skip but hinder your understanding down the road.
💯!!
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.
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.
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.
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.
I'm not sure this is a beginner thing, but I think people never learning about functional CSS is a crying shame.
Are there any resources or frameworks you recommend?
I know tachyons and tailwind are some popular CSS frameworks which make use of functional CSS.
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/
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.
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.