We help IT Professionals succeed at work.

What is the industry standard to write javascript for CSS Property

Odessa_Technologies
Odessa_Technologies used Ask the Experts™
on
Hi Guys,

i want to know what is the industry practice to define some conditional css properties to javascript functions? We should hard-code the properties or we should create a class and use it in the css?

thanks in advance,
SMIT
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
I don't know if it's a de-facto standard, but what you should do is to have your CSS defined on different classes on your stylesheet and apply them conditionally by changing the classes of your objects.

Keep in mind that you can assign more than one class to any DOM object on your page, so you can create specific sets of css styles to classes that are added to your elements as a template.

Example:
I define a css class to side-columns on my content:

.sideColumn {
   font-size: 0.9em;
   float:right;
   width: 50%;
}

Later, any container on my content can be converted to a sideColumn just by adding that class to it's definition:

<div class="article">Normal content</div>
<div class="article sideColumn">Article that's treated as a sideColumn</div>

Author

Commented:
let me redefine my question
What is the best practice to write script?

$('#element li.class').css({"background":"someimageURL"});
or
$('#element li.class').addClass("someclass");

what ever css property it might be always use addClass - does this holds good to good script writing practice?
Definitively $('#element li.class').addClass("someclass");

You should define your styles on your stylesheets, and apply then conditionally through classes.

If you do not so, on the future any change to your styles would be more difficult to apply, as you could find difficult to state where a particular style is applied, while using classes with effective names and centralized stylesheets will help you to ease any style change in the future.
Michel PlungjanIT Expert
Top Expert 2009

Commented:
I agree. Now I understand what you meant :)

Author

Commented:
I too agree Bardobrave.  but with the same token if its not too technical configuration then i guess we can still some about of had coding in javascript.

What;s your openion on this?

Author

Commented:
thanks a lot.
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Having just spent a week testing our site for successful removal of inline and javascript written CSS, I strongly advice to put everything in the CSS files

Author

Commented:
I want you to share with us why you do not like inline and javascript written CSS? Having said that i'm asking if i'm writing a script while is too technical for a web application UI configuration and does not required condifurable UI change. then do you still suggest that inline css in javascript is not a good option?

if  so please explain why?
The main reason you can state is that one of the global objectives of web development is to split content from design.

When using inline styling you are adding your design to your content.

Sure, if you are going to use it just for a bit of very specific styles it shouldn't be so bad. However, the problem about those behaviours is that when you open a door just a little bit you found some time after that this door is wide open and difficult to close.

The real problem is always about changes. Changes are a shit, and shit happens. But they always happen. No matter how simple your project is. No matter how much your client (or your users on an internal site) swear that there'll be no more changes after going on production. There will be changes.

And when you need to change just one little thing you'll be prone to do it "inline" if you've done before. And someday you'll face that your simple little bad behaviours have grown to a mass of pure evil that's no more kind to changes. And that day, you'll have to change your whole project and regret why you didn't simply stuck to the path of light.

If you define all your styles like classes on a CSS and you assign them a className that's representative of what's doing (I mean, you use a className that is semantically correct) you always will be able to find where is the code that changes the text to red color on a determinate event and change it to green with ease.

If you use inline styles you'll find that changes are difficult to find, but also you'll change things and found that you haven't changed it on all the places where you wanted to change it (if it was in a class you just had to change that class, or create a new one and replace it where it's being used).