Is it better to remove an element of change it's css to be display: none

Question

I've been working on some css fixes with a custom theme, both css and templates are using the same named theme so in a sense they are a pair, you wouldn't want to have the template work with anything else but the css files

while working i noticed that some css rules just have the following

display: none;

the template i am working on is the pagination so the display: none; is used to hide the Pages text, however since the css is paired with the templates it could have been just a simple as to remove the text itsefl from the template

now i am wondering, in terms of Magento, is it better to use display: none; to hide elements in a template or just remove them all together

Answer 1

The short answer is "it depends".

display:none : If you have a semantic need for the element/content to be present, then leave it there. Examples would be if you're focused on SEO, or if you're trying to reduce an AJAX call back to the server ( unless your JS will create and insert that element again based on your criteria ).

remove element : If you're not going to need that element for anything semantic. You want to keep your DOM as clean as possible. Also, if you know that you're not going to need this element in the future, get rid of it.

This doesn't cover every situation, but I hope that it gives you some direction.

Answer 2

You'll tend to find that (at least in Magento, and to an extent other "frameworks") people will use display:none; when they aren't confident (or simply don't know how) removing an element from the DOM. As complex and interconnected the Magento core is (especially regarding javascript and elements in the DOM) people will opt for the quicker, dirtier method even if it isn't the right choice.

That said, @ryanF explains it well. If you don't need it in the DOM, you should remove it from being rendered. For certain components that someone in the future may want to add back in, consider leaving a comment or other notice so they understand what was removed (kind of what local.xml is for).