Avoid these 5 beginner CSS mistakes 

Kevin is the reason the internet and RU-vid is so great. Wish there more people like him.

For those wondering why 'grey' is darker than 'darkgrey', the reasoning is that 'grey' was defined first in HTML to be 50% between black and white (fair enough), but then a bunch of colours from X11, a Unix window system, got pulled in, and there 'grey' is closer to around 75% of the way from black to white. Grey already existed at 50% and couldn't be changed, but darkgrey and lightgrey were pulled in from X11 where darkgrey is 66% and lightgrey is 83%, sensible values for a grey of 75%. If you want to abide by the X11 standards for named colours, you would instead choose 'darkgrey', 'silver', 'lightgrey' as your gradient instead, as HTML silver is very close to X11 grey. Unfortunately this is another case of 'weird CSS quirk that has to remain for backwards compatibility reasons'.

In our team we have a rule, do not style with IDs. Style with classes. We have IDs only for javascript etc.

This is the first I've heard of collapsing margins. I think I've had to work around them before but didn't understand wtf was happening. Sometimes i try to add space and nothing happens, other times i try to add a little but get a lot. Your demo showed and explained both. It makes much more sense now!

When I first learned CSS I could never get my stuff where I wanted. Using outlines to figure out what's relative to what was an absolute game changer.

Kevin, I'm a professional developer from Brazil and I've been watching you for some time. I should tell you that your content is amazing!

If you declare `display: flow-root` on an element it will prevent all descendant margins from collapsing outside of that element. There are times I find that more practical than declaring padding values.

it took me a whole year to realise that you say front end friends

You stated that we should use classes over ids for styles, which I agree with only one exception. Which is using ids just for the main content grouping containers of you website e.g. site-header, site-menu, site-content, site-footer. As these containers with these ids form the main layout and grouping of content for the pages of your site. Thus, you would mostly apply layout styles to them. Which means for these styles you would want a high specificity and would not want them to be overwritten, which is more likely if they were a class. Then for any other non layout styles like your example with the background color red which is applied to a header and used in other areas of your site you could extract into a class, as you demonstrated and also apply that with a class attribute to any of the main content grouping containers I previously mentioned.

Your explanation of parent vs child control for grid vs flexbox is a great way to think about which one to use, which has been a struggle for me. Thanks!

CSS positioning is one of the most frustrating things I've had to deal with in UI development. Although I'm doing better now as I learn more I still get stuck sometimes. Thanks, Kevin, for helping to clear up some of the confusion!

Kevin, after I found your channel, I've been learning new thing every video! Thank you for all knowlegde shared. You're the best!

Regarding the position containing block; that's one of the first things I mention to people when I teach colleagues CSS, since as you said, it's something that's not too much talked about. You may stumble upon or you never find it. Back then, for me it was a game changer to finally understand it.

position absolute is great for fixed size containers, eg. preview images inside of which you want a few buttons to pop up.

I’m colorblind, so I always have a hard time finding good colors. I use TailwindCSS’ color scheme as it’s a really great way to find the right colors and shades. I even use them when I’m working on projects without Tailwind

I knew all of this but i really enjoy the way you are explaining these advices and good practices

long time riddle got answered today. Thanky you Kevin

Many problems that occur in CSS layouts are due to browsers vendors not providing a way to access font metadata so CSS can allow consistent spacing of text. There are work-around approaches but the margin collapse issues can break them, which force even more hackish work-around approaches. I wish everyone would focus on demanding features from the browser vendors and HTML/CSS/DOM protocols instead of doubling down on bad frameworks or unnecessarily bloated HTML. 😥

You can also make the counter arguement to your very last tip about specificity and whether or not you specify the #ID or a class. The key takeaway really is knowing what you want to do and apply the correct one. It might be the case that you want to style exactly that element and never any other element in which case using # would be exactly what you should be using.

A great way to think about collapsing margins is remembering the good old covid times... Back then we should keep a distance of 2m, so everyone walks around with a ""margin" of 2m. Once you approach someone you dont stop at 4m as the sum of your margins suggests. Instead you approach up to 2m. So your 2 margins of 2m each collapsed into each other... css margins work basically the same...

when someone says ancestors in css I zone out. LOL. Love the vid. I have run into may of these

Ayo 12:50 that last word

I recall a tweet from Steven Pemberton outlining that the original point of !important was to set font sizes for legalese reasons and it was never intended to be used for anything else. Although I definitely have used it to override inline styles a bunch of times.

