You Can Style Better

This article is ultimately coming out of my experiences about the problems I faced & solved.

There are moments when you run into a problem or face unavoidable friction while building or designing something with CSS. And it’s easy to make the below mistakes.

And this is my attempt to share some tips and methods on how you can improve the formatting and writing in a structured way.

Know the Concept then you can Develop.

When you start to develop a page or a component you should know the concept of how you build the layout. If you understand the below image, Layers of Design, you are an exception from this.

If we consider the above image, You’ll see the landing page on the left. It’s a Layout with a combination of Features like Navigation, Content and Footer. Whereas Navigation is a feature, a combination of Patterns like logo, menu items and CTAs. Furtherly CTA is a group of Elements (Text and Icon) and finally, Text is defined from Design tokens such as Color, Font Spacing etc.

Let’s take another simple example. HTML does not have an element called Toggle (Switch), it’s just a Pattern, made of Elements like labels, checkboxes and toggles images as shown below.

If you don’t understand the Layers of Design concept, it’s going to be a blocker for you to get started.

Margins and Paddings.

Both of these CSS properties are for spacing. That doesn’t mean both are the same. It’s a crime to use Margin instead of padding (Vice versa) 🤣.

On a Short note, Padding is the space from the content to its boundary (Border). More like, Area of the element. Whereas Margin is the spacing outside of the boundary. It’s always the space between two different elements.

Do not give padding as spacing if the element has a border or background property. Check the above example.

Avoiding “! important” is important

Another common mistake that I observed is overriding existing CSS styles with !important to avoid specificity. Though this is a useful and unique property, it backfires when we try to modify the styles again because We can’t put Double !important.

So let’s keep the uniqueness of this property by using it rarely and just be more specific.

Above example, we have used more specificity to address an element to avoid !important. CSS provides more ways to address a component such as element, class, id, attribute, pseudo selectors and many more. We should take advantage of these selectors to give more specificity.

If you use absolute units you are unfit.

Consider a section with 500px (Absolute Unit) of width inside a screen of 1000px width, it stays the same even if you change the screen width but if you mention it as 50% (Relative Unit) its change according to the screen’s width. So, Avoiding absolute units (px, in, pt, mm, pc) and start using relative units(em, rem, %, vh, vw). This helps you to build better layouts and style better responsiveness. Not just for height and widths but also properties like font-size, padding, margin, line-height

Zero is Zero.

Yes, Zero is Zero and you don’t need to mention Unit. The Unit is optional when the value is 0. For the browser 0 = 0px = 0em = 0vw = 0% . And by using 0 over 0px, two extra characters that can be avoided and around 8bits can be save in a statement like padding : 0px 0px 0px 0px; which can be easily written as padding: 0;

Do not repeat Styles.

Style like there is tomorrow and reuse the styles which you wrote today. Reusability and adaptability are key things to write clean CSS.

Here in the above example, we created a template called .button and we avoided style repetition by extended the same template to create primary and secondary button variants.

Use shorthand.

Like you saw in above two sections, this also helps us to shorten the styling. Why write multiple lines where you can group them in a single line like below.

Yes, with CSS we can group CSS properties like background, border padding, animation etc, and it is recommended to take advantage of that.

Fall Backs

Isn’t it irritating when something works in your environment and breaks in others systems. This happens when the web applications fails to load fonts or images from local or CDN’s fails. By adding fallback values to CSS properties we can overcome this. I’ll explain with below example of a White text on dark image.

If the image failed to load this could lead to Text that’s there, but invisible.

We can add a proper contrast color as background color and avoid this problem. Below, I added background color as fallback value. So even if the image fails to load or until the image load in slow connections, fallback property background-color : maroon; will solve the problem.

Not just Chrome

Test on all environments. I personally love to develop using Chrome browser, but not every user will use the same browser, version or operating system. We are not developing for ourselves so keep in mind that whatever we are developing should be accessible for everyone.

Luckily all the recent browser engines are similar (95%) but there are people who usually wont update their browsers so better build in one browser and test on multiple environment.

Wrapping up :

Following these tricks will help you to avoid common mistakes. So that, you can style your next project in a managed way.Thats not all, But for now let me put comma here until I getback with more tricks.