Put CSS parts together with SMARTY + PHP

How to separate css file completely

I’m thinking how to place CSS parts together in html file generated by Smarty + php. CSS should be included within the header, but what if the page does have some individual CSS style?

I use a template engine Smarty. First I made the header (gather everything which is used in common. ) and include it at the head of html file with smarty syntax. And if there is some individual part of css in a page, I put css below the ‘include statement’.

HTML file with Smarty syntax

{include file='_include/header.inc.html'}

    <link rel="stylesheet" href="/assets/style/top.css">
    <script type="text/javascript">
        $(function(){
            $('#eyecatch ul').bxSlider({
                pager: false,
                auto: true,
                pause: 5000
            });
        })
    </script>
    <article>
    </article>

{include file='_include/footer.inc.html'}

But my co-worker checked the code generated with Smarty, and said “It’s not good practice, because should be put together at one place even it works”

There is right below the header ,because I didn’t put this line within the header.

Do you have any good ideas to clean-up/organize my code with Smarty as he pointed out?

Solution

If you want to keep css / js together you need to use template inheritance.

Create one main file for example main.tpl :

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    {block name="css"}
        <link rel="stylesheet" href="stylesheets/mystyle.css" media="all" />
    {/block}
    {block name="js"}
        <script src="js/jquery-1.11.1.min.js"></script>
    {/block}
</head>
<body>

{block name="content"}{/block}
<script>
{block name="js-code"}

    function test() {
    }
{/block}
</script>
</body>
</html>

You have here defined blocks where you would like to replace/prepend/append content.

Now in your final page you extend this file using the following code:

{extends file='main.tpl'}

{block name="css" append}
    <link rel="stylesheet" href="stylesheets/pagestyle.css" media="all" />
{/block}


{block name="js" append}
    <script src="js/jquery.validate.min.js"></script>
{/block}

{block name="js-code" append}

    function otherFunction() {

    }

{/block}

{block name="content"}
    this is content
{/block}

As you see for some blocks there is append option because you don't want to replace parent block (what is done by default) but you want to add some extra content (load extra style file, load extra js file or add extra javascript code).

As a result you will get for this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>    
    <link rel="stylesheet" href="stylesheets/mystyle.css" media="all" />    
    <link rel="stylesheet" href="stylesheets/pagestyle.css" media="all" />    
    <script src="js/jquery-1.11.1.min.js"></script>    
    <script src="js/jquery.validate.min.js"></script>
</head>
<body>
    this is content
<script>


    function test() {
    }


    function otherFunction() {

    }

</script>
</body>

As you see styles and JS are now in one place and not in many parts of HTML document