Might also be worth mentioning 'columns: var(--number-of-columns)' for masonry layouts, since development on this feature doesn't seem to have gone anywhere. Funnily enough, even though I would consider this an outside-in approach, I do tend to combine it with flexbox and a direction of column rather than grid.

Thanks!

Thanks Kevin.

Thank you for the great video. I struggle with positioning when I want to overlay content on top of each other. The designs are never responsive. Can I overlay content with z-index using grid or flexbox ? Or is there a way to make my code responsive while using positioning without having to use a million breakpoints?

Instead of using #​​​someid use [id=someid] now you are targeting the same element but with the specificity of an attribute selector (same as classes)

To give an element its own margin territory, put an outline 1px transparent on it.

I use an id on elements that are going to be used only once on a page. Examples of this are: navigation, sidebar, footer, header, and maybe the main content section if it has the need for a container around the entire thing. You can name your grid areas using an id and then only use the grid-area property to define where you want your layout, this should be something that you don’t change frequently and will lead to easier understanding of the page, but not only that, you can only use a name for a grid area only once if you don’t want overlapping elements. But my biggest advice for using an id is to only use the id for your selector and if you have the need to adjust the style of an element that is a child, do so with the fewest properties. Here is an example, if you have a navigation section that has different color scheme, then I would only change the color and leave the other properties alone to pick up styles from any other changes you make later on. You will start off in CSS putting more properties into each selector than necessary, but eventually you’ll see that defining the smallest number of them per selector and then using classes for the majority of styling will give you the best flexibility in your design, especially when you go back to update the page.

I've never had to deal with collapsing margins.

#1 mistake: using tailwind Jokes aside, one I've noticed a lot of JR devs doing often is overusing "height" and "width". 90% of the time, you don't want to specifically set the height or width of an element.

Hi, I encountered a strange behavior on Safari and Chrome in mobile sizes. While layout works wonderfully on these browsers in desktop sizes, when you switch to mobile sizes, the html element fails to fit and/or fixed to the bottom of the viewport. I had to use bottom: 0; for html element in case of mobile sizes. Am I missing something here?

I am currently working for a customer on a azure extension, the previous team used fluent ui (microsoft) and griffel, basically styling with typescript. Which is something I never did before. Do you have a video where you try that out and test its limitations? especially griffel

When is your book coming out Kevin???

Glad to see that I'm not a beginner now 😅

I love when ids exist on the elements, but are not styled using them. I use a plugin to inject custom styles and fighting with whatever the devs did (or worse, whatever the whacky WordPress plugin did) is a pain while I am grumbling about nobody implementing dark mode on their modern websites.

I follow you since years and I learn a lot in css because of you. But there is one point I fell behind and it is not about css, but html becoming so semantic and I'm a little lost about the main tag the article tag, the section tag etc... do somebody know a up to date article or video course, so I can refresh my mind. Thanks

sometimes a mistake can be a good thing, happy mistakes are cool.... in all the years ive been tinkering with css i still dont understand how to use grid properly

😮

Collapsing margins are weird 100%, but I think margin is way too often used anyway and the wrong decision when picking between margin and padding. I consider margin "dead space" and in most cases you get better away with padding. Plus, margin can't have background color, unlike padding can. Another big hit if you run into it and wonder why is it not going edge to edge.

stripe dropdown tutorial pleaseeeeee

It's probably a dumb question but... can't we just set * {margin: 0; box-sizing: border-box} in our css to prevent browsers from adding random default margins around to mess up woth our code? I know this is not a solution for collapsing margins, but it still takes away a lot of unnecessary complications.

huh, i've never actually considered positioning pseudo-elements relative to something other than its direct parent :o

7:46 What sane person would ever use position: absolute for a side by side layout? That's what the float and display properties and clear fixes were for. Named colors are actually good, you just need suffixes. Instead of grey use grey-lt as a starting point and work to md, dk etc. Gives you more room to expand while still using a pattern that's easy to read.

Another CSS gotcha: using a transform and then trying to use a position of fixed or sticky, since you changed the fixed positioning containing block

Theo (t3) has mentioned that he hates margin. But I've not heard his explanation of it.

Well, the id styles have bitten me a couple of times. We have an old codebase where id's were used too much for css selectors.

