Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    24
    Thanks
    13
    Thanked 0 Times in 0 Posts

    a questiopn and a helpful comment about CSS

    This is both a question and a comment about CSS from a newbe. After Googling, “CSS pros and cons”, I still haven’t found an answer to my question; are there SIGNIFICANT advantages in a single CSS Style sheet over styles on individual pages, aside from the obvious one (the ability to make changes in one place)?

    Now for the comment. In checking out some of the various code editors, I found a free one named PSPad that lets you change an HTML page to CSS automatically. Naturally, it is not a 100% change, but it is pretty handy, and I have learned a lot about CSS from using it. Now, I have a few lines of CSS code on a few of my web pages (my site will probably not have more than a couple dozen pages), as well as a “.css” style sheet of my own creation. This is the reason for my question above. Since everything is working just fine in both Firefox and IE, I am wondering if there is a compelling reason to collect all the codes and put them on the style sheet, as opposed to leaving them where they are.

    I’m hoping to get an answer, but also to put this information in front of other newbes, as this free editor has been so helpful to me.

    As always, any advice will be appreciated.

    Bo

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    It's a question of personal preference. I would say the size of the site also plays a role. That is to say, if your site is a dozen-page brochure site, why not keep it all in one stylesheet since it won't be that long? On the other hand, managing hundreds of different CSS declarations can get overwhelming on one stylesheet--all the more reason to avoid divitis and to be judicious and as sparing as possible when adding ids and classes.

    I use multiple stylesheets. I used to add an extra sheet based on the site structure; that is, if I had a series of pages with some unique elements that I could confine to one sheet. Lately, though, I've been organizing my CSS based on global site properties (courtesy Cyan for the idea). My markup <head> tags will contain one stylesheet link:

    Code:
    <link rel="stylesheet" href="css/styles.css" type="text/css" />
    That CSS file will branch out into multiple stylesheets:

    Code:
    @charset "utf-8";
    /*
    Theme Name: ---
    Theme URI: http://www.domain.com/
    Description: ---
    Version: 1.0
    Author: ---
    Author URI: http://www.domain.com/
    */
    @import url(reset.css);
    @import url(color.css);
    @import url(typography.css);
    @import url(layout.css);
    wherein are contained CSS properties that pertain to the whole site. So the markup stays simple (one CSS link), I can add stylesheets just by modifying my styles.css file and what's probably the best benefit--the way the CSS files are labeled and structured reminds me to not use too many page-specific styles, but to keep things graphically consistent, which almost always leads to a more visually appealing site.
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    Bo Dill (03-05-2009)

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    The major ones are fewer HTTP requests (which on broadband connections are a majority part of downloads) and reduced file size.

  • Users who have thanked Apostropartheid for this post:

    Bo Dill (03-05-2009)

  • #4
    New Coder
    Join Date
    Jan 2009
    Posts
    24
    Thanks
    13
    Thanked 0 Times in 0 Posts
    msuffern and CyanLight,

    Thank you both. I think my next move will be to compare all the Divs to see if any have strong similarities, and if so, combine them to reduce the total amount of code. The ones with similarities will then be moved to a single style sheet.

    Thanks again,
    Bo


  •  

    Posting Permissions

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