CSS Refactoring: Getting Started

CSS Refactoring: Getting Started

If you've heard of refactoring amongst developers and are not too sure where to start then this will be a good read and a new skill to pick up for programming.

Refactoring, I would describe it is bringing simplicity and organisation skills together to produce better quality and code in programming, increasing readability and even load time.

I began writing my own CSS theme which was a great idea at the start... But then I soon noticed that my file was becoming longer than an A4 sheet of paper which meant readability, and load time increased and to add to that a few headaches of the yoyo effect, going up and down your code trying to find that needle in the haystack...

I began researching more into the standards of CSS to see if it could help me and reduce some of these issues I was having as a developer. It was one of the best decisions I've made to research as a developer because straight away I took to it.

Before my code was this: (8 Lines)

body {
    background-color: #ffffff;
    color: #000000;
    padding-top: 10px;
    padding-left: 10px;
    padding-right:10px;
    padding-bottom: 10px;
}

And the difference it makes...

body { background-color: #fff; color: #000; padding: 10px; }

and now... (1 line)

It can simply show the difference where you are on the bar if you're a beginner, old schooler or intermediate/advanced in that language.

  1. Reducing Lines of Code
  2. Improved workflow
  3. Re-usability of code

And it doesn't just stop there, reducing lines of code but it can also improve your workflow in the sense when you start analysing your code you will release for example:

  • If body text is black, then why I have got the same in another class when it's not needed or required?
  • Why have do I have inline CSS elements in HTML when I can do this in CSS?

If you're also new to programming, there's one thing a lot of us miss at the beginning which is not always mentioned and its Grammar to the syntax or language. I don't recall coming across this years ago but I'm sure if I had I probably would have hit the web market a lot sooner feeling a lot more confident.

I recall coming across a CSS declaration order on Github and I made it into a simpler version as follows:


/* CSS Declation Order

1. Positioning (Position: top, right, bottom, left, z-index)
2. Box Model (Display, float, W & H, padding, margin, overflow)
3. Typographic (Font, font family, size, letter, word spacing, colour, text-align, decoration, list style)
4. visual (Background, border, box, animation, transition)
*/

If you can code like this to the future, it will reduce your time and hugely benefit you in many ways and just reading this article you'll also realise that refactoring can be a cross transferable skill to do this in another language.

Hope this helps anyone whos new to the refactoring :)

CSS Standards Link: w3.org/TR/?tag=css