When is it okay to use CSS to hide certain elements on a page with CSS instead of fixing the results programmatically?

The WordPress community has a lot of experienced experts who have provided a lot of valuable guidance and advice on WordPress.org.  The Magento Community Edition, backed by the Magento community, are just as experienced and fervent supporters.  Open source projects are incredibly proactive.  However, there are times I have encountered solutions, especially if you want to omit something from a page or certain type of page, where the first answer is usually a way to isolate the element you don’t want to show up and make a CSS hack like “.class-of-element-to-hide{display:none}”.

Simple small things can just be CSS’d away

It’s not worth your time for the real small things.  Hiding the date or occasional author byline is one thing, but this seems to a be a growing solution, especially in Magento, to solve issues of hiding certain parts of pages or results.  For instance, you may not want the “Search” bar to show up on category landing pages in WordPress, or perhaps “Rate this product” isn’t appropriate for certain pages, but it is on others.  Basically, here’s the problem I have with the “hide it in CSS” approach.  The biggest problem I have is that you’re not doing it programmatically so the script runs and does the extra work to fetch this content only for you to hide it from view.  This does not sound like a solution, nor does it seem like an efficient approach for your website in general.  Why not take the extra time to build a separate template page for certain content in WordPress, Magento, Drupal, or Joomla?  These CMS platforms all support some way to isolate and customize content, some are very straight forward, and others, especially if you’re using a theme framework, may pose some extra challenges, but it is almost always possible.

If you have to go to the core to fix it, then look for any other solution first!

Yes, you never want to edit the core files of any of these systems, and you never should have to.  Some fixes can get very tricky, however, and other solutions just may not be out there without having to hack the core or resort to CSS hacks.  There are ways to extend and override classes, you have to check on the documentation.  Don’t go the easy way because it will probably haunt you later.  If nothing else, it’s a good exercise to get into these systems and learn how to properly interface with them so you can be a better web developer.  So unless it’s a few pages that you need to hide a few small elements, like a client doesn’t want the post dates to show on certain results, exhaust the programmatic direction first!  “display:none” is not a replacement for exercising good web development code.  You could encounter issues where someone else declared the class of the element you are hiding as “!important” then there’s no telling along the cascade which CSS properties will trump over the other.

Most the time, customizing programmatically is easier than you thought.

Often, it’s an easier fix than you would have thought, even in those theme frameworks.  WordPress has “add_filter()”, “remove_filter()”, which really speeds up customization in templates or custom pages.  “Genesis” from StudioPress offers 90% of the flexibility within its framework that will enable you to customize a lot of behaviors right from the admin without writing any code or attempting to reverse-engineer and isolate a bunch of nested elements through CSS.  Yes, that 10% you can’t easily do in StudioPress might pose some unique challenges, but trying to reduce the number of processes that deliver just complete wasted results to hidden elements is something we should all strive for.  It’s about writing code that is as efficient as possible and planning and thinking ahead — it’s a basic web development principle, at least to strive for perfect efficiency.  I am amazed at how heavy Magento is and how many solutions literally hide half a page worth of widgets and responsive elements, this all took time to query, fetch, process and deliver to the browser, only to end up hidden.

Last word on WordPress customization

So many things can be customized in WordPress pretty quickly by creating a new template page in your child theme folder.  There are other ways, too, ways that are simpler but much more dangerous in the long run in my opinion, but I’ve used all of the solutions.  One challenge was that a client wanted 5 of the most recent posts for each category to show up in the landing page of each category.  Great, except for one, yes, this one they only wanted one article to show in the category and they wanted to show the entire post beneath it.  It was scary easy how fast I found a solution, but no doubt it was NOT the ideal way.  I simply inserted a script with my “” shortcode and took over the global “WP_Query” object and redefined the query!  Yikes, one line and I could alter anything drastically.  There’s probably a reason why WordPress tries to keep the development code out of the content, but in this case, the solution worked like a charm.  Whether this was a valid solution or the WordPress community will now target me as a marked man, time will tell, but in the meantime, the customer is happy…..  In the end, isn’t that also the WordPress way?  Keep the customer happy and do things as  efficiently as possible with as little code as possible?!

About Author:

Senior Cloud Software Engineer and 25+ years experienced video production, video editing and 3D animation services for a variety of global clients including local video production here in Jacksonville, Florida.

Leave a Comment

Your email address will not be published. Required fields are marked *