Stop Guessing CSS!

Rodolfo Martins
Nov 12 · 4 min read

As part of the front-end engineering team in eDreams ODIGEO we are always looking for improvement, but what is also very important for us is not to forget about the basics.
Let’s briefly overview some useful knowledge about CSS and hopefully, we will understand better each property.

Image for post
Image for post
Photo by Stefan Gall on Unsplash

1. Margin and padding

is a property used to create some space your element, are also used to create space, but this time is your element.
To decide which property to use you must ask yourself if you need space from all other elements (margin) or if you need to add space in your element (padding).
Once you know it, here comes some more tips about how to use it.
We can use them with up to 4 values.

Image for post
Image for post
CSS box model

margin: 20%;
All sides will have 20%.

padding: 10% 20%;
top and bottom will have 10%
right and left will have 20%

Image for post
Image for post

2. CSS most useful units

Let’s cover the two types of units and take a better look at some of them.

  • have fixed values. We have cm, mm, in, px*, pt and pc.
    *Pixels rely on the viewing device. High-resolution screens have more than one pixel when using the px.
  • are relative to another length property. They are ex, em, ch, rem, vw, vh, vmin, vmax and %.

In my opinion, the following units are the most useful to know.

  • px

They are relative to the viewing device like w3 describe it. We must take extra care if we decide to use it. Nowadays the most interesting thing is to make things responsive. Px is usually not good for that. For example, if you use two different devices with 8" not necessarily they will have the same look for a 14px font-size because of the pixels per inch of each screen.

  • percentage (%)

This unit follows the parent element size. The parent size represents 100% and based on that we can adjust what we need. This is way much more responsive and more maintainable. Use it to give responsiveness to your layout for margins, padding and avoid using for font sizes, images and to represent the whole screen.

  • rem and em

Both are relative to the font size but rem stands for the root element, and em stands for the closest or direct parent of your element. Use them for font sizes, rem for global styles and em for local styles and easiest adjustments.

  • vh and vw

They are viewport units, the vh is representing the height and vwrepresents the width. 50 vw is the same of 50%, 25 vh is the same of 25% and so on. This is very useful to fill your content with the size of the viewport. If the viewport size changes, it will adjust. The percentage may look similar, but keep in mind that percentage is based on the parent element.

Check this another article to have a better understanding (with images also!)

3. CSS combinators

The combinators are the relation between the CSS selectors (which is also a very interesting subject, make sure you add it to your to-read list). Between the selectors, we can add the combinators.

We have 4 different combinators to use between the selectors.

  • Space
    This combinator points to all elements descendants of the specified combination.
    Example: div p {background-color: lightblue;}
Image for post
Image for post
Selectors separated by space
  • >
    Another useful selector is >. This selector points to that match it. Let's check the example.
    Example: div p {background-color: lightblue;}
Image for post
Image for post
> selector matching only the childs
  • +
    The + symbol stands for selector matches with the siblings on the same level.
    Let’s check the example: div + p {background-color: lightblue;}
Image for post
Image for post
+ selector matching with the immediate sibling
  • ~
    Last but not least, this selector matches of the element.
    For example: div ~ p {background-color: lightblue;}
Image for post
Image for post
~ selector matching with all siblings

These are some topics that based on my experience I see some confusion. I hope I could clarify and help you to remember about them.
If you like it, please let me know, also let me know if you don’t and maybe I will write a sequence for this series of tips. :)

Image for post
Image for post
Photo by Ian Schneider on Unsplash

eDreams ODIGEO Tech

Thoughts, ideas & insights from our IT, Data Science, Product, UX & Business experts

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store