In this blog post
By Sangavi Rajendran
In this article, you will learn about the mechanics and the practical uses of CSS that you will find valuable as a developer. To effectively use Cascading Style Sheets, you must keep in mind how cascading works within the browser.
1. Beware of Margin Collapse:
Unlike most other properties, vertical margins are used to collapse when they meet. This means when the bottom margin of one element touches the top margin of another, only the bigger of the two survive. There are ways to overcome these behaviors, but it’s better to just work with it and use margins only going in one direction, ideally margin-bottom.
2. Use Flexbox For Layouts
The flexbox model exists for some reason. Floats and inline-blocks work, but they are all essentially tools for the styling documents, not websites. Flexbox is specifically designed to make it easy to create any layout exactly the way it was imagined. The set of properties that come with the flexbox model give developers lots of flexibility, and once you get used to them, doing any responsive layout is like a piece of cake. Browser support is almost perfect, so there shouldn’t be anything stopping you from going full flexbox.
3. Do a CSS Reset
Although the situation has greatly improved over the years, there is still some variation in the way different browsers behave. The best way to resolve these issues are to apply a CSS reset that sets universal default values for all the elements, allowing you to start working on a clean style sheet that will deliver the same result everywhere .There are libraries like normalize.css and ress to do this very well, to correct all envisioned browser inconsistencies. If you don’t want to use a library, you can also do a clearer basic CSS reset yourself with styles: This may seem a bit harsh, but nullifying margins and paddings makes laying out elements much easier as there are no default spaces between them to take into account. The box-sizing: border-box; property is another good default, which we will talk about more in our next tip.
4. Border-box for All
Most beginners don’t know about the box-sizing property but it’s important. The best way to understand it’s two possible values:
content-box (default) – If we set width/height to an element, that’s just the size for it’s content. All paddings and borders are on top of that. e.g. a <div> has a width of 100 and padding of 10, our element will take up to 120 pixels (100 + 2*10)
Border-box – The padding and borders are included in the width/height. A <div> with width: 100px; and box-sizing: border-box; will always be 100 pixels wide no matter what paddings or borders are added.
Setting border-box to all the elements makes it so easier to style everything, since you don’t have to do math all the time.
5. Images as Background
When adding images to your design, if it’s going to be responsive, use a <div> tag with the background CSS property alternative of <img> elements. This may seem like more work for nothing, but it makes it easier to style images clearer, for keeping their original size and aspect-ratio, thanks to background-size, background-position, and other properties. A small drawback of this technique is that the web accessibility of your page will take a slight hit, as images won’t be drag properly by screen readers and search engines. This issue can be resolved by the object-fit, but it doesn’t have full browser support.
6. Write Better Comments
CSS might not be a programming language still it’s code needs to be documented. Some simple comments are all it takes to organize a style sheet and make it more accessible to all. For the larger sections of CSS such as major components or media-queries, use a stylized comment and leave a couple of new lines after. Remember that CSS doesn’t have single line // comments, so when commenting something out you still need to use the / / syntax.
7. Everyone Loves kebab-case
Class name and id should be written with a hyphen (-) when they contain more than one word. CSS is case-insensitive so camelCase is not an option. Earlier, underscores were not supported (they are now) which made dashes the default convention. When it comes to naming, you may also consider BEM, which follows set of principles which add consistency and provides a component-based approach to development.
8. Don’t Repeat Yourself
The values for most CSS properties are inherited from the element one level up in DOM tree, hence the name Cascading Style Sheets. for example, font property- it is almost always inherited from the parent, you don’t have to set it again separately for each and every element on the page. Simply add font styles that will be most prevalent in your design to the <html> or <body> element and let them trickle down. Later, you can always change the styles for given element. What we are saying is to avoid repetition and use inheritance as much as possible.
9. CSS Animations with transform
Don’t animate elements by directly changing their width and height, or left/top/bottom/right. It’s preferred to use transform() property as it provides smooth transitions and triggers your intentions to make it easier to understand while reading the code. It Transform, as well as all of its many functions (translate, rotate, scale, etc.) have universal browser compatibility and that can be used freely.
10. Em, Rem, and Pixel
There is a lot of confusion whether people should use em, rem, or px values for setting the size of elements and text. Truth is, all three options are applicable and have their pros and cons.
em – The value of 1em is relative to the font-size of direct parent. Also used in media-queries, em is great for responsiveness, but it can get really confusing tracing back the exchange rate of ems into pixels for each element (1.25em of 1.4em of 16px = ?).
rem – Relative to the font-size of <html> element, rem makes it clearer flexible to scale all headings and paragraphs on the page. Leaving the <html> with it’s default fontsize and setting everything with rem is a great approach accessibility-wise.
px – Pixels give us precision but does not offer any scaling when used in responsive designs. It is reliable, easy to understand, and present a good visual connection between value and actual.
Most of the times em and rem can save you a lot of work, particularly when building responsive pages.
11. Validate
Validating CSS is not important as validating HTML or JavaScript code, but running your code through a CSS Linter can still be very useful. It will tell if you’ve made any mistakes, warn you about bad practices, and give general tips for improving the code.
Just like minfiers and autoprefixers, there are plenty of free validators available:
Online tools: W3 Validator, CSS Lint
Text editor plugins: Sublime Text, Atom
Conclusion
Modern CSS is easy to get overwhelmed by many different methodologies, you should think of them as different possible tools you can use when you face a sufficiently complex CSS codebase. You have the properties necessary to identify an effective visual layout and then bring it to fruition. By following these techniques we can eliminate the browser compatibility issues and other common css fixes.
