5 CSS mistakes that I see way too often 

Great tips! A word of advice on refactoring: be careful with those comma-separated selectors. If a browser doesn't recognise a selector on the list it will discard the whole rule, turning a small issue into a much bigger one. So avoid using browser-specific o any advanced / recently developed selector on those lists.

00:00 Introduction 00:25 #1 Overly complicated selectors 05:23 #2 Make your CSS readable 07:33 #3 Keep your CSS organized 10:58 #4 Refactor your CSS 13:07 #5 Removing the outline 17:24 Bonus: Text contast is too low

One trick I always use for css files with vs code is using regions. Really straight forward : /* #region _optional-name_ */ .css{} /* #endregion _optional-name_ */ Not only does this make it easier to segregate and organize your code, but vs code also allows you to collapse a region just like any JavaScript or HTML block, which in the long run helps you scroll through lengthy css files.

19:00 The BIG reason to avoid a single-line CSS is that if you work with other people using a version control system like Git, it will make your changes much harder to read. The whole line will be highlighted as changed, which makes it annoying to look for what has actually changed. The same about debugging, when you get an issue in "line 331". It's ok to use a single line CSS if it's a single rule like .hide { display: none; } although staying with one convention may be easier for your brain in the long run.

Greetings from Pakistan Kevin, im a bank teller trying really hard to change my career by learning web development and your videos have been extremely helpful for me. Keep up the good work man.

I've been guilty for removing the outline. Adding the :focus to the elements is a really neat trick. Also, I never noticed the contrast warning in Dev tools. Great tutorial as always. I always learn something new x

Today I learned Shift+Tab does the reverse of Tab. LOL

2:48 Strongly disagree. Using classes for everything just causes classitis. You even said it means more coding in HTML. Too many glasses. I’d rather only class a list or a table as whole in one place without coding list items or rows and cells. Why code classes for every list item or every table row or table cell when you can simply class the list or table and have the CSS do the work? This way, I can change the look or behaviour of a table by just changing the table’s class without recoding rows and cells too. More coding in HTML is not worth a little readability in CSS, especially if you have multiple HTML authors in your team. Apart from that, great video.

This type of video is so, so helpful! I've always seen the complicated selector format and have agonized over it (not always understanding it fully), so now you have explained that it isn't even necessary, it has helped me no end!!!!! I'd certainly love to see another video with this type of content! Way to go, Kevin

I’m really glad I found your channel. It’s improving my understanding of css a lot! Thank you for taking the time to record these videos.

Thanks Kevin! Just discovered you - and I must say, I have a feeling that your content will answer many of my best practice questions, and hopefully after going through your videos, I should be more confident and actually pursue web design! I used to do it in middle school w/ myspace - little did I know, this is an actual career!

The :focus one is quite neat, kudos Mr.Powell. Great as always.

Very useful tips, especially the one on focus. I would love to see more on files architecture and writing comments in SCSS. I'm currently following the Sass guidelines but struggle to apply them to complex projects.

One line rules.... wow, that brought back memories. I still tend to do that for single prop rules as a short hand, but thankfully I don't write much CSS anymore.

4:00 A nice trick to create custom checkboxes is to set checkbox colors to transparent and then render the custom checkbox in pseudoelement. Then you can just use selector [type=checkbox]:checked::before to style the custom display.

I've never thought about that last one!! It's about accessibility and it seems important. Thank you.

I'm finding this channel incredibly helpful in my CSS journey. Thanks!

I'm coming from a backend background so proper spacing in front end code so that it follows language standards is difficult. What really helped me was installing a formatter plugin and setting it up such that it formats the code every time I press ctrl+save. This way no one can ever complain that I didn't take care about my formatting. Highly recommend it to everyone.

This was so helpful, I do organized my stylesheet but not enough, this was a great reminder

I want to thank you Mr. Powell. your videos are a tremendous help to me in my advancement in css. Its been by far the most challenging part of my progress as a web developer. Id be lost without your help and so you have my thanks.

