Externalizing the embedded CSS?

Nevin

unread,

May 26, 2011, 9:16:27 PM5/26/11

to RightJS

Would love to get some hints on how to design the placement of these
elements.

From the suggested best practice to shorten page loading time. One
should place the CSS files at the head of the HTML page, while
Javascript files at the bottom of the page.

With this situation the embedded styles in the RightJS's UI component
actually override the styles that I defined at the CSS files loaded at
the top of the page.

For example, I try to increase the "gap" between the tabs generated by
the Tab module. I try to set .rui-tabs-tab to have a margin-right of
1em but got override by the default 0.1em value.

Is there any solution to solve this situation?

Nikolay Nemshilov

unread,

May 27, 2011, 1:52:27 AM5/27/11

to rig...@googlegroups.com

Hi Nevin,

From the suggested best practice to shorten page loading time. One
should place the CSS files at the head of the HTML page, while
Javascript files at the bottom of the page.

sorry to say that, but that's a bullshit :)

yes, it will pull your content before your scripts, but it won't make the overall downloading time any shorter and onready events fire any sooner. more of that if you download your scripts after your content the user will see your page without scripts and and get the idea that it either broken of full of bugs.

if you're really want to optimize your loading time, use http://cdn.rightjs.org it is google hosted, and it will cache all the scripts for a year ahead

--

Now, i think your real problem probably Tabs, that they initialize with a bit of a delay. This is because by default they initialize after the 'dom-ready' fired.

But, you can speed it up by initializing your tabs by yourself in the loading time, kinda like that

<html>

<head>

</head>

<body>

.....

</ul>

the rest of the content

</body>

</html>

This will make the tabs widget available right away, even if the page is not fully loaded yet

--

Cheers,

Nik

With this situation the embedded styles in the RightJS's UI component
actually override the styles that I defined at the CSS files loaded at
the top of the page.

For example, I try to increase the "gap" between the tabs generated by
the Tab module. I try to set .rui-tabs-tab to have a margin-right of
1em but got override by the default 0.1em value.

Is there any solution to solve this situation?

--
You received this message because you are subscribed to the Google Groups "RightJS" group.
To post to this group, send email to rig...@googlegroups.com.
To unsubscribe from this group, send email to rightjs+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/rightjs?hl=en.

biophonc

unread,

May 27, 2011, 2:16:18 AM5/27/11

to RightJS

Hi,

I don't like the embedded style definitions as well.
IMHO presentation should be seperated from logic ;)
At least it would be cool to "disable" the default styles
programmatically.

However, ... what I did was, to simply remove it from the tabs-src.js
& style it my way.
Works perfect for me, so you may give it a try.

regards,
Eike

On 27 Mai, 07:52, Nikolay Nemshilov <nemshi...@gmail.com> wrote:
> Hi Nevin,
>
> > From the suggested best practice to shorten page loading time. One
> > should place the CSS files at the head of the HTML page, while
> > Javascript files at the bottom of the page.
>
> sorry to say that, but that's a bullshit :)
>
> yes, it will pull your content before your scripts, but it won't make the overall downloading time any shorter and onready events fire any sooner. more of that if you download your scripts after your content the user will see your page without scripts and and get the idea that it either broken of full of bugs.
>

> if you're really want to optimize your loading time, usehttp://cdn.rightjs.orgit is google hosted, and it will cache all the scripts for a year ahead

Nikolay Nemshilov

unread,

May 27, 2011, 2:28:13 AM5/27/11

to rig...@googlegroups.com

Hi Eike,

Presentation is separated from the logic

here is the presentation

https://github.com/rightjs/rightjs-ui/blob/master/src/tabs/tabs.css

here is the logic

https://github.com/rightjs/rightjs-ui/blob/master/src/tabs/tabs.js

What's in the final build doesn't matter.

But embedding styles into javascript has several advantages

- it reduces the number of server requests
- it compresses better by server side gzip
- it is simplifies the installation process

if you want to override the default styles, just place your own styles after the javascript.
if you particularly don't like it, open up the js file and remove the last line of code. it's a second of work

--
Cheers,
Nik

--
Nikolay V. Nemshilov
The Web-Developer

biophonc

unread,

May 27, 2011, 2:54:12 AM5/27/11

to RightJS

Hi Nik,

On 27 Mai, 08:28, Nikolay Nemshilov <nemshi...@gmail.com> wrote:
> Hi Eike,
>
> Presentation is separated from the logic
>
> here is the presentation
>
> https://github.com/rightjs/rightjs-ui/blob/master/src/tabs/tabs.css
>
> here is the logic
>
> https://github.com/rightjs/rightjs-ui/blob/master/src/tabs/tabs.js
>
> What's in the final build doesn't matter.

ok, I see, I took the rightjs-all.zip bundle & there were the styles
in it.

> But embedding styles into javascript has several advantages
>
> - it reduces the number of server requests
> - it compresses better by server side gzip
> - it is simplifies the installation process

Absolutely true that ;) but I haven't seen any site that serves all
styles via JS, besides some rare GWT projects.

> if you want to override the default styles, just place your own styles after the javascript.

Well,.. most and if not all web projects have at least one CSS file &
there are a bunch of people who prefers to keep all style definitions
in one place.

> if you particularly don't like it, open up the js file and remove the last line of code. it's a second of work

that's exactly what I did ;)

regards,
Eike

> --
> Cheers,
> Nik
>
> On May 27, 2011, at 10:16 AM, biophonc wrote:
>
>
>
>
>
>
>
>
>
> > Hi,
>
> > I don't like the embedded style definitions as well.
> > IMHO presentation should be seperated from logic ;)
> > At least it would be cool to "disable" the default styles
> > programmatically.
>
> > However, ... what I did was, to simply remove it from the tabs-src.js
> > & style it my way.
> > Works perfect for me, so you may give it a try.
>
> > regards,
> > Eike
>
> > On 27 Mai, 07:52, Nikolay Nemshilov <nemshi...@gmail.com> wrote:
> >> Hi Nevin,
>
> >>> From the suggested best practice to shorten page loading time. One
> >>> should place the CSS files at the head of the HTML page, while
> >>> Javascript files at the bottom of the page.
>
> >> sorry to say that, but that's a bullshit :)
>
> >> yes, it will pull your content before your scripts, but it won't make the overall downloading time any shorter and onready events fire any sooner. more of that if you download your scripts after your content the user will see your page without scripts and and get the idea that it either broken of full of bugs.
>

> >> if you're really want to optimize your loading time, usehttp://cdn.rightjs.orgitis google hosted, and it will cache all the scripts for a year ahead

> > For more options, visit this group athttp://groups.google.com/group/rightjs?hl=en.

Nikolay Nemshilov

unread,

May 27, 2011, 3:07:03 AM5/27/11

to rig...@googlegroups.com

>> But embedding styles into javascript has several advantages
>>
>> - it reduces the number of server requests
>> - it compresses better by server side gzip
>> - it is simplifies the installation process
>
> Absolutely true that ;) but I haven't seen any site that serves all
> styles via JS, besides some rare GWT projects.

yup, it's not that widely used, probably because it might get tricky in some cases.
but still, i think there are more advantages in this approach than disadvantages. besides a fallback solution is really simple

Reply all

Reply to author

Forward