如何避免内联JavaScript与生成的内容和CSS内联性能比较

Question

So I read that inline javascript is bad (not cacheable), so I try to put all my script in separate file, but how do you avoid inline javascript if it is generated based on content, for example in ASP.NET-MVC.

$('#id').showPopUp({
    text: @Model.Message //Dynamic value from controller
})

I also have question about inline CSS, I understand that it is best to use class if you need more than 1 style, but what if I only need one style, for example :

.width100 {width: 100%;} //CSS stylesheet
<table class="width100"></table>

VS

<table style="width: 100%;"></table>

which one is better in performance?

Sorry for bad english. Any help will be appreciated.

UPDATE:

And how do I avoid inline for dynamic generated js? For example :

@{ if (flag = true) }
<script type="text/javascript">
    $('#id').getIn();
</script>

@{ else }
<script type="text/javascript">
    $('#id').getOut();
</script>

Answer 1

You have to use html-5 custom data attribute for this:

<div id="SomeDiv" data-message="@Model.Message">
</div>

and in js file:

$('#SomeDiv').showPopUp({
    text: $("#SomeDiv").data("message")
})