.menu
.search
CHECKING STATUS
I AM LISTENING TO
|
  • ♩
  • ♪
  • ♫
  • ♬
  • ♩
  • ♪
  • ♫
  • ♬
HOME / BLOG

Organizing Your CSS / SCSS Code

LAST MODIFIED: 14. February 2025
14. January 2024
/ / /
.SHARE

Table of Contents

I am all about Sass. So organzing my CSS code has become a mission of mine :)

A POSSIBLE STRUCTURE

Structure is especially needed, when you are not the only one working on the design. So that everyone on the team can easily understand and contribute with ease. There are never too many files, as files get combined anyway.

Make your own life easier and for those you work with!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
sass/
|
|– base/
|   |– _reset.scss       # Reset/normalize
|   |– _typography.scss  # Typography rules
|   ...                  # etc…
|
|– components/
|   |– _buttons.scss     # Buttons
|   |– _carousel.scss    # Carousel
|   |– _images.scss      # Images
|   |– _dropdown.scss    # Dropdown
|   |– _navigation.scss  # Navigation
|   ...                  # etc…
|
|– utils/
|   |– _variables.scss   # Sass Variables
|   |– _functions.scss   # Sass Functions
|   |– _mixins.scss      # Sass Mixins
|   |– _utils.scss       # Class & placeholders helpers
|   ...                  # etc…
|
|– layout/
|   |– _grid.scss        # Grid system
|   |– _header.scss      # Header
|   |– _footer.scss      # Footer
|   |– _sidebar.scss     # Sidebar
|   |– _forms.scss       # Forms
|   ...                  # etc…
|
|– sections/
|   |– _home.scss        # Home specific styles
|   |– _about_us.scss    # About us specific styles
|   ...                  # etc…
|
|– themes/
|   |– _front_base.scss  # Parent theme
|   |– _front_child.scss # Child theme
|   |– _admin.scss       # Admin theme
|   ...                  # etc…
|
|– vendors/
|   |– _bootstrap.scss   # Bootstrap
|   |– _bourbon.scss     # Bourbon Mixins
|   ...                  # etc…
|
|
`– app.scss             # primary Sass file
 

THE STRUCTURE EXPLAINED

  1. BASE holds files like resets, typography and foundation structures.
  2. COMPONENTS holds specific module definitions, like buttons, navigation etc.
  3. UTILS holds my own functions, mixins and configuration for the whole project.
  4. LAYOUT holds the main files defining the different layout areas / grid of the project.
  5. SECTIONS holds the definition of pages or sub sections defined.
  6. THEMES holds files for theme switches or front / backend layouts.
  7. VENDORS holds those files that are related to external includes.

Enjoy coding …

Let’s Talk!

Looking for a reliable partner to bring your project to the next level? Whether it’s development, design, security, or ongoing support—I’d love to chat and see how I can help.

Get in touch,
and let’s create something amazing together!

RELATED POSTS

READ ABOUT IT

The Best Modern TUI Clients for SSH, SFTP, SCP and FTP

/ / / / / /

You can SSH into a server and move files around with raw scp and sftp commands, but the moment you manage more than a couple of machines you start wishing for something friendlier — without giving up the terminal. That’s exactly the gap the new wave of TUI clients fills: full-screen file explorers and SSH […]

READ ABOUT IT

Best JavaScript Color Pickers (Zero-Dependency, Open Source)

/ / /

Picking a color picker sounds like a five-minute decision, and then you open a dependency tree full of jQuery, React wrappers and “lightweight” libraries that weigh more than your whole app. If you just need a solid color picker that adds nothing to your bundle except the picker itself, you’ve come to the right place. […]

READ ABOUT IT

Markdown Beyond: Readers, Diagrams, Site Builders, Parsers and CLI Tools

/ / / / / / / /

Markdown is perfect right up until a second person touches it. On your own, a folder of .md files is the best documentation system ever invented. Add four colleagues and suddenly you’ve got three different heading styles, a README that links to a domain that expired in 2023, and Steve, who writes every sentence in […]

Alexander

I am a full-stack developer. My expertise include:

  • Server, Network and Hosting Environments
  • Data Modeling / Import / Export
  • Business Logic
  • API Layer / Action layer / MVC
  • User Interfaces
  • User Experience
  • Understand what the customer and the business needs


I have a deep passion for programming, design, and server architecture—each of these fuels my creativity, and I wouldn’t feel complete without them.

With a broad range of interests, I’m always exploring new technologies and expanding my knowledge wherever needed. The tech world evolves rapidly, and I love staying ahead by embracing the latest innovations.

Beyond technology, I value peace and surround myself with like-minded individuals.

I firmly believe in the principle: Help others, and help will find its way back to you when you need it.

.series

.highlights

.PROJECT - LEAD
.PROJECTS - I LOVE

PORTALZINE® NMN
Alexander Gräf
Stettiner Str. Nord 20
DE-49624 Löningen

PUSH THE BOUNDARIES OF YOUR PROJECT.