5 CSS mistakes that I see way too often
HTML-код
- Опубликовано: 20 июл 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 RUclips 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
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
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.
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
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!
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.
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.
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 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.
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.
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
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.
I'm finding this channel incredibly helpful in my CSS journey. 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.
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 👍
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 !!
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!
The end about the focus was such an eye opening thing to me!
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.
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...
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 :)
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.
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
Once again you talk about things others do not, very positive, love it, thanks
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
This is beautiful! It helped me to make my CSS code much more cleaner. Thank you!
Helped me a lot. Thanks Kevin Powell.
Finally I get a channel that will make my transition into front-end development easier. Thanks for the great video.
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
Thanks for the video, nice upload. Very clear and got all the points across well.
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.
Thank you! And thank you RUclips for finally getting useful content on my feed.
Thanks! If found the discussion on focus styling helpful.
I saw a few of ur videos and I must say that:
Your keyboard is music to my ears :)
I’m a beginner and wonder about best practices all the time as I’m learning, so this is very helpful. Thanks!
Great tip about styling focus!! Thank you!
Creating custom focuses is a fantastic idea. Thank you!
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.
I really love your channel. Straight, clear and rich of good valid content.
Thanks!
Wow. Searchable CSS table of contents. Never thought that one up. What a great idea
I really appreciate all your work, thank you!
Removing the outline... that's was awesome tactics for me. Thanks a lot.
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.
Nice job Kevin, great advises👍
Thanks for the outlines and for your work.
Also, factor everything using SCSS ! Readability increase a lot ! Help avoiding repetition, keep things neatly together.
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!
The :focus / outline tip is so simple yet so brilliant! Thanks
Helped a lot! Learned much! Thank you!
Very great and useful tips! Thanks for that :)
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 :)
Good video! I have one bone to pick here. If you globally set outline:none for focus, you are kind of setting yourself up for some troubleshooting hell later when, when messing with tab orders. Much better to just remove focus in each class, even if its not DRY.
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!
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
Regarding CSS foul #2, I do that all the time with my own CSS, but with a little caveat: If the rule has more than two properties, I break it up into multiple lines. But if it's just one or two properties, I save... well... it's not so much filesize space as it is vertical space in the text editor by doing that.
I do this a lot especially when I have blocks of any kind of repetitive code, whether it's CSS, markup, or even code-code, where I will put each repetition on a line unto itself, chunk them all together, then use whitespacing like no tomorrow to vertically align things all nice and neatly. I find it LOADS easier to be able to vertically scan a block of repetitive code that way.
Removing the outline and replacing it with own CSS.....that was AWESOME tip !!
Thanks, Sir, You help me a lot. Great tutorials..
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 :)
Thanks Kevin, great help
So many usefull tips for me, thanks a lot!
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.
I LOVE custom classes and ID's. I was kind of worried I was overusing them. Thanks for the reassurance.
thanks for giving new look to writing css
Great tips, thanks!!!
Great content! Thank you so much sir.
You are amazing! I aspire to be a Front-End Developer of your skill level one of these days!
Align focus with hover effect looks like a really useful tip 👍
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).
Great video. It helps a lot, so thanks!
Really great advice! Good stuff!
Amazing points!
Thanks a lot
6. I've seen many projects where developers are too lazy to open the css file or create a class and they just create inline styles. In react they end up creating camel cased css-in-js. When I join a project where people have done that, first thing I do is to introduce the team to styled components
One thing I noticed, when I used compound selectors (as a way to make code more understood!) that media queries for different screen can not override whatever style being used for that element that was selected with compound selectors .. I guess compound selectors are not not just a clutter in code , it add more specificity that should be taken into consideration when using media queries.
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.
I like to group things too, though the order switches sometimes. I try to start with margin+padding, then type, then positioning if I have it, and so on. Whatever flows, but I do like keeping related properties together
2:07 You said it correctly! Well done, Kevin!
nav a { }; May be easy to write at first, but if you need to extend your UI, it's prone to problems and difficult to find them.
nav ul a {}; Is much better, because you limited that scope, less contamination cause.
.nav-list-a {}; Is better and better, scope is more precise，and the style just for the same specific elements that you want.
.nav-list__a--hover {}; BEM way is one way I prefer, precise, readable, stateful and components-friendly.
I'm a big fan of BEM as well :D
I generally group similar properties on one line such as height and width. I think it makes it easier to read for me
9:40 - this was great! Me as well for my collaboration. A must use css practice
Hey. I just subscribed after someone recommended your channel during one of my live streams. I'm looking forward to checking out your videos!
Also i would organize my CSS file in the same order as i did my HTML-file:
Like:
1.Body
2.Navigation bar
3. Video-slider
4. Grid-layout
5. button-group 1
6. text-area
7. contact-forms
8.footer
This is how I do mine too, then I add some comments that’ll guide you to the section you need. It’s some good practice to comment on your code
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)
17:39 - You actually have it in Firefox, at least in the Developer Edition... IDK about the others
Thank you Kevin, much appreciated
Very informative and well made.
Nice tutorial, loved it.
Which font you are using?
Super awesome css tips KP sir
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.
Just a quick note, at 3:20 you note how you would need to add a class to all of your elements, thats true but you didnt mention the ability to put a .nav class on the nav element, and using the element selectors afterwords. It allows you to style an entire structure based on the elements with a single class rather than having to add the same 6 classes to the same 6 elements, you can just put it on the wrapper.
@kevinpowell Kevin, another great tutorial BTW. How would you recommend organizing and overriding styles when using a css framework?
Thank you for these helpful tips ;)