Redundant css code

User 1471420 Photo


Registered User
41 posts

Hi guys
I seem to have a problem with unused, redundant css code being left in the main.css file by my edits and changes.

For example, I mistakenly added a background image to a column when it should be the row. After deleting the column image FF does not remove the corresponding css from the main.css file. The code to display the column background is still in the file! Is there a way to delete this and clean the file up? I know it can be done after export but at this early stage of building a new site its a bit of a pain.

Is this a bug in FF?
User 232214 Photo


COO
827 posts

This is very (very very) likely not a bug. :P

My guess is that you did the edit at a breakpoint and that the image is still applied at other breakpoints. If you share a link to the site or the project file (you will need to zip it to attach it) we can take a look.
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 1471420 Photo


Registered User
41 posts

Hi Bob, thanks for the reply. I didnt explain that very well.

Let me give an example, if you add a container to the layout, you get a container with no corresponding css.
If you then add some formatting, width, auto margins, border and border radius for example, your css might loo like this

.container.container.1 {
margin-right: auto;
margin-left: auto;
width: 200px;
border-width: 2px;
border-style: solid;
border-radius: 8px;
}


Then, if you go and remove all that formatting in the dewsign panel, instead of removing the css, you might find something like this still in there (hence my use of the word 'redundant')

.container.container-1 {
margin-right: 0;
margin-left: 0;
Width: auto;
border-width: 0;
border-style: none;
border-radius: 0;
}

All of that code is redundant. Not too much of a problem really until you get a complex layout with nested divs. Then the ammount of redundant css adds up to a big file. Im not sure either if this is causing problem with parent or child divs as Im having layout problems and wondered if some redundant css could be to blame. When you chop and change the layout a lot, trying to get things to sit right, it generates a lot of this code
User 232214 Photo


COO
827 posts

Got it! We have a solution for that too :P

Instead of setting the margin (or border or...) to zero, which might be a valid setting, you can remove any style rule by resetting it. You can do this for all styles applied to the current selector, or for specific styles only. You can also only remove styles that were applied at specific breakpoints. This way your stylesheet will be as crisp & clean as winter air :)

http://bob.coffeecup.com/storage/reset-styles.png
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 1471420 Photo


Registered User
41 posts

Superb! Thats perfect Bob thank you :)
User 1471420 Photo


Registered User
41 posts

This was very helpful. I went over the site resetting lots of styles and really cleaned up the css. Must have shrunk the file size by more than 50% !!

It solved this problem too
http://www.coffeecup.com/forums/foundat … s-problem/

Cheers Bob!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.