Normalize Your Website CSS

Normalize Your Website CSS

I have been wondering back then when I design a website for serious work for the first time. It seems that website theme out here has a similar design but still maintain its compatibility with many browsers.

And what make me more curious is that when I browse the CSS style on their design, it seems that they are replacing a lot of style from the previously defined style. It makes me curious because why not just change the previous style rather than replace it?

It as if they have some sort of template or something and then they replace it with their own style.

And my question is unanswered for a year until I work for WordPress design later. I never design WordPress theme at this time so I can’t help to learn it from the default theme that comes with WordPress. And then I meet with the answer when reading the CSS that comes with the themes.

CSS themes that come with the WordPress has pretty and well written if I may say. I’m struggling with this since forever. I don’t know how to make CSS file more readable, at least I don’t have any idea how to do that. It gave me an idea on how to write it nicely and now I use the same writing style or structure they use in CSS on WordPress default themes.

Back on topic, it seems that my assumption is pretty much correct. They have some CSS template or some kind of base style. But rather than using them to design itself, it normalizing default style for HTML element so it can have a consistent look on different browsers.

Like button for example, on Chrome default button is pretty much square bit silver gradient background and gray border. On safari, the button has round button with a blue-white gradient on the background. To fix this, you must define more CSS so it looks consistent on both browser like for example by defining button is always has a gray background and darker gray as the border.

To make it more efficient, you can create your own CSS template or collection or normalizer (whatever you want to call it) that act as the default style. If you found any inconsistent HTML style, you can just add it to the template.

Like zoom: 1; fix for example. You use it to fix IE zoom bug. It general and common fix and mostly you will write it on all of your website design anyway. With CSS template, you don’t have to write it again and again. Think of it as default style to make the HTML style consistent across the browsers but you can replace it with your own CSS.

Maybe some of your website design still need to be fixed individually even if you have CSS template. At least you don’t need to do the work you have done many times like fixing IE zoom bug.

There is one problem tough. To have many collections of fixes like that you need many experiences on website design and many hours to write the collection. There is some alternative by using CSS that made by other people such as framework like bootstrap or some of your choice.

No matter what you choose, I think it better for you to use collection from what people make and share rather than define your own. It will save plenty of your time.

CSS Framework

You can choose anything you like. If I have to use the CSS framework then I will recommend to use bootstrap since they are pretty much provide many style for you.

bootstrap

I personally don’t really like CSS framework. They are hard to change since they modify the default style too much. It so much works to completely change CSS framework style.

If you don’t plan to define your own style or modify it too much, then I suggest you use the CSS framework rather than making your own. It doesn’t require much work but you got a nice and consistent design.

The downside is, your final design may not really too far or too different from the CSS framework you use. Basically, the Look & Feel will pretty much give away that your design is using some kind if template. And the size of your CSS size is big since there are styles in the framework you don’t use.

Or if you want to define your own style but only want to have a consistent look on default style then you may use the next solution.

CSS Normalize

I prefer this solution and always use it. It will normalize the default HTML element style and make it consistent across the browser but don’t change it too much. It just fixes inconsistency look on a different browser by defining default style in the CSS. With this, you can define your own CSS after the normalize one.

So even if I use this CSS normalize, it won’t feel like I use some sort of framework or parent theme as my base CSS style. It requires more work since it will only define the default element style but at least you don’t have to define your own fixes like IE zoom bug for example. And it size is relatively quite small since it will only define default CSS style.

You can download Normalize CSS or define your own normalizer. Either way put it on your CSS as the first and default style and then you can define your own style after it.

css normalize nicolas

If you choose to download it, it supports most major browser like Chrome, Firefox, Opera, Safari6+, IE8+, etc. You can read it more on their website and it seems that many companies have been using it as their website CSS base. So I think it worth to check it out.

That it for now, if you have any question or suggestion you can write it in the comment bellow. Thanks for reading!

 

Want more like this one?

Regular Expression Online Tester If you are working on your own Regular Expression or Regex/Regexp in short, you may often found that it pretty confusing to make one by yourself. You ...
Twitter has Poll? Surprise. Maybe for all of us. Twitter now has a poll button, same as facebook or google+. Previously, you may use an external site like Straw Poll or...
Is IFTTT Useful? IFTTTT or "If This Then That" is web base service application that allow you to create conditional action automatically called recipe that will do an ...
Trello is Celebrating 10M Users! Trello is currently celebrating its 10M users. If you don't know or never heard what Trello is, then you should check it on their website. In short Tr...
Comments are closed.