Thank you so much for these tips. Being new to CSS...I've come across many templates that use Foul #2 and Foul #3 (Organising the CSS). I've spent hours in reformatting the CSS so that I can understand it and know what the CSS is doing.

The end about the focus was such an eye opening thing to me!

Love this, thank you. 35 years ago when I was learning to program, my teachers emphasized readability, commenting, etc, and back then, it was “structured” code, and it still annoys me to see code of any sort that isn’t organized well. Now, learning CSS, this is so helpful to me.

Once again you talk about things others do not, very positive, love it, thanks

Most of the fouls you mentioned are what we used to do in my first professional job 15 years ago: Preferring IDs, deeply nested selectors to scope everything, and even having all the properties in the same line (we used a CMS which didn't support minification, so we wrote minified code 🙈). I didn't like that and I was really happy when Nicole Sullivan came along and proposed one of the first CSS methodologies, OOCSS, which really resonated with me and was close to what I used to do: Composable classes with low specificity, named according to what I like to call visual semantics! And it's still the way to go today most of the time. Also, regarding using IDs and element names for styling: It happened quite a few times that I suddenly had to have two instances of #sidebar on the same page with the same styles. And, of course, that I needed to style a link like a button or a paragraph like a heading. So, classes for the rescue.

Great tips! Thank you Kevin for every thing you’re sharing. I’m a beginner front-end and I find these tips very useful. Cheers!

Much needed topic ! especially when we are working in a collaborative project with multiple UI folks.... Feeling to share the tips with my team... great compilation of topics here... thanks !!

Thank you! And thank you RU-vid for finally getting useful content on my feed.

Helped me a lot. Thanks Kevin Powell.

Thanks! If found the discussion on focus styling helpful.

Great video but there are some things I would like to add to this:- 1. Overly complicated selectors I generally agree with this statement but there is a lot wrong with the way you explain it. Firstly, you should not be naming. every. single. html node in your project. There have been waaaay too many times I had to step in to maintain a legacy web application and see classes like this: nav-menu-item-button-alt-clicked. It's not necessary and it's not worth it. Why? because you styles are going to start leaking into you html and overall make your life (or the people you work with's lives) difficult. Too much, DO NOT do this. You can have generic selectors such as .navigation > btn.clicked. If you think this is hard, you should use scss or less. No one is going to judge you for using webpack or a preprocessor. In fact most websites use preprocessors and so should you. ALWAYS ALWAYS avoid using general or universal selectors at the root of any declared style. selectors like * > div or html are (in my books) very bad practice because it means your styles are uncontained and can cause side effects if your element or page is injected into a different css project. One final point is that I almost never read back css on my IDE but rather, I use element selectors on the browser. If you become proficient in this, you will find it becomes easier to understand the 500 lines of spaghetti that is hitting your element. You can be the cleanest developer in the world but CSS and SCSS are naturally very messy languages and it's ok if there are more than a couple of selectors hitting a particular element. Just be smart about it. 2, 3, 4. Make your CSS readable If you are spending even a couple of minutes to refactor your CSS, JS, Haskell, Cpp, anything, you are wasting your time. You will save so much time if you just installed a linter (like prettier which you already mentioned) and just factoring your code that way. Don't like the way your linter is factoring code? Just configure it using a .prettierrc or otherwise. Using a linter is good for three reasons, (1) is it forces a standard way to format your code in a team, (2) is it catches careless mistakes or bad practices as you are typing them but most importantly (3) is you save so much time! I almost never press "enter" as I am coding these days but my code stays clean because I use a linter. It is the best. If you are lost, install VS Code and use that. It comes with a tonne of linters preinstalled and the process of installing new linters is extremely easy. I remember one of the first projects I completed was a static website I used to promote myself a couple of years back. It had about 500 lines of HTML and about 20000 lines of CSS. No matter how hard I tried to keep it organised, it was always messy and difficult to maintain. Now imagine working in a team where 5 devs are in the office, 5 devs are MIA and 5 devs are working remote over a couple of years? Things are going to get messy. Use technology to deal with this. Use CSS-modules to refactor your CSS into manageable chunks that only target parts of the page. Remember when I mentioned not using universal selectors? This carries on here as you want whatever is written in each module to remain in each module. Segregate by real estate, not by logic. It also helps to keep your design minimal and consistent to maximize re usability. Again, preprocessors like SCSS or LESS helps a lot here. Just don't get carried away. DO NOT just comment all willy nilly. The more you comment, the more comments you have to maintain and there is nothing worse than lying comments. If you structure your code correctly, you will find it easy to read your CSS. If you think otherwise, you need to refactor your CSS before you think about comments. Comments should explain the why and not what or how. On a side note, if you are using VS Code, you have intellisense to tell you the hiarchy of selectors as you code along. One thing I definetly agree with you on is you should always refactor as you work. Always ask yourself if you are over complicating things, if you are inconsistent (suddenly using css grids when you have consistently been using flexboxes) and finding ways to make your code reusable with sacrificing readability are excellent practices in any language (I think you mentioned this already). At the same time, try not to write smart CSS. Just think, you have to be twice as intelligent to debug a block of code than you have to be to write it. Keep in mind what websites you are developing for but always remember you can use a preprocessor like bebel to apply polyfills to make your CSS compatible with your target browsers. 5. Overriding native behavior Yep totally agree with this. Try not to override native behaviors. Just because you can do it in CSS does not mean you should. In addition to the selector boxes, there is also smooth scrolling, caret color, the highlighter color, pop ups, etc... Actually I find this is more of a design thing then a development thing. Two things I would like to add, just imagine when you are using javascript to re-write something that is already available (such as a selector menu) you are spending time to write something that has already been done by someone smarter than you. Does this mean you should go crazy and download every dependency? No but that is something I can talk about for hours. Also, the more you write, the more can go wrong and the more you have to maintain, optimize and secure. This is the trade off you have to make. If you are struggling with starting new projects quickly, take the time to create a nice clean competent boilerplate which you can fork for any future projects. You shouldn't need to manually have to initialize new projects whenever you are given them. Don't be afraid to take shortcuts as long as they do not compromise the quality and integrity of the code. Lastly, you forgot the two biggest cardinal sin in CSS and that is using the !important sparingly or position absolute or pixel perfect CSS. For !important: yes, sometimes you need it (not because you can't but because of all the bad CSS and abundance of !important tags or inject-able elements. Do not do this! This is lazy! Really understand the problem you are fixing and fix it. Negotiate with your stakeholders to clean up the technical debt. They and you will thank each other later. For position absolute and pixel perfect CSS, trust the browser to position and paint the website for you. Just because it looks nice on your screen does not mean it will scale nice to your user's screen. It is also generally not reusable and very hard to debug. Yes sometimes, it can save you a lot of time, but don't over-rely on this. Use it sparingly. Anyway, this has been my thoughts and personal opinion. I hope this helps and didn't come across the wrong way but it is something I feel quite passionate about as a full stack developer. Do feel free to reply to this comment if you have any concerns, clarifications or questions. I'm a nice guy, really.

Creating custom focuses is a fantastic idea. Thank you!

Hello from Venezuela. You have Awesome channel. Would like some video dedicated to css effects for mobile. Thank you for being a teacher and sharing your knowledge...

Nice job Kevin, great advises👍

The :focus / outline tip is so simple yet so brilliant! Thanks

Thanks for the outlines and for your work.

I really appreciate all your work, thank you!

This is beautiful! It helped me to make my CSS code much more cleaner. Thank you!

I saw a few of ur videos and I must say that: Your keyboard is music to my ears :)

Contrast. My second biggest complaint about so many websites. We're going through the same thing from 20 years ago when some webmasters put dark blue writing on black backgrounds.

Great tip about styling focus!! Thank you!

Finally I get a channel that will make my transition into front-end development easier. Thanks for the great video.

Thanks for the video, nice upload. Very clear and got all the points across well.

So, the first tipp I don't agree. I like the complete selectors in structure so it's better to understand. And in the moment, you have another link in the Nav but outside of a then you are safer wir the complete selectors

Thanks for the reminder to keep CSS clean! I just went in and added a Table of Contents to a really large style sheet I'm working on. Bonus: I added a ToC to my starter file as well so all future projects will have one as well!

Good points. Most apply to all kinds of code. Some more tips from issues I've run into: 6. Not checking browser interoperability early in the project. I've implemented a whole layout with grids only to realise they aren't fully supported in IE9. Better to check this early and save yourself the headache of rewriting. 7. Not using box-sizing: border-box. CSS's default here was obviously the wrong way to style boxes because trying to put two 'width: 50%'s side by side can result in things wrapping falling off screen if you don't subtract the padding and border sizes. I don't know the arguments for content-box but I've never had an issue with border-box. I guess you have to be more careful with min-width and min-height since you need to account for padding and border. Meaning for a 10x10px image, min-width: 10px; will be too small if you don't add on border and padding. 8. Using too many divs. Divs are great for creating collections of elements to be all within the same box. But I far too often see divs redundant nested divs which appear to provide little or no value to the code. One big example I see a lot is using divs to apply a style to all its descendants. But this can and should be done with a class. The more divs you have, the harder it'll be to reason about the layout so strip them out where you can. 9. Along a similar vein, using divs where a better fit semantically would be a button/section/footer etc tag. This is more of a HTML issue but still involves resetting the existing elements CSS.

@kevinpowell Kevin, another great tutorial BTW. How would you recommend organizing and overriding styles when using a css framework?

Helped a lot! Learned much! Thank you!

Removing the outline and replacing it with own CSS.....that was AWESOME tip !!

You are golden! NR 4 & 5 were especially useful. I think you can spot the "better" web developers also by how they keep and make their pages accessible, in my codecademy course there was nothing on accessibility and on freeCodeCamp there was a whole section. So I always know when someone pays special attention to that, that their content is good

Great tips. I would really, really advice everyone who has difficulty with this to use both Sass and BEM, which makes avoiding most of these pitfalls way easier than basic CSS.

Thank you, Kevin, especially for the :focus, really nice... I've noticed it before, didn't really know what's that, though it's kind of obvious, but you explained it well. Well done! Keep up the good work!

Nice tutorial, loved it. Which font you are using?

Removing the outline... that's was awesome tactics for me. Thanks a lot.

Thanks, Sir, You help me a lot. Great tutorials..

i was missing out on the focus and outline and surprisingly it never ever came to my mind. Good to know man!! . Cheers!!!. 18:22

thanks for giving new look to writing css

Wow. Searchable CSS table of contents. Never thought that one up. What a great idea

Just a week ago I started coding and first four Im doing right, except grouping, Im not grouping by element type, Im grouping by sections, everything that is in nav section will be in nav all buttons all texts, everything that is in main section will be grouped in main. Luckily I watched video till the end I learned few cool useful staff that I didnt know before, especially for contrast how to see if it is alright, yesterday I was killing myself for 1 hour I didn't know is my text readable because of contrast, now I know how to check it :) and also focus on tab I never thought about it, great advice. Thank you very much.

I really love your channel. Straight, clear and rich of good valid content.

Awesome tips! I personally would recommend instead of globally removing outline on focus, just do it on individual elements. Although it is a bit of a redundancy, keyboard users will have a way to navigate, even if you forgot to specify states for focus...

I’m a beginner and wonder about best practices all the time as I’m learning, so this is very helpful. Thanks!

Really great advice! Good stuff!

Thank you Kevin, great tipps! In long stylesheets one doesn't see the forest for the trees, so organizing is really helpful. Sometimes classes are just not enogh, though. Because id's have the higher rank in the DOM. Especially when you need to override some styles coming from a framework, etc... This is not always achievable with classes. I think what you meant is to keep the selectors ranking as low as possible, going to higher ones only if there is no way around it? Cheers!

Kevin, i met you in this week and i'm loving! Can you say in some video whats is the better font-size to text (like blog texts)

I LOVE custom classes and ID's. I was kind of worried I was overusing them. Thanks for the reassurance.

Very great and useful tips! Thanks for that :)

Firefox dev tools do in fact have that contrast inspector you were showcasing in Chrome. F12 > Accessibility tab > Enable it > Click the button at the top left (while staying in the accessibility tab) and start inspecting

Align focus with hover effect looks like a really useful tip 👍

Thanks Kevin, great help

Something that I've seen a lot that could be considered a foul is not using the short hand version of certain CSS properties. Although, I mostly see this with beginners. I've also noticed people not using a fallback font when they use a custom one.

Super awesome css tips KP sir

Thank you Kevin, much appreciated

Amazing points! Thanks a lot

So many usefull tips for me, thanks a lot!

Great tips, thanks!!!

2:07 You said it correctly! Well done, Kevin!

Great content! Thank you so much sir.

Tip 5 is great and I haven't thought of it, same with the Chrome dev tools, I never knew it had a warning for what you mentioned after it. Thanks for the videos, Kevin. I always keep single-attribute styles to a single line without a semi-colon. is that really that bad? Would people rather see it tabbed down with a `;` even though it's the only attribute?

Great video Kevin, one question ... when the page-content move when keyboard show it, the problem it's css ? viewport meta ? I have this issue only on Android devices

Oddly enough, despite working with CSS for over a decade (or maybe because of that), I do the opposite for foul #2. I actually find the compressed version to be easier to work with and sometimes even compress other people's CSS when I bring them into my projects. The primary advantage is that compressed CSS allows me to view a lot more CSS on one screen without having to scroll. For me at least, that's important, because scrolling could sometimes disrupt my ability to maintain a mental model of whatever I'm working on.

Also, factor everything using SCSS ! Readability increase a lot ! Help avoiding repetition, keep things neatly together.

Awesome video as always! Could you make a tutorial on navigation bars? I am really struggling with those... But thanks for all this tips!

Great video. It helps a lot, so thanks!

The last point really useful for accessibility.

Thank you for these helpful tips ;)

