SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Understanding how a site was created...questions

    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.)
    Code:
    <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 _ ?
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by capescafe
    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.
    The only code I hate more than my own is everyone else's.

  5. #5
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    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
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  6. #6
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    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.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  7. #7
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    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.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by capescafe
    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.
    The only code I hate more than my own is everyone else's.

  9. #9
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    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?
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  10. #10
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    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
    The only code I hate more than my own is everyone else's.

  11. #11
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    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.
    The only code I hate more than my own is everyone else's.

  12. #12
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  13. #13
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    Never have had a need for it.
    The only code I hate more than my own is everyone else's.

  14. #14
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  15. #15
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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
    mikehealy.com.au
    diigital.com art, design . Latest WorkSaturday Morning

  16. #16
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cranial-bore View Post
    There are designed responsively not responsibly
    Oh oops thanks for correcting that. That's what I meant.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  17. #17
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The irony is I wrote "There are designed" instead of "They are designed"
    mikehealy.com.au
    diigital.com art, design . Latest WorkSaturday Morning


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •