1

I have a Page header - navigation bar, say page-header.html, that is included in all the pages in an application. The header has some css styles.

But sometimes the css styles of the application's internal pages affects the page header and vice versa.

I understand the rule of specificity and that you can add a custom id to your page header's css styles like for eg. 

#navigation-bar12345 ul{
color:red;
}

where the id is unique and thus it helps to not override the styles of other pages and not getting overridden.

But say for eg., I have a link <a href> in the page-header.html where I haven't applied any styles to it.

But inside an application page, say introduction.html, I have applied some page specific styles for the link attribute. 

a {
      color:red
  }

Considering the above scenario, I have few questions :

1) In the above case where I have no style rules specified for the link attribute in the page-header.html, How do I avoid the link's styles to be overridden by introduction.html?

2) I have read about scoped css, It helps not to override the styles of other pages. But having all the styles inside the html page is an overhead and not a good practice?

3) Is there any way where you can protect your html page(page-header.html) from the rest of your application? In my case, I do not want any of my link elements(<a href>) in page-header.html to be exposed to the styles of the other pages like introduction.html to prevent overriding.

4) Curious question - We have various widgets that are included in the pages. How do these widgets manage not manipulating other pages styles or protect their own styles from being overridden?

I have read articles and few stack overflow questions related to this but nothing has given me a clear idea yet. Thanks in advance for your help!

Gsm
  • 150
  • 1
  • 2
  • 9

1 Answers1

1

  1. You can leverage using the 'rule of specificity' (as you have already stated: #thisInputElementID vs Div > Input css rules) and the use of '!important' (color:red !important;) to set priority of styles. @David Thomas has great write up on it in this SO answer.

  2. You are right in that scoped css will bog down HTML if overused. Arley McBlain has a pretty good write-up on its uses and pitfalls here.

  3. Why not create CSS stylesheets based on only one page? You can create a stylesheet called '/pageHeader.css' and only use that sheet for that particular page.

  4. I am not sure which widgets you are referring to, but I can assume that if you look into their css, you will see a combination of answer 1. This locks down their elements and removes any ambiguity that may effect not-widget elements.

Hope this helps.

Community
  • 1
  • 1
Ethilium
  • 1,224
  • 1
  • 14
  • 20
  • Hi Ethilium, Thank you for responding and for sharing the links. For the clarity of my 3rd question, Assume I have a top bar in a page that contains all the navigation links. That top bar is imported and shared across pages say page1.html, page2.html etc and All these share a common css other than the top bar which contains total set of different styles. Certain elements in the top bar page may not require any style at all. Say, for eg., the default style for a link is blue color and hence I don't add any css. – Gsm Apr 19 '17 at 20:46
  • Gotcha. Aside from being more specific with your element styles on those other pages, you can also exclude those particular elements that you do not want affected using [:not()](https://developer.mozilla.org/en-US/docs/Web/CSS/:not). EX: a:not(.NavLinks){color: red;} . – Ethilium Apr 19 '17 at 20:52
  • Oh yes, you are right. I can do that too. Thanks! But there is no way that a HTML page's elements is protected from other pages styles right? – Gsm Apr 19 '17 at 20:56