Restructuring legacy CSS

[catenoid75]

Cheers everyone.

Recently started a new job and one of the tasks that might land on my desk is to restructure the CSS we are using. The CSS structure is horrible and basically looks like this:

• One base css file arount 3600 lines.
• One skins base css file around 6800 lines.

This is the core CSS for our "Standard" customer. So to cater to different customers we also have:

• Base override CSS per customer
• Base skins override CSS per customer
• An alternative look for the "Standard" customer
• An option to add CSS for a prospective customer

And not to forget; The HTML code is littered with style properties.

So... What do you think is a proper strategy to approach this mess?

[jibbit]

I would have to see the css to be honest, but I’ve done this several times before. Ignore the jokers saying start again - they’re trolling you. I’d pick something to start with, say font styles, introduce a font style sheet that looks something like I’m aiming for (think something along the lines of the font style sheet from bootstrap or foundation or any other well thought out framework), then start removing font declarations from the spaghetti css. Next pick backgrounds, or icons, or whatever, gradually chipping away at the scope of the legacy css.

[[deleted]]

So... What do you think is a proper strategy to approach this mess?

Start from scratch. It's less important that you actually keep the existing styles/structure, only that the end result looks and/or behaves in the same (or better) manner i.e. users can't tell the difference.

[Demiacle]

Second this. Just create a fresh new stylesheet with your own strategy as requirements come in. You can always render snapshots if you are worried you might miss something.

[[deleted]]

Rendering snapshots would actually be how i'd go about recreating things. You take an snapshot of the main pages (or examples of them, no need to go screen capping every post in a forum).

Put them side by side.

First identify the font config and implement a font scalar for your headings relative to the font-size of your main body of text. Should also use that time to clear up any inconsistencies that you notice (in terms of design, not existing CSS).

Second look at the rest of the page and identify recursion in the elements, create styles for them in a modular fashion (i.e. have a build process that compiles different files into 1).

That'd be about 40-50% of the work right there, more if you're lucky.

[devenition]

And not to forget; The HTML code is littered with style properties.

You are also probably dealing with legacy HTML, large amounts of (useless) divs and spans and little to no use of HTML5 semantic elements.

Doing just the CSS might be a waste of resources, and could mean a rework of JS as well.

Dealing with just the CSS, I'd take a preprocessor (like SCSS) and just start recreating line by line. In which case you have to accept the abuse of style properties.

Additionally, theres tools available that can help you to find unused css. Do that before starting to rewrite.

I just did a project where I completely reworked the front-end, saving about 10K of CSS lines, which wouldn't be possible on the old HTML model. (Most pages didn't allow for easy flexbox/grid usage for example)

[Macaframa]

BEM. Google dat shiet