A simple example of Django and CSS

Question

I\'m new to Django, and am trying to set up a really simple Django app.

Now, I\'m up to chapter 5 in the Django online book : http://www.djangobook.com/en/2.0/chapte

Answer 1

If you follow django's guidelines, you can simplify your life greatly.

In your sample code, inside your application directory, create a folder called static. Inside this folder, place your css files.

Example:

$ django-admin.py startproject myproject
$ cd myproject
myproject$ python manage.py startapp myapp
myproject$ mkdir myapp/static
myproject$ cd myapp/static
myproject/myapp/static$ nano style.css

In your templates:

Make sure you add myapp to the INSTALLED_APPS list in settings.py. Now when you use the built-in development server, your style sheet will be rendered correctly.

Django searches for a static directory inside installed applications by default, and with current versions of django, static files are enabled by default.

---

The Django example has the path my_app/static/my_app/myimage.jpg which is a little confusing if your app and project have the same name.

This is recommended because when you run collectstatic to gather all your static files, files with the same name will be overwritten. If you have a file called myimage.jpg in another application, it will be overwritten. Giving the application name inside the static directory will prevent this, because the exact directory structure will be replicated inside your STATIC_ROOT directory.

A simple example to illustrate the point. If you have a django project with two apps, like this:

.
├── assets
├── manage.py
├── myapp
│   ├── __init__.py
│   ├── models.py
│   ├── static
│   │   └── myapp
│   │       └── test.txt
│   ├── tests.py
│   └── views.py
├── myproj
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── settings.py
│   ├── settings.pyc
│   ├── urls.py
│   └── wsgi.py
└── otherapp
    ├── __init__.py
    ├── models.py
    ├── static
    │   └── otherapp
    │       └── test.txt
    ├── tests.py
    └── views.py

assets is your STATIC_ROOT. Now when you run collectstatic:

.
├── assets
│   ├── myapp
│   │   └── test.txt
│   └── otherapp
│       └── test.txt
├── manage.py
├── myapp
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── models.py
│   ├── static
│   │   └── myapp
│   │       └── test.txt
│   ├── tests.py
│   └── views.py
├── myproj
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── settings.py
│   ├── settings.pyc
│   ├── urls.py
│   └── wsgi.py
└── otherapp
    ├── __init__.py
    ├── __init__.pyc
    ├── models.py
    ├── static
    │   └── otherapp
    │       └── test.txt
    ├── tests.py
    └── views.py

You see it is creating the directories as well. In your templates you would now refer to each file with its "namespace" of the app: {{ STATIC_URL }}/myapp/test.txt