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 6 of 6

Thread: css question

  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css question

    maybe a silly question but how big do u recommend that css file is?

    As im using div's my css file is already up to 40kb, and im half way through to finish my design.

    should i reduce it or what would be the max. size that u recommend?

    Thanks,

  • #2
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    IMO 40kb is acceptable but it is quite big though
    Try eliminating white-spaces - use the short methods to write your css
    example: don't use > padding-right: 20px; padding-left: 10px;
    but use > padding: 0px 20px 0px 10px;

    Depending on your website structure, you could also think about dividing you css file into parts for each section of your website (loading only css that is needed for each part)

  • #3
    New Coder
    Join Date
    Aug 2005
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the answer..

    yea the padding-left, etc..would definetly reduce the size at least for a few kb ....

    so, if i keep the .css file below 50kb, this shouldn't be a big problem for users?

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I've never really had such a large CSS file. Although this wouldn't pose a significant up in loading time--the file gets cached--I'd like to see your CSS.

  • #5
    Regular Coder
    Join Date
    Nov 2006
    Posts
    247
    Thanks
    13
    Thanked 26 Times in 24 Posts
    That's a lot of CSS, and I too would like to see it. Must be quite the layout. To answer your question, 50k isn't too bad, considering most people have high-speed internet, and the ones still on dial-up are used to things loading slow. And even then, the css file gets cached. There's probably several things you can do to reduce the size though. I'll give a few examples:


    1. Like Arnaud said, eliminate white spaces. for example:
    #element {
    margin: 10px;
    font-size: 0.8em;
    color: #000000;
    }

    could be:
    #element{margin:10px;font-size:0.8em;color:#000;}


    2. Combine multiple properties into one declaration:
    background-color: red;
    background-image: url('bg_image.gif');
    background-position: 50px 50px;
    background-repeat: no-repeat;

    to:
    background:red url('bg_image.gif') 50px 50px no-repeat;

    There are several single declaration shortcuts like this, and they can reduce the file size a lot if you haven't been using them. Everything from margins and paddings to fonts and borders have one delaration shortcuts. Quite a few examples here: http://www.w3schools.com/css/css_examples.asp


    3. There's a couple of ways to simplify things like margins and paddings. Arnaud mentioned one. Another would be:
    margin: 10px 0px 10px 0px; simplified to margin:10px 0;
    It wont cut you down much, but it's a good habit to get into.


    That's just a few things you can do, there's probably more people will point out if you show your CSS.

  • #6
    New Coder
    Join Date
    Aug 2005
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the input...
    i'll use shortcuts in future now im sure i will reduce the size of the file...

    the original css file si from candypress e-store, so im just rebuilding the layout for our store.
    i noticed in my css that i made some classes / id's, which could be combined into 1 and be used on all pages or at least in a few. what i did is, that i made new class for almost each page and just renamed the class or id..silly i know
    well every1 has to learn it oneday heh

    will have some work to do now, to try to make clean css file, but im glad u gave me some pointers

    will have to read the css examples more closley not to make more mistakes in my design
    Last edited by urko; 01-05-2008 at 04:51 PM.


  •  

    Posting Permissions

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