Skip navigation
Anita Adamski
Anita Adamski
Currently Being Moderated

best practices: how many css pages?

Feb 25, 2013 10:03 AM

CS6 Newbie Question

 

I seem to keep generating more css pages automatically. I'm trying for:

- boilerplate.css  : directs all browsers

- fluid.css  : fluid grid specs

- content.css : for styling everything else (paragraphs, divs, etc)

 

Is this a correct approach?

 

Somehow I keep generating fragments all over

when I use the design interface dialog boxes as opposed to writing directly in code mode.

439 Views   12 Replies   Latest reply: Nancy O., Feb 25, 2013 11:30 AM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Feb 25, 2013 10:14 AM   in reply to Anita Adamski
    Report

    I think that's a good approach.  boilerplate is a CSS reset.  FluidGrid is for layout only.  Content is for your custom content styles. 

     

    That said, there are no hard & fast rules with this.  Sometimes a Spry widget or jQuery plugin has it's own set of styles.  I usually keep them separate too.  I maintain a client site that currently has 10 CSS files to support 2 media players and a boat load of jQuery plugins.  Each one is named appropriately so I know what they do.

     

     

    Nancy O.

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    2. osgood_,
    Feb 25, 2013 10:20 AM   in reply to Anita Adamski
    Report

    Generally I find the more complex the site/layout the more css stylesheets you are likely to use. It's a big headache to be honest but there aint no other way. If you want to refine your layouts from page to page, section to section, then you are likely to end up with quite a few.

     

    As Nancy says just try to keep on top of the stylesheets by cutting out as much duplication as you can and labelling so you know what belongs to what then it will only be a nightmare to sort out after you haven't worked on the site for a few months

     
    |
    Mark as:
  • Anita Adamski
    Currently Being Moderated
    3. Anita Adamski,
    Feb 25, 2013 10:20 AM   in reply to Nancy O.
    Report

    hi Nancy,

     

    So when an "extra" css is generated for paras or div (css styling directly related to plain html, not js for examaple) I can cut and paste it into the content.css? 

     

    Do I have to redirect anything or will the moved code be found as long as it's all in the css folder?

     

    many thanks

     

    Anita

     

    edited to add p.s, thank osgood, we overlapped posts!

     
    |
    Mark as:
  • Rik Ramsay
    Currently Being Moderated
    4. Rik Ramsay,
    Feb 25, 2013 10:22 AM   in reply to Anita Adamski
    Report

    As Nancy has said, there is no right and wrong answer with this really. It would seem I work differently from Nancy in that I prefer to have only one CSS file for each site and I just copy other styles for lightbox etc into the same stylesheet. The reason I do this is to limit the amount of files the browser has to download each time a site is loaded as this speeds things up. I also try to combine all javascript into one file as well.

     

    http://developer.yahoo.com/performance/rules.html

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    5. osgood_,
    Feb 25, 2013 10:27 AM   in reply to Anita Adamski
    Report

    Anita Adamski wrote:

     

    hi Nancy,

     

    So when an "extra" css is generated for paras or div (css styling directly related to plain html, not js for examaple) I can cut and paste it into the content.css? 

     

     

    Yes you can BUT be aware that sometimes this will not work if you have several <divs>:

     

    <div id="mainContent">

    <div id="mainContentWrapper">

    <div id="mainContentLeft">

    <div id="mainContentRight'>

     

    You may find instead of this

     

    #mainContentLeft {

    color: red;

    }

     

    You have to write it like below for the content in 'mainContentLeft' to take onboard the color red.

     

    #mainContent #mainContentLeft {

    color: red;

    }

     

     

    Don't ask me when it breaks down but it does and if you are not aware it can confuse you.

     
    |
    Mark as:
  • Anita Adamski
    Currently Being Moderated
    6. Anita Adamski,
    Feb 25, 2013 10:32 AM   in reply to osgood_
    Report

    oh jeez, I do have a lot of divs.  Is there any way to direct DW to use the same content.css sheet if I'm using the design interface boxes?

     

    Or should I just try to write the code in code view, that is one way to eliminate all the extra stuff. Of course, I'm a designer not a coder so this going to get interesting.

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    7. osgood_,
    Feb 25, 2013 10:45 AM   in reply to Anita Adamski
    Report

    Anita Adamski wrote:

     

    oh jeez, I do have a lot of divs.  Is there any way to direct DW to use the same content.css sheet if I'm using the design interface boxes?

     

    Or should I just try to write the code in code view, that is one way to eliminate all the extra stuff. Of course, I'm a designer not a coder so this going to get interesting.

     

    Now I've flagged it up you know about it. Leaving the styles in the head of the page can overcome the problem BUT there is no definite point at which it happens, it just does. I've been working on something today where I had written some specific page css styles in the <head> section of the page but when I moved them to the linked stylesheet to join the other styles some of the styles were overwritten by css styles with a higher order of ranking even though the new styles were correctly inserted in the css cascade.

     

    Introducing the higher css selector name infront of them sorted out the issue.

     

    If you are going to be doing this on a regular basis I would at least try and write the styles directly rather than using the DW interface. I haven't used that in years. It takes time of course but gives you greater freedom.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    8. Nancy O.,
    Feb 25, 2013 10:47 AM   in reply to Anita Adamski
    Report

    Why aren't you editing your CSS file manually in Code View or from the CSS Panel?  See screenshots:

     

    Click tabs to show code for supporting files associated with this page.

    CS6-tabs.jpg

    CSS Files Panel:

    Select which style sheet to edit from the list of available ones.

    CS6-CSS-Panel.jpg

     

    Nancy O.

     
    |
    Mark as:
  • Anita Adamski
    Currently Being Moderated
    9. Anita Adamski,
    Feb 25, 2013 11:09 AM   in reply to Nancy O.
    Report

    I do use that, and the css panel to the far right of the split code/ design view, to edit.

     

    But when I use the interface dialog boxes to spec another new element then new sheets are added and I lose control of content.css (because nothing is added to content.css, it starts somewhere else). Granted, I am not talking about spry menu css, I don't move that -- it stays in it's spry folder).

     

    .

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    10. Nancy O.,
    Feb 25, 2013 11:14 AM   in reply to Anita Adamski
    Report

    When you create a new CSS Rule, you need to tell DW where you want it defined.   See screenshot.

    CS6-newCSSRule.jpg

    The options for this document are:

    • (This Document Only)
    • (New Style Sheet file)
    • boilerplate.css
    • FluidGrid.css
    • Content.css

     

    You must be choosing New each time.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Anita Adamski
    Currently Being Moderated
    11. Anita Adamski,
    Feb 25, 2013 11:28 AM   in reply to Nancy O.
    Report

    Oh, this dialog box I didn't use.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    12. Nancy O.,
    Feb 25, 2013 11:30 AM   in reply to Anita Adamski
    Report

    Which one have you been using?

     

     

    Nancy O.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points