keeping CSS totally separate

Question

I have created my own custom navbar. I have kept is separate in a file called main-menu.php I call it into the header using:

<?php
include "main-menu.php";
?>

The main menu is made up as follows:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<nav>
    nav contents...
</nav>
<script>
    jQuery Contents
</script>
<style>
    CSS Styling
</style>

The problem I am experiencing is that although this is a seperate file, calling into the header... the CSS i have added and the scripts/links called at the top of the page effect the layout/display on all pages of contents below the header.

for example, I am designing an e-commerce store and the description has changed its layout, as a result of the main-menu.php it has become crammed and text which should be bold are no longer bold,.

Is there anything that can be done to prevent the css in main-menu.php from effecting the rest of the page?

Answer 1

Your issues stem from either lack of understanding or misunderstanding of how both CSS and PHP includes work.

The problem I am experiencing is that although this is a seperate file, calling into the header...

When you import it, though, it is no longer a separate file. The source might be a separate file, but the include function pulls the imported code in, and the interpreters (both PHP and the browser) effectively see them as a single file. Since the final HTML/CSS/JS code is output into a single file, it follows all single file rules.

the CSS i have added and the scripts/links called at the top of the page effect the layout/display on all pages of contents below the header.

Yep, that's what happens when you add CSS to a page. This is part of the cascading part of Cascading Style Sheets (CSS).

The ideal way of addressing this is to better understand how the cascade works, but for now, we'll just address the problem in one of the easier ways and you can go from there as you learn.

Odds are good you have something like this in your styles:

a {
  font-weight: bold;
}

That's going to make all of your links bold. All. Of. Them. This is because the browser is only matching a tags.

So, to make all of your <nav> links bold, you would do this:

nav a {
  font-weight: bold;
}

If you have more than one <nav> element on your page, you can add classes and/or identifiers to them in order to tell them apart. The recommended way is to use classes for CSS, but when used sparingly and mindfully, I find IDs to be particularly helpful.

So, you might do something like this (IDs):

#header-nav a {
  font-weight: bold;
}

Or this (classes):

nav.header a {
  font-weight: bold;
}

What all of these do is tell the browser to only style links that are within <nav> elements (or, more specifically, nav elements classed header or the element named "header-nav").

What About The Bootstrap Styles I Don't Want?

This is where Bootstrap's class-happy nature works in your favor. Just don't use Bootstrap's classes, and you won't get most of its styles.

From there, you just weed out the styles still applying to your element, and override them. This can be a little hairy with these libraries, but such is the nature of the beast.

So, if you have a style like from Bootstrap:

.nav.header a {
   font-weight: bold;
}

You would simply match the specificity, or get a little more specific if necessary:

.nav.header a {
  font-weight: normal;
}
/* Or... */
.my-nav.nav.header a {
   font-weight: normal;
}

You can find out what selectors Bootstrap is using by opening your browser's developer tools and inspecting the affected items. If you're unsure, you can use the developer tools to turn on and off applied styles, or add your own. Then, once you find the selections, you can match them in your stylesheet to override Bootstrap and set it back to the original value.

So How Does Vue Do It?

As a bit of a bonus, I'm adding this in. You may see or have seen libraries such as Vue or React that allow for the creation of components. These are fully-encapsulated UI items, that maintain their own HTML, CSS, and JS, and don't interfere with one another. It may be how you came up with the way you're trying to do it.

However, what these libraries do under the hood is, at compile time they "namespace" everything, similar to what I explained, above. Your <foo> component becomes <div class="foo"> and your a { font-weight: bold; } becomes foo a { font-weight: bold; }. Similar technique, just automated.

Answer 2

There are a couple of ways of doing this.

1. Using different selectors

If your <div>s are all being affected by bootstrap and you don't want that, then simply assign an id or class that is not being used by bootstrap and then this will not conflict with bootstrap's style.

A common class name used by bootstrap in some divs is the alert class. So if you have a div with a class alert, but you want it to look different than bootstrap's style, then consider it giving it another class name such as alert-custom to keep both styles applied to your elements (depending on what class is being applied to the element)

2. Overriding Style

You could override whatever style you have already loaded for a particular element by making the desired CSS declaration the bottom-most declaration for that particular element.

If you have some CSS rules for a <div> element in your bootstrap <link />, but then you declare some other rule in a <style> element somewhere else (anywhere is fine, as long as it is BELOW the style you want to override) for that particular element or tag, then that declaration will supersede the bootstrap styling.

3. In-line Styling

This will override any previous styles declared for a particular element. You can read more about it here

I hope this helps!

Answer 3

you can add the !important property to the item you want to modify, this property will overwrite the current one. For example:

<div class="your-class">Text modiefed</div>

<!-- new css -->
<style>
.your-class{
    font-weight: bold!important;
}
</style>