5 CSS mistakes that I see way too often
Vložit
- čas přidán 3. 08. 2024
- People make mistakes and learn some bad habits when learning CSS, so in this video I tackle 5 of the most common fouls (plus a bonus one at the end if you stick around), that I see on a regular basis.
The a11y project: a11yproject.com/
Specific article about outline: a11yproject.com/posts/never-r...
Many of these are bad habits that people start developing as a beginner and then never drop, while others are things that people never really get into. And while many of these mean taking a little bit of extra time initially, following best practices is a great way to get better at CSS as well!
#css
---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: / discord
I have a newsletter! www.kevinpowell.co/newsletter
I've been working on some courses! Find out more: www.kevinpowell.co/courses
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
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.
Great point! And no trailing commas either... I've done that before
Excellent. I allays try to make sure that any effects I use to make a page "pretty", won't interfere with reading or navigating if that effect doesn't work correctly.
Damn never knew that one!
Only a problem until houdini gets widely used in browsers :)
I learnt this recently with :focus-within.
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
thanks
It's a nice touch when we need to review the content but not wanting to watch everything from the beginning :D Thank you!
Thank you so much.
Hero
thanks
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.
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
Awesome! I have no idea how I learned that, but I'm so happy that I did, lol.
However don't try to have it connected to Steam.. The overlay will pop up. -- Dunno why, but some people even connect their IDE to Steam.
I had to search it up last week because I hated manually unindenting code
@@DutchRatedGamers It's a little hilarious when something like "playing Visual Studio Code" pops up. That one I've seen on discord a lot.
Shift is often the reverse-command button - Alt+Tab moves forward in recently opened tabs, Alt+Shift+Tab moves back. Ctrl+Tab in browsers changes to tab on the right, Ctrl+Shift+Tab moves left
Also it's why Ctrl+Shift+Z should be redo, not Ctrl+Y. Looking at you, MS Office.
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.
Good luck man!
Luck mate
I wish you well on your journey
Good luck man
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.
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.
Main aim for CSS was to get rid of ton coding in html. If you type classes for every tags, you can also write all styles in html, why to bother to do it in css at all? Also most of author conclusions are stupid, starting with first one: making it more "readable" makes it hard to manage/add/edit without rebuilding,
I don't think that's what he meant by "use classes for everything". Obviously if you have a list, for example, it would be best to style the list and select it's children than manually assign the children their styles. When he says "use classes for everything", I'm pretty sure that was in context to getting rid of unnecessary/overly complicated selectors.
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.
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.
Helped me a lot. Thanks Kevin Powell.
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.
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!
This was so helpful, I do organized my stylesheet but not enough, this was a great reminder
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.
Wow, this is awesome, thank you! Do you know where (or how) can I learn about writing good CSS (or about things like BEM) (webpage, book, etc)? I'm a beginner and I've been struggling with CSS.
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.
I really appreciate all your work, thank you!
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!
Once again you talk about things others do not, very positive, love it, thanks
Nice job Kevin, great advises👍
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.
The :focus / outline tip is so simple yet so brilliant! Thanks
Thanks for the video, nice upload. Very clear and got all the points across well.
Thank you! And thank you CZcams for finally getting useful content on my feed.
The end about the focus was such an eye opening thing to me!
Thanks for the outlines and for your work.
This is beautiful! It helped me to make my CSS code much more cleaner. Thank you!
Helped a lot! Learned much! Thank you!
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.
Thanks Kevin, great help
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 !!
I really love your channel. Straight, clear and rich of good valid content.
Thanks!
Finally I get a channel that will make my transition into front-end development easier. Thanks for the great video.
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.
It's so easy to be lazy, but in the long run it saves you so much time, and makes anyone your working with love you, lol
Thanks, Sir, You help me a lot. Great tutorials..
Great tip about styling focus!! Thank you!
Great tips, 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.
So many usefull tips for me, thanks a lot!
Great content! Thank you so much sir.
Very great and useful tips! Thanks for that :)
Creating custom focuses is a fantastic idea. Thank you!
Great video. It helps a lot, so thanks!
Amazing points!
Thanks a lot
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.
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!
That's awesome 👍
I saw a few of ur videos and I must say that:
Your keyboard is music to my ears :)
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!
Thanks! Glad you liked it learned something along the way 😁
@@KevinPowell oh yes. I've learned a lot from you.
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
outline is also important for handicapped persons.
sai vanyou sathi
Really great advice! Good stuff!
Thanks! If found the discussion on focus styling helpful.
thanks for giving new look to writing css
Wow. Searchable CSS table of contents. Never thought that one up. What a great idea
Very informative and well made.
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.
Very good ones! border-box is maybe the best thing ever, shame it's not the default, but at least it's not too hard to fix :)
Removing the outline... that's was awesome tactics for me. Thanks a lot.
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...
Ya I like this one better.
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...
Super awesome css tips KP sir
Thank you Kevin, much appreciated
Removing the outline and replacing it with own CSS.....that was AWESOME tip !!
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.
One could go either way on shorthand versions. The problem is that they are hard to figure out if you haven't reviewed that part of the stylesheet in a few months. I use them sparingly.
@@kencollins1186 How so? The short hand will still be the same as the long way. The only difference is that the short hand will save you time as opposed to doing it the traditional way.
@@juliocodes The shorthand version only saves you time the first time you use it. Unless you are coding 8 hours a day (which I'm not), the shorthand version takes longer if it has several parameters and you have to look it up to find out what the parameters mean.
I’m a beginner and wonder about best practices all the time as I’m learning, so this is very helpful. Thanks!
Thank you for these helpful tips ;)
Thank you, very useful for beginners like me
Fire! Thank you!
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
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
we are learning soo much from u sir thank u soo much
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.
2:07 You said it correctly! Well done, Kevin!
SO glad to see this video!
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.
The focus point was useful!
The last point was the best. Thanks
You are amazing! I aspire to be a Front-End Developer of your skill level one of these days!
Awesome video as always! Could you make a tutorial on navigation bars? I am really struggling with those... But thanks for all this tips!
If you add navigation bars, you have to find a away to keeping them visible while not letting them cover content, and they have to reposition themselves for different aspect ratios (desktop vs mobile device).
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
Thanks a lot, wish that was on by default!
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.
This is the dark secret of coding standards, different people work better in different styles, having a standard only benefits the person setting the standard :)
Also, factor everything using SCSS ! Readability increase a lot ! Help avoiding repetition, keep things neatly together.
My biggest problem is how to place items. How to make a navbar over a picture background. How to move divs where I want them as well as the content inside them. I think as a beginner that's a real struggle
Very useful!
Really useful!
The last point really useful for accessibility.
you will always have my like. I will share it with me peers, definitely will help them as it did with me
Align focus with hover effect looks like a really useful tip 👍
Hey. I just subscribed after someone recommended your channel during one of my live streams. I'm looking forward to checking out your videos!
"I find out white people don't make this mistake to much" 😂 18:22
Kidding aside, the : hover tip is something that I would definitely use in the future!
I paid attention to this too ahahah
I also had to listen to it a couple of times. But can't really hear what he said...?
he said on white, people don't make this mistake too much, but on dark....
Uhhh based?
Very nice points
9:40 - this was great! Me as well for my collaboration. A must use css practice
Big thanks👍
This video is gold!
I LOVE custom classes and ID's. I was kind of worried I was overusing them. Thanks for the reassurance.
Super helpful Sputnik, you are amazin too :).
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!
Today I have learned a lot about CSS.
Thank you so much.😊
Love ❤️from 🇮🇳 India