12 Replies Latest reply: Feb 25, 2013 11:30 AM by Nancy O. RSS

    best practices: how many css pages?

    Anita Adamski Community Member

      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.

        • 1. Re: best practices: how many css pages?
          Nancy O. CommunityMVP

          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.

          • 2. Re: best practices: how many css pages?
            osgood_ CommunityMVP

            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

            • 3. Re: best practices: how many css pages?
              Anita Adamski Community Member

              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!

              • 4. Re: best practices: how many css pages?
                Rik Ramsay Community Member

                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

                • 5. Re: best practices: how many css pages?
                  osgood_ CommunityMVP

                  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.

                  • 6. Re: best practices: how many css pages?
                    Anita Adamski Community Member

                    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.

                    • 7. Re: best practices: how many css pages?
                      osgood_ CommunityMVP

                      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.

                      • 8. Re: best practices: how many css pages?
                        Nancy O. CommunityMVP

                        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.

                        • 9. Re: best practices: how many css pages?
                          Anita Adamski Community Member

                          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).

                           

                          .

                          • 10. Re: best practices: how many css pages?
                            Nancy O. CommunityMVP

                            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.

                            • 11. Re: best practices: how many css pages?
                              Anita Adamski Community Member

                              Oh, this dialog box I didn't use.

                              • 12. Re: best practices: how many css pages?
                                Nancy O. CommunityMVP

                                Which one have you been using?

                                 

                                 

                                Nancy O.