As a developer working on responsive web designs, I often found myself buried in long, tangled CSS files. Managing themes, tweaking layouts for different devices, and maintaining readability became a challenge — especially when switching between desktop, tablet, and mobile views.
I realized that most of the issues stemmed from how CSS was structured. Colors, dimensions, shadows, media queries — all mixed together in one file. This made it hard to debug, update, or even understand the styling logic.
So I decided to build XMcss — a simple utility that splits a CSS file into clean, categorized components. It’s not fancy, but it’s incredibly useful.
What Is XMcss?
XMcss stands for eXtreme Modular CSS. It’s a lightweight tool that takes a single CSS file and breaks it down into:
- colors.css – all color-related properties
- dimensions.css – widths, heights, margins, paddings
- shadow.css – box shadows, filters
- vendor.css – vendor-prefixed properties
- custom.css – custom variables (--var)
- media.css – media queries
- advance.css – keyframes, font-face, supports
- complement.css – anything else
- main.css – imports all the above in optimized order
How XMcss Works (Python Terminal)
If you prefer command-line tools, XMcss works great in Python:
- Clone the repo:
git clone https://github.com/bmwtch/XMcss-Portable-and-Handy-CSS-Splitter.git - Place your CSS file in the
input/folder. - Run the terminal script:
python xmcss_terminal.py - The tool will:
- Pick the latest .css file from
input/ - Split it into categorized files
- Save them in the
output/folder
- Pick the latest .css file from
It uses cssutils, os, re, and glob internally. Credit to the open-source maintainers of cssutils.
XMcss GUI (Windows App)
For non-coders or quick use, I built a GUI version:
Download XMcss GUI Installer:
Click to Download
How to Use:
- Launch the app
- Click Browse Input File to select your CSS file
- Click Choose Output Folder to select where files will be saved
- Click Run XMcss Splitter
- Done! You’ll see a
main.cssand all categorized files in your folder
There’s also a Donate Me button if you’d like to support the project.
Benefits of Using XMcss
- Improved Readability – Each CSS category is isolated
- Easy Theme Switching – Swap out
colors.cssordimensions.csswithout touching layout logic - Better Responsiveness – Media queries are separated for easier device targeting
- Modular Development – Collaborate with designers and developers more efficiently
- Cleaner Debugging – Track down styling issues faster
Final Thoughts
XMcss was created by Brahman WebTech to support fellow developers. It’s free, open source, and released under the MIT License. If it helps you, feel free to donate or contribute.
Visit: https://bmwtech.in
Donate: https://bmwtech.in/donateme.php
GitHub: https://github.com/bmwtch/XMcss-Portable-and-Handy-CSS-Splitter
We welcome improvements, forks, and feedback from the community. Let’s make CSS cleaner — together.
Leave a Reply