Please use named colors. You can look at what they look like when choosing them. Some "unexpectedness" between what you think something could be named in comparison to another color, vs what it actually looks like, does not mean that if you find a color you want you can't use it.

0:10 Link that video in the description.

Sometimes I mess up a lot while writing CSS,,, I get confused between modern css and old css !! Because I learned CSS from an old book from 2018 .When I finally stipple and see that there is a more modern and short compact version of that CSS, I'm disappointed with myself. How do I come back from this and know that the CSS I wrote already has a short and compact version? It is not always known by online search whether there is a separate website or place for this.

The coding aproach and system we are using to manipulate the DOM reminds me of a puppeteer using strings to control and move a marionette. Right now this is the only way but there has to be a better way.

Only disagree with the last one for the reasons you stated. Also i think it would promote waste code; blocks of code that may be left behind doing nothing because it was already overridden later on and the visual need was already met. Not saying one should always use IDs as selectors but if it being annoying is what they get from that, i think it would promote better practices overall, regardless of which they decide to use.

outline on css is like the console.log of javascript 😆

Other "beginner mistakes" "pros" still make: Using tailwind - or using class names that describe what they do/how they make something look like, not what they are for: ".color-red" is total bs, as is ".mb30". Something like ".nav_left" will bite you when the customer wants the menu to be at the top or somewhere else. Now you have a class name that neither reflects what it does/how it looks like NOR what it is for. Sure, changing things like this is not that difficult when the project isn't that big, but as soon as you start working on bigger projects, you'd have to get rid of those habits or you will have a hard time. Use "color-main" and whenever the customer decides to make the color a bit different (and the logo a little bit bigger), you only need to change one line in the CSS file, not hundreds of occurances in the HTML. Also do not overdefine selectors: Using "ul li" or "ul > li" is mostly already too much, except you want to explicitely style the list items inside an unordered list. But having ".nav ul li" can be shortened to ".nav li" since you will most likely do not have two different types of lists inside the navigation. This rule especially applies to element selectors (table tr td is a big no no) but if you look at your (old) stylesheets, you will most likely find selectors that can be simplified. Which leads to the next point: Never use !important: If you need to, you haven't understood selectors and their weight, or have used way too specific selectors somewhere else. As soon as you use one !important, you will have to use it again and again, even though regular selectors would be enough. Style everything to a decent looking default and only use specific classes where required. For example: always style your h1-h6 using the element selectors and only add classes to those elements where the style diverges from the default. There is absolutely no need for every h1 to have a class "headline" or for h2s to have "subheadline" or whatever. And please never do something like or i will find you and I will make you create newsletter templates that need to work in Outlook. Never just put a few (pre-defined from your framework?) breakpoints in your code and think you're done. Making something responsive while keeping the interface usable AND visually appealing isn't something that can be done in a few lines of code. And please don't just use the browser-presets for display sizes of (a few) mobile devices. Not only do an unknown amount of possible screens sizes in between those exist, you can also never be sure that someone with a 1920x1080 resolution will have their browser maximized and not have installed three toolbars that will reduce the available viewport size. Unreachable content is bad, mhkay?

Me every couple minutes watching this .. "Ohhhh, thats why"

I trying to do not use px in my layouts.

Where my OKLCHads at?

Oh, apropos! Kevin, please talk about the nonsense in Facebook's and Twitter's source code. They use CSS to compress inline formatting. 🤦‍♂ (Twitter has even a JS-based hover… 🤦‍♂ 🤦‍♂ 🤦‍♂ )

18:14 Not gonna lie, I have some nightmares with specifity and using ID‘s in CSS. Ever seen something like body #wrapper #main .image-text-box[data-attr-anchor="newsletter"] img.image-text-box-image {} What are your worst declarations you‘ve ever seen?

I am sorry. But i really love to use id's when i know that i have only one of that element. It helps my brain organize things better. I also know the thing about grid and flexbox. I learned flexbox and found it confortable and easy. I will learn also grid in the future

I always teach my juniors, to use !important for defence not for offense

I hope one day there will be CSS4 without default predefined styles on elements

You learn by making miscakes. :)_

Real CSS masters use "float"

You remind me of a friend. His parents were greek and korean

Skill issues Mans dont make mistakes I’m precise like maths.

Omg, why are people making so long intros

You speak fast I don't understand please talk slowly 💔💔

That moment when you actually read the lorem Ipsum text 🫣💦 (the flex or grid example)

[id="immaRebel"] { }