When I first started my development career I used a lot of inline styles. At the time my thought process was that is seemed easier than creating a css file. Then putting that style in a file. Then include it on my page. Especially if it wasn’t a reusable style and specific to that page. I figured if I could just do inline style’s I could save time and get the same results. Especially if it was an easy style say a style with only one property. I recently got burned by this when I started writing a mobile version of my site. Lucky enough I did not have a ton of inline styles laying around still. I had moved most of them into some type of css property. Now that I went through this experience of creating a mobile version of my site I will never use inline style’s. Even if it’s easier at the time than going through the work of putting it into a css file. Also even if it’s just a unique css property that won’t be reused throughout the site. I guess you never really know if it will be reused in the future anyways.
One example that I ran into was with the forms that take in the data. The div wrapping the form did have a class associated with it but it was being overridden by an inline style. So even if I changed the forms css class properties it will still getting overridden by that inline style. Lucky again I had only done this for a handful of places. So the update process was fairly simple. and did not take that long. But if I didn’t have that style overridden by my inline style I could have just updated the css class in a different css file and included that. Instead of that I had to go into each template I over road the style take that out and turn it into a css class. The end result is what I want but to get there took longer than it would have. I am now able to change the style of my page without touching the HTML. Also if I need to add a new theme to my project I can do so very easily and not have to touch the HTML. At least for styling purposes.
I also took this a step further in my project. I noticed that I liked most of the styles. Most where what’s considered responsive design elements. So no matter the screen size they will work. There was only a select few that needed to be changed. So instead of duplicating all css files I modified my code base to handle it and take the mobile theme first if it exists. Inside my code base I include my css and javascript files through a helper method. This allowed me to manipulate the path based on the current theme. So I manipulated that method so that if a css file exists under the new theme for example mobile it will take that otherwise it will default to the css or javascript file’s already in place. This allow’s me to limit the amount of duplication within css classes. It was a nice way to have a clean cutoff to. The whole process went very smooth. Now I can create something like form.css and include it and until I need to override a properly keep it in one place. One I need to override a property I can simply create a new form.css file under mobile and go for it. It allows the whole process to be more flexible.
To sum it up I recommend no matter what even if it’s one property of a css element put it into some type of css file and include it. If you setup your application correctly this will not take long to do. In my application it’s as simple as adding the file and then adding the path to an array. From there the application handles the rest.