CSS is a standard technology in web design, which most web developers use on a day to day basis. As with all vast technologies, you can never know everything about CSS; we have compiled some of our favourite and most valuable CSS tricks that could save you hours of frustration.
Box sizing: border-box
This simple CSS property changes the way that boxes are sized within the browser. Put simply, it calculates the width of the box from the border, as opposed to before the padding. This means that percentage widths can be used more predictably, and is especially useful for responsive designs. There have been many projects I have picked up throughout my career, and a common flaw is odd widths such as 98%, which have only been applied to take into account margin and padding (usually mixing dreaded fixed margin and padding with percentage width boxes). Simply changing the box sizing will save a lot of frustration, and make your code more understandable and maintainable.
box-sizing: border-box;
Chaining IDs and classes
It is possible to select an element based on 2 or more classes/ID that are applied to an element. For example, the CSS selector:
.container.header {}
Will match all tags with a class of both container and header, such as:
<div class="container header"></div>
This is a useful way of selecting elements, but not very widely used.
Horizontal center of absolute and fixed elements
A common solution to this problem is using the below:
left: 50%; width: 100px; margin-left: -50px; // 50% of the width
The main issue here is that you have to know the width of the element, and hard code this into the CSS. This method restricts the element to only ever be fixed width, and is harder to maintain. Another solution is:
left: 0; right: 0; margin: 0 auto;
This method works in all major browsers (besides IE8), and doesn’t require a fixed width. This is a cleaner solution, and easier to maintain.
Responsive images with max-width
An easy fix for images that need to be responsive is to add:
width: auto; max-width: 100%;
This will cause the image to scale with the container, so if the container width reduces (such as on a mobile or tablet device), the image will shrink to fill the container in proportion.
You don’t need to use !important…
Ok, so it’s not a trick, more an extremely common misuse of an attribute. The !important attribute is used commonly when styles are being overwritten on an element; it is a quick and dirty fix that when used often results in an overwhelming mess of CSS, and the vast majority of styles also requiring !important to override your other !important styles.
Except in a few situations, if your styles are not being applied it means that your CSS is not cascading properly. You should fix the underlying issue instead of using !important; the time you take to cascade styles properly will be saved many times over during the course of a project.
For example, the second h1 selector in the below CSS will not work:
.box-wrapper box-title h1 {
font-size: 25px;
}
.box-title h1 {
font-size: 30px;
}
The problem with this is that it will not select .box-title on:
<div class="container">
<div class="box-wrapper">
<div class="box-title">
<h1>Title</h1>
</div>
</div>
</div>
This is because the first selector cascades deeper, so is given priority. Instead of adding !important to the second selector, you could do the below to cascade deeper than the first selector:
.box-wrapper box-title h1 {
font-size: 25px;
}
.container .box-wrapper .box-title h1 {
font-size: 30px;
}
This is more readable, and logically makes more sense as styles should become more specific the further cascaded they are. If other developers want to add to your styles, they can just cascade their own styles correctly to override them, as is intended with CSS!
Final thoughts
I have covered a few useful ways to use CSS in this blog posts, if you have your own useful CSS tip that you use frequently to solve common problems, leave a comment below, and this may be included in a second part of this post.
