CODEWITHSUNDEEP
htmlcssangularjs
Drew Ackerman
Drew Ackerman

Reputation: 341

Loading CSS and JS files modularly

As I continue to add on to my website, for each HTML file i add i need to include 

    <!-- Source for .css style rules -->
<link rel="stylesheet" type="text/css" href="/Hexdra/assets/css/style.css" />
<link type="text/css" href="/Hexdra/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />

<!-- JavaScript for using a custom file for resources. -->
<script src="/Hexdra/assets/scripts/angular.js"></script>
<script src="/Hexdra/assets/scripts/modernizr.custom.05819.js"></script>
<script src="/Hexdra/assets/scripts/siteScript.js"></script>

<!-- Angular Apps-->
<script type="text/javascript" src="/Hexdra/app/tank.js"></script>
<script type="text/javascript" src="/Hexdra/app/form.js"></script>

Its not an awful method, and it works every time. I just know there has to be an easier method.

I know theres the but that doesn't seem like the easiest method.

I know of the js library require.js and that's wonderful but if I dont think i can use that for my CSS files.

What I would like is a method of referencing one file, loading one file, and it then has some sort of structure or code that then imports all other required CSS and JS files.

What made me see that i needed this sort of system was to select all the files for bootstrap without loading each one like I have loaded my CSS and JS above.

Im sure im missing some key terminology so please help me along with new terms or ideas that Im on the cusp of but haven't found the verbiage to be able to describe yet.

Upvotes: 1

Views: 157

Answers (3)

cssyphus
cssyphus

Reputation: 40030

You haven't said what your back-end language is, but if you are using PHP you can do something like this:

INDEX.PHP

<?php
    include 'inc/head.inc.php';
?>
<body>
    <div>All your stuff follows here</div>
    <?php include 'inc/nav.inc.php'; ?>

inc/head.inc.php:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>MyDomain</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="some stuff I do" />
    <meta name="keywords" content="stuff, things, quality" />
    <meta name="robots" content="index,follow" />

    <link rel="stylesheet" type="text/css" href="/Hexdra/assets/css/style.css" />
    <link type="text/css" href="/Hexdra/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />

    <!-- JavaScript for using a custom file for resources. -->
    <script src="/Hexdra/assets/scripts/angular.js"></script>
    <script src="/Hexdra/assets/scripts/modernizr.custom.05819.js"></script>
    <script src="/Hexdra/assets/scripts/siteScript.js"></script>

    <!-- Angular Apps-->
    <script type="text/javascript" src="/Hexdra/app/tank.js"></script>
    <script type="text/javascript" src="/Hexdra/app/form.js"></script>

</head>

Upvotes: 0

ether6
ether6

Reputation: 381

There is nothing wrong with referencing a bunch of files in your index, but it is best practice to build your app with something like Gulp before deploying to production. Your gulp process should combine all css and js into respective minified css and js files. There are a lot a performance benefits to doing this. Sorry to be so brief

Upvotes: 0

zero298
zero298

Reputation: 26867

For CSS, there are always @import statements. See here on MDN: @import

Define a single CSS file and use @import url("some-other.css") to load all of your CSS files through the singular, "main" CSS file.

For CSS, you could use a CSS preprocessor like LESS or SASS to bundle all your files into a single file through a build step. The same principle applies to JavaScript as well through some sort of bundler whether it is r.js for require.js AMD style application or Browserify for more CommonJS style source files.

Upvotes: 1

Related Questions