How to manage magento CSS file with over 10,000 lines?

Question

I'm a beginner with Magento, but I've been handed a css file with over 10,000 lines. The site has had a few developers work on it before I came along (I'm new), so I'm not exactly sure what is custom and what's part of the theme. There are no comments, and there seems to be some sort of grid-based css framework as well as normalizer.css

This is a typical e-commerce site with a shopping cart, check out steps, etc. Is 10,000+ lines of css overkill? I really don't know where to begin.

Also, I noticed a lot of classes have their own rules that is essentially a mini-clearfix. for example:

.first-item:after, first-item:before {
    content: " ";
    display: table;
}
.first-item:after {
    clear: both;
}
.second-item:after, first-item:before {
    content: " ";
    display: table;
}
.second-item:after {
    clear: both;
}

Is this necessary? Why not just throw clear-fix classes onto those elements, or at least combine those rules into:

for example:
first-item:before, first-item:after,
second-item:before, second-item: after, {
    ....
}

I'm kind of in a situation where I don't know what I don't know, so if you guys could let me know whether the file is overkill, or I just don't know enough of what I'm doing.

Answer 1

One tool to help cleanup massive CSS files is discussed here In the context of typography. The tools used give a good format for identifying and eliminating other CSS cruft.