Understanding how a site was created...questions

[capescafe]

Hi all,
I hope this is the right section to post in...I figured I'd pick apart a site that has been designed responsibly and adapts to different screen sizes. So I just went to mediaqueri.es/ and just picked a site and now I'm trying to pick it apart little by little to figure out how they did everything. When I first started learning web design this is mostly what helped me really learn.

So I found a site and I'm trying to understand everything...my first question is why is the stylesheet linked this way?
(I didn't put the actual URL in just so I'm not picking apart their site publicly. It's just for my learning.)

<link rel="stylesheet" href="http://thewebsite.com/?css=_styles/base.v.33264894">

what does ?css=_styles/base.v.33264894 mean and why would you link to a stylesheet that way instead of the traditional href="styles.css"?

Also is there an advantage to naming your directory with images and scripts with an _ ?

[Stevie D]

That looks like a one-off designer with an unnecessary fetish for using obscure query parameters. There's no need to do that, and I can't think of any benefit at all. If you look at other sites on the mediaqueries page, most of them use traditional referencing methods.

[capescafe]

ah ok good to know...thanks.
I also noticed this site is using a JavaScript to mask the contact email address. I know that's to prevent the spam spiders from scraping the email on this site. Is that a good practice? Are there any downsides to that? If it is a good thing to do, do you know of any good tutorials on how to do that?

[oddz]

what does ?css=_styles/base.v.33264894 mean and why would you link to a stylesheet that way instead of the traditional href="styles.css"?

The style sheet is being generated dynamically. There is some type of server side logic taking place in the generation of the style sheet. Why its there is any ones guess, but that is why it is not merely pointing at a static CSS file like styles.css. Also, naming styles sheets styles.css is completely worthless don't do that – we already know they are styles – duh.

[ScallioXTX]

Looks like a CMS generated path to me. The CSS is stored somewhere in the application in the path _styles, and the v.33264894 thing is to control browser cache. Every time the file is changed they let it automatically increment that number so browsers are forced to get the new one.
Also, it's probably "_styles" and not "styles" because if you look at it in a directory listing it will be on the top, and not cluttering the application itself (at least that's the reason I have for naming folders starting with _).

Edit:

I see oddz beat me to it

[capescafe]

Also, naming styles sheets styles.css is completely worthless don't do that – we already know they are styles – duh.

Yeah that was just an example. But just curious what do you name your stylesheets? I do different things like sometimes use part of the website name. But I've also seen like master.css or more general names like that.

[capescafe]

Looks like a CMS generated path to me. The CSS is stored somewhere in the application in the path _styles, and the v.33264894 thing is to control browser cache. Every time the file is changed they let it automatically increment that number so browsers are forced to get the new one.
Also, it's probably "_styles" and not "styles" because if you look at it in a directory listing it will be on the top, and not cluttering the application itself (at least that's the reason I have for naming folders starting with _).

Edit:

I see oddz beat me to it

Yes, I've seen several people doing that naming the directory with an _ at the beginning. I think I'll start doing that too. Looks like a good practice. Thanks.

[oddz]

Yeah that was just an example. But just curious what do you name your stylesheets? I do different things like sometimes use part of the website name. But I've also seen like master.css or more general names like that.

It really depends on the type of project. However, my base point is generally reset, layout, pages. The reset fill is a reset, simple. The layout file establishes the primary layout of the site that is continuous throughout. The pages file includes styles that target specific pages based on a class that is assigned to the body for page identification.

Then I some times add on top individual module files that are responsible for styling a specific type of reusable component such as; data-grid, form, pagination bar, tab menu, etc. Any design component that is used multiple times in different contexts yet looks the same.

Generally as a project develops I tend to reorganize things as I gain a much better understanding of the whole picture. However, my base point hasn't really changed since I began developing professionally.

Once a project is complete the all the CSS is aggregated and served in a single request even though there several separate physical files. Most of the time… that gets a little tricky if you are dealing with open source projects, especially those with image references.

[capescafe]

Once a project is complete the all the CSS is aggregated and served in a single request even though there several separate physical files. Most of the time… that gets a little tricky if you are dealing with open source projects, especially those with image references.

So you still keep all the separate css files but use @import in the one main css file? Or how do you serve them in a single request?

[oddz]

Well I work with multiple systems. One of them is Drupal which aggregates all CSS, regardless of the physical file location. Thus, serving up what might be several unrelated CSS files in a single aggregated one. The other in house system I work with does the same thing, though I merely specify the names of files in a query string and it will aggregate all those files and return a single style sheet. Both systems will only aggregate files when accessing the site from a none development domain because it is hell to debug otherwise and recopying and pasting aggregated, compressed files for small little changes is a pain. I work on projects that never completely finished, so maintainability and extendability is a big concern of mine and some things will get sacrificed in the process, if need be to promote a more maintainable product.

edit: I never use @import

[oddz]

I ran on a search for organizing css and found this which pretty much is the way I organize things, with slightly different verbiage.

Though the library file being referred to generally gets broken up across separate files for individual components. Also, the universal file being referred to is generally placed in the template or in my case layout file. However, I could see how that would have it's advantages.

edit: The only thing I would advise against is creating classes reusable, presentation based classes like .floatLeft, .red, etc. That is frowned upon and introduces presentation into the mark-up, which is never necessary. However, creating a reusable class for say a data grid, is fine considering the class merely describes the content, rather than what is looks like.

[capescafe]

I see. Why do you not use @import? I've never used it yet...but just curious why you don't use it. Is it just because you use Drupal and other systems or other reasons?

[oddz]

Never have had a need for it.

[capescafe]

I ran on a search for organizing css and found this which pretty much is the way I organize things, with slightly different verbiage.

Thanks for that link. I'll read that article.

edit: The only thing I would advise against is creating classes reusable, presentation based classes like .floatLeft, .red, etc. That is frowned upon and introduces presentation into the mark-up, which is never necessary. However, creating a reusable class for say a data grid, is fine considering the class merely describes the content, rather than what is looks like.

Yes I learned this a little while ago and started practicing not to include presentational names for my class or id names. Still learning how to make my stylesheets make more "sense" I guess.

[cranial-bore]

@import causes multiple HTTP requests. Using a single stylesheet, or having the server combine them (effectively the same) will be faster.

I figured I'd pick apart a site that has been designed responsibly

There are designed responsively not responsibly

[capescafe]

There are designed responsively not responsibly

Oh oops thanks for correcting that. That's what I meant.

[cranial-bore]

The irony is I wrote "There are designed" instead of "They are designed"