Skip navigation
Currently Being Moderated

Boilerplate.CSS (and Hierarchy)

Sep 28, 2013 4:46 PM

Tags: #boilerplate.css #css-styling

I want to make a change to my boilerplate.css, but I seem to remember hearing "DO NOT CHANGE ANYTHING IN BOILERPLATE". There is a rule for ul (unoredered lists) that have a 40px left marg/pad I want to get rid of. Can (or should) I change the 40px to 0px in the boilerplate.css, or should I make a rule on my stylesheetmain.css?

 

Is it OK to alter general, common CSS rules for the boilerplate.css?

 

 

Also CSS Hierarchy:

 

boilerplate.css

stylesheetmain.css

default.css

component.css

 

I have these 4 stylesheets for my page, boilerplate, being the pre-defined css rules, stylesheetmain, being my custom css, default css, a 'core' styles css stylesheet included with: component css, the stylesheet for my horizontal dropdown menu. These stylesheets are listed (and installed) in the hierarchal order listed above (in my CSS Styles Panel).

 

I believe these are all 'external css stylesheets'.

 

Seems from what I recall, that some rules I would create new for my stylesheetmain would work, but when I created a rule in my stylesheetmain to alter another CSS rule from another styleseet, it would not work? I may have not done it correct, or understand the CSS Hierarchy of multiple stylesheets. How do they affect each other? How should rules be handled-applied?

 

I do: Keep duplicate copies of all my HTML, CSS, and other files, as good practice.

 

Any help would be appreciated, thanks.

 
Replies
  • Currently Being Moderated
    Sep 28, 2013 7:13 PM   in reply to dreamweaver70

    I try to keep the number of stylesheets to a minimum, where specialist stylesheets go first and my own editable stylesheet goes last.

     

    I also tend to leave the specialist stylsheets untouched, making changes for these in my own editable stylesheet.

     

    Translating that to your situation, the order of the stylesheets would be

    boilerplate.css

    default.css

    component.css

    stylesheetmain.css

     

    where the green coloured stylesheet is the only one that is editable.

     

    This approach has several advantages

    1. Easy to follow the modifications

    2. when there are upgrades, one will not lose the modifications.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 29, 2013 10:31 AM   in reply to Ben Pleysier

    I agree with Ben.  Leave the default/reset stuff alone.  Limit modifications to the last style sheet in your hierarchy and things will be much simpler to track later. 

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 29, 2013 1:34 PM   in reply to dreamweaver70

    What matters is the style sheet order in your <head> tags.

    The last style sheet in the list typically trumps all the rest.   But CSS = cascading style sheets.  If you haven't got a handle on that concept yet,  read up on it.

    http://www.w3.org/TR/CSS2/cascade.html#cascade

     

     

     

    Nancy O.

     
    |
    Mark as:

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