Common CSS mistakes developers ignore

This is a real story about how I found a lot of little but significant mistakes in web development.

First of all, you should know, if you started developing on back-end or mobile, is very common to trip on that kind of mistakes.

So, let’s start with a few but useful tips:

1.- Use Inline Element as a main container

Well, if you didn’t know, there are two different kind of HTML elements: block and inline.

Block elements are commonly main containers, its behaviour is like parent container and its flow is independent of the others. Elements like Div(most famous), ul, h1, h2, h3 and all other header tags, aside, form, etc, are used frequently in web development. Have default property display: block.

Inline elements follow the general flow and don’t influence in general structure, elements like span, li, a, label, etc are used inside of block elements an it behavior is like children elements. Have default property display: inline.

inline and block HTML elements, correct way to use them.

Maybe some times you need to use block inside of a inline element, like in a clickable figure, you can use it, but remember to convert inline element in a block element with property display:block.

And maybe you’re wondering ¿But why I shouldn’t use block inside a inline element? ¿Does my browser could explode ?
No. But you should use it because is a good practice and in older (and inconsistent) browsers doesn’t parse correctly.

2.- Medias queries confusing about max and min width (or height)

This mistake often happen to developers that don’t have experience with DOM. Not more confusing, just remember:

@media only screen and (max-width: 500px) = screen < 500px
@media only screen and (min-width: 500px) = screen > 500px

and that’s all.

3.- Same classes in different menu levels

I going to start with this image

Parent and child menus example

Maybe to “save lines” or “not repeat”, you decided use same class in two same elements but forgetting that the context is different.
Above the menu example, shows that you can use the same class, but you shouldn’t, because you have to handle separately. Parent menu has the main behavior and submenus have totally different, specially if you are working in a big component.

4.- Not using CSS reset

Each browser uses its own default style in HTML elements.
So you need a special sheet to reset properties, some files like Normalize or CSSreset , although some people use to put the universal and easy reset 
* { margin:0; padding:0; }
When you reset styles you can manipulate elements like if you were making element from zero.

5.- Use CSS3 properties as if all browsers support them

First tip: if want to use all the new sophisticated css3 properties, you must have an idea of your target users’ browsers, you should take a look to some accepted rules in each browser ..

Second tip: One day I started using flexbox, everything was hunky-dory, I was testing my code in Chrome, Safari, Android, even in Internet Explorer.

But some day, IE9 and Android 4 browser came back and broke all my beauty lines and components. So a friend and team colleague (José)saved the day with all necessaries vendors to run in all browsers. And this is a #TrueStory
Lesson: to use CSS3 use all acceptable and necessary vendors.

Third tip: You should provide a different sheet for styles in old browsers, because they don’t support the cutest and coolest CSS3 styles, so you need to create alternative ones.