How to create complex CSS structures? [closed]

How do companies like Google, Facebook maintain their CSS files? I have looked at some of them and they are really huge, even with their names all scrambled? How do they manage to create so complex hierarchies of CSS to create those beautiful sites?

Answer

Simply by being efficient

As you said yourself they have massive libraries, they also practice, implement and actually develop techniques and methods for efficient CSS and web management.

I recommend going through Google’s Web Fundamentals, it has a wealth of information on their ideation and processes to create a fluit and natural web experience.


An excellent example of one of the many ways they strive to tame CSS is to Reduce the Scope and Complexity of Style Calculations

One example is taking when you reference an element in your CSS with just a class:

.title {
  /* styles */
}

Taking more complex CSS that looks like this:

.box:nth-last-child(-n+1) .title {
  /* styles */
}

And simplify the selector into a class:

.final-box-title {
  /* styles */
}

The management also comes down to designers too. Everything from good UX design principles to animations (JS vs CSS) all add up to a smooth and manageable experience.


There are many ways that CSS can be wrangled and learning and implementing “best practices” or new techniques and structures are a few of the ways that large companies maintain their sites.

Attribution
Source : Link , Question Author : user117913 , Answer Author : Ovaryraptor

Leave a Comment