HTML Question

Page specific CSS in Django with Javascript

This is a question about what you guys feel is acceptable or the best way of handling a problem like I have right now.

I'm using a header in Django that I use everywhere, but on the landing page I want different styling on.

So instead of making two base templates with different headers and two sass files for them respectively. I just added 11 lines of javascript styling on the page in question. If they do not have javascript enabled then no issues will happen as the header normally works with pure css.

Is this bad practice? And is there better ways to do this that is not overly complicated?

Answer Source

you can add

{% block extra_css %}
    <link href="main_styles.css" rel="stylesheet" media="screen">
{% endblock %}

to your base.html header.

and in that landing page header:

{% block extra_css %}
    <link href="landing_page_styles.css" rel="stylesheet" media="screen">
{% endblock %}

this is a bit high level. you can add blocks which contain css classes that will be overriden once you override the block:

<div class="global_class {% block extra_csscls %}{% endblock %}">

and in landing page:

{% block extra_csscls %}landing_page_css_class{% endblock %}