Teaching CSS as a part of our JavaScript Full-Stack Bootcamp for several years now helped to see some of the most common confusions shared among beginners. Although CSS is not a programming language, for some it seems to be even more frustrating than JS. So here is the list of most common advice we give to all of our students on a regular basis:
Keep it simple.
There is no need to overcomplicate things. If all you need to do is center your text horizontally, just go with text-align: center. No need to use Flexbox or margins or position. Sometimes it’s tempting to simply inspect some website you like and copy chunk of CSS from there to your stylesheet. Well, chances are that you will have 90% of excessive CSS which you don’t really need. Plus, it will not help you at all to actually learn CSS.
Floats, Flex, Grid – what to choose
With CSS getting bigger and bigger it could be overwhelming sometimes to choose the right way to go. Our general advise would be to use Grid on the top level elements to create the layout – header, footer, columns, sidebars. Then for the nested elements Flex seems to be the best choice for the alignments, especially for the vertical centering. And floats – well, in most cases you don’t even need them and it’s good. It could be a bit hard for beginners to control floats based on their behaviour relative to the sibling/parent elements.
Have some structure in your CSS file(s)
One of the good ways to organize your styles in CSS file would be to start with element selectors first. Then add classes selectors and combined selectors for elements inside these classes. After that put your id selectors. We also noticed, that for some students it feels more natural to organize CSS selectors in the same order as they have them in the DOM. It seems to be quite a good approach as well, since if you know that your footer is in the bottom of the HTML it feels natural to scroll down to the bottom of CSS file as well to find the footer’s styles.
Divide CSS into several files for the larger apps
With many components for your apps organized into a nice structure it makes sense to split CSS files as well. So, let’s say, you can put your styles applied just to some specific areas of your website into separate CSS files, such as header.css, footer.css, sidebar.css, etc. It will not only help you to reduce the size of your stylesheet and prevent it to grow enormously but will allow you to make your components more reusable with js and css files fully isolated.
Inline vs. external
While working with React you might have your CSS in JS, the styles in this case are treated as inline by the browser so when you are going to apply some global styling from the css file if your selectors are targeting elements with this inline CSS generated by JS they will be ignored, since inline styles will take precedence. Please bear that in mind and don’t get frustrated when “it’s not working”.
Length units
Although pixels might seem as the best choice to build your layout exactly as you have it in the design mockups and it will look great on your screen, save your time and start with relative units right away.
Pixels could be the best choice in some cases, for example to limit max-width of your content container so it will not grow enormous on larger screens reducing readability, but more often than not pixels are going to break your layout with slightest change of a viewport size. So %, em and vh, vw are by far more appropriate in almost every case.
Media queries
With so many user agents how do we choose the breakpoint for the media queries and how many should we have? Again, keep it simple. A desktop, tablet and mobile versions will help you to not go crazy and yet have a responsive website. And remember, that you only need to add the properties which you are actually changing for the selector inside the media queries, not all of them.
And the last ultimate advice – it’s fine that your website will look differently in every browser and use device, don’t break a leg by trying have absolutely pixel perfect version of it. Content and functionality first. users should be able to read all the content you have there for them and interact with your website. Focus on that!
Top comments (0)