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

Organizing Your CSS / SCSS Code

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
 PROJECT

I Got Tired of My macOS Menu Bar Looking Like a Garage Sale, So I Built Spacer Engine

/ / /

Here’s the thing about the macOS menu bar: Apple gives you zero control over it. Your apps just pile in from the right, squeezing together like commuters on a rush-hour train, and you either live with it or you don’t. There’s no padding, no grouping, no breathing room. Just a wall of tiny icons staring […]

READ ABOUT IT

Day 49: Self-Hosted PDF Processing APIs – Form Filling, Metadata, HTML to PDF, and Header Templates – 7 Days of Docker

/ / / / / / / / /

PDF operations are one of those recurring pain points that never fully go away. You need to fill a contract template, strip and rewrite document metadata before archiving, generate an invoice from an HTML template, and stamp every page with a branded header. The default answer is a SaaS API subscription that charges per document […]

READ ABOUT IT

Day 48: Gotenberg – Docker-Powered PDF Generation from HTML, Office Docs, and More – 7 Days of Docker

/ / / / / / / /

Generating PDFs on a server is one of those tasks that sounds simple until you actually sit down to do it. HTML-to-PDF rendering drifts between browsers, LibreOffice headless mode is finicky to install, and most SaaS solutions charge per page once you hit volume. Gotenberg solves this cleanly: a single Docker container that bundles headless […]

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.