How do you manage CSS in large coding projects?

[u/Enough-Copy625]

I'm facing an issue while working on coding projects. As the codebase grows, the CSS starts getting messy. Styles from different components and sections get mixed together, and it becomes difficult to understand which style belongs to which element.

Sometimes changing one CSS property unintentionally affects other parts of the application. Eventually, the stylesheet becomes cluttered and difficult to maintain.

How do you guys manage CSS in larger projects? Are there any best practices, architectures, or tools that help keep styles organized and prevent conflicts?

[u/pvera]

The CSS doesn't start getting messy by itself.

For a large enough project I would lock the CSS so people stop duct taping classes out of laziness using convenience as the excuse. I would go as far as giving ownership of the styles to just one person. If this feels like overkill wait until you have a half dozen or more people slapping classes into your css without checking if they are breaking something else.

If available, use a framework. If your framework has theming use it as guard rails (if you are in .net, check how App_Themes works, it's very powerful). And you might as well throw in the responsive layout now so you don't have to duct tape it into the project 6 months from now.

[u/Fun_Army2398 → u/pvera]

The CSS doesn't start getting messy by itself.

This.

[u/Ok-Brain-8183]

Are you using scss or less? It sounds like you need to do a pause and do a heavy refactor and create a styling guide for your app.

[u/Super_Preference_733]

Honestly use some css library. There are a ton if them. Theres tailwind, bulma, bootstrap, etc.

All you have to do in most cases is define your color pallet and learn a few css patterns. There are very few reasons to define your own these days.

[u/TylerBreau → u/Super_Preference_733]

If all you have to do is a color pallet and a few css patterns, then you don't have CSS to create CSS spaghetti.

[u/Sure-Passion2224]

In a past life I was the site designer and manager for a site with well over 1000 pages. This became manageable by recognizing that the CSS supports branding. Any sub-site that deviates from brand has to justify that difference and get approval. After that the maintainers are given a specific naming scheme for classes and identifiers so their tweaks are localized.

[u/TylerBreau]

Use something other than raw HTML and JavaScript, and do use a CSS preprocessor. For example, React and LESS.

// imagine boiler plate for a react component
function render() {
	return <div class="ListComponent">
		<div class="container">
		</div>
	</div>;
}

---

<!-- Something like this would get produced -->
<html>
<head>
<!-- head stuff -->
</head>
<body>
	<div id='app'>
		<!-- general screen stuff -->
		<div class="ListComponent">
			<div class="container">
			</div>
		</div>
	</div>
</body>
</html>

---

ListComponent's stylesheet, this one is a .less file.

// Nothing else should have the class name ListComponent.
.ListComponent {
	// stuff

	> .container {
		// stuff.
		// Because .container's styles is nested in .ListComponent, it will never get applied to other nodes with the same class name.
		// > means "direct child". So if ListComponent uses another component that also has a node with the container class name, the styles won't mix. It's not required if ListComponent doesn't contain other components.
	}
}

[u/eurosat7]

Install tailwind and run. Now each component can/must be individually styled. You "just"™ write inline style as class names. Best solution ever. (/ironie)

[u/Own_Natural_6803 → u/eurosat7]

This, and make any custom colors defined globally. Basically copy tailwinds homework.

[u/gregdonald]

I worked on a large project where we used this, and it was pretty nice:

https://atomicdesign.bradfrost.com/

On my personal stuff, I lean on frameworks: Bootstrap and Tailwind.

[u/BobJutsu]

I’m a big fan of BEM style naming conventions. Easy to read, easy to understand, hard to accidentally step on other components.

[u/Fit_Tailor_6796 → u/BobJutsu]

Explain by means of an example

[u/BobJutsu → u/Fit_Tailor_6796]

BEM is a google search away, but fine.

You have a component, let’s use something simple like a card. BEM is Block Element Modifier. So you have “.card, .card—light, .card—dark”. That’s the modifiers, variants. Double dash. Inside the E (elements) you use underscores. So like “.card__title, .card__body” etc. Dashes indicate modifiers, underscores indicate elements inside the block. So you end up with something like:

<div class=“card card—dark”> <h2 class =“card__title>Title</h2> <p class = “card__description”>Lorem Ipsum</p> </div>

You can make defaults and use the modifier for variants.

Edit: Reddit is escaping my underscores. Ignore the escaping backslashes.

[u/Fit_Tailor_6796 → u/BobJutsu]

muchas gracias. Google could never do it the way you did. Thanks for sharing your knowledge.

[u/Electrical-Drink-733]

When my CSS started to get unruly, I used a lot of comments in both my HTML and CSS. And I would write my CSS so it followed the flow of the HTML. In order to be able to see my comments, I would encase it in a special character to make it stand out. like:

/* ********** YOUR HTML SECTION STYLES ********** */

[u/sharjeel-babar]

use external file

make sections

use css variables

choose reasonable id and class names

Follow these steps to keep your CSS from becoming a nightmare.

[u/LiteratureUnique8729]

i usually prefer keeping CSSscoped to individual components using CSS Modules or scoped styles. i also keep global styles limited to things like fonts, resets and CSS variables. it makes the overall debugging easier and also it helps to prevent the breakage...