I want to generate html layout with areas (divs, spans) that can be shown/hidden conditionally. These areas are hidden by default.
If I call .hide() method with jquery on document.ready these areas may blink (browsers render partially loaded documents). So I apply "display: none" style in html layout.
I wonder what is the best practice to avoid blinking, because applying "display:none" breaks incapsulation rule - I know what jquery does with hide/show and use it. If jquery's hiding/showing implementation will change one day, I'll get the whole site unworkable.
Thank you in advance
There's absolutely nothing wrong with setting an intial display property of an element, especially if you encapsulate it in a css class.