Appreciate the tips, I'm certainly guilty of a few of these when I'm being lazy i have noticed that especially on test projects where i'm primarily trying to learn things I put whatever i'm working on at the bottom of the stylesheet and then every hour or two I'll go through and move them into sections. Though on sub 100 line sheets I just don't see the point in the extra effort. Another thing, I hate anyone that just puts a class for everything, it really bulks up the html and makes it a pain to sift through. We should be trying to increase readability of everything rather than one thing at the expense of others.

Great stuff, thanks for sharing! I have a question for you though, something I'm personally struggling with and the team I'm working with.. which order would you place the rules? I've seen alphabetical order, colors first, or just fully random (usually 😂). Which approach would you recommend?

SO glad to see this video!

The last point was the best. Thanks

About the contrast, something which needs really more attention: Bad monitor settings, especially in combination with cheap monitors. Some people like to tune up brightness and contrast. Unfortunately that can have the opposite effect on light font colors, something like #ccc on white might vanish even with good eyes.

Wow!! Great tips on using focus and the contrast ratio in Chrome! Did not know that one. One thing that frustrates me now as I get older (50) is the contrast and the typography designers use when developing forms. It looks pretty but have a hard time reading it. They always use some condensed font, it's frustrating. Great! Thanks for Helping Out and Sharing!! ~ Peace :)

Very informative and well made.

The focus point was useful!

Thank you, very useful for beginners like me

You are amazing! I aspire to be a Front-End Developer of your skill level one of these days!

Nice to hear comments about contrast in text. Too many people think it looks stylish to have feint fonts but its crazy. It also goes against the "accessibility" ideology thats been around for years. That said, you're not getting too old yet, you still speak fast like a teenager !

I like to organise the CSS rules for each selector according to their role. This usually involves two blocks, one for positioning rules, and one for styling rules. I also like to place them in the same order, I find that this makes quick identification easier.

we are learning soo much from u sir thank u soo much

thx again. The ToC reminds me of the Sass files in VS Code