CODEWITHSUNDEEP
cssoptimization
Jessica
Jessica

Reputation: 2061

Reason for CSS block with no code in?

I'm currently optimising a website's code, the programmer who developed it isn't here.

There is a CSS file with around 1000 lines of code, in this file, there are many blocks with no code inside the curly braces.

For example:

.header{
}

Is there a reason to keep these? Or are they completely useless?

Upvotes: 3

Views: 198

Answers (5)

Bhavin Shah
Bhavin Shah

Reputation: 2482

.header{
}
.header .menu_div{
  background : black;
  color:white;
}
<div class="header">
  <div class="menu_div">Menu Div</div>
</div>

The person who has written CSS might have given the hierarchy for .header children. He/She might not have given CSS to parent.

If it doesn't reflect in design after removing it then you can remove it.

Upvotes: 3

Jason Smith
Jason Smith

Reputation: 1209

They serve no function in the final app, since they do not modify the CSS properties of any HTML elements in any way. The original developer probably added them as he/she defined the classes during development, but they were ultimately unused in the CSS. They can be safely deleted. (It's possible that these classes are used for other purposes such as selecting certain elements in JS, but deleting the empty selectors in the style sheet won't affect that.)

Upvotes: 2

Parthipan Natkunam
Parthipan Natkunam

Reputation: 784

Removing the empty selectors will not cause any changes to your design as they do not have any css rules associated with them. So you can safely remove them if they are empty.

Upvotes: 1

neuhaus
neuhaus

Reputation: 4104

You can remove these empty declarations.

Upvotes: 2

Dalin Huang
Dalin Huang

Reputation: 11342

commented out or just remove it, otherwise, it will still try to match those rule. (for every single HTML element will go through all CSS rule to match, try and fail.)

Upvotes: 2

Related Questions