Member Avatar for jonadams51

Hi All,

Just wondering... I have a chunk of code which is reused on many pages. The boss has just told me he wants the displayed elements to look slightly different on some pages. I've designed the HTML to be layout independent but I'd like to know your opinions...

Is it best practise to carry on reusing the same code using CSS to mash things up a bit (inc hiding certain elements) or simply recreate the code excluding these elements?

  • 2 Contributors
  • 2 Replies
  • 93 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by jonadams51

Dani AI

Generated

— good instincts. Reuse the component when the differences are purely presentational; duplicate the markup only when the DOM or semantics must change. 's point about keeping styles external is sound: keep a single, well-documented base stylesheet and layer small, deliberate overrides for page-specific looks (loaded after the base rules).

Prefer class-based modifiers and a predictable naming scheme (for example, BEM or a SMACSS-like pattern) instead of long, high-specificity descendant selectors or many ID-based rules. That keeps overrides simple, prevents specificity hell, and makes the intent of a "variant" explicit; read more on the methodology here and on how selector specificity can bite you here.

Be careful about hiding versus removing. Hiding a lot of elements with CSS can bloat the DOM, affect accessibility, and still incur resource cost (images may still be fetched). If content must not be visible to screen readers or should be omitted entirely, remove it server-side or use proper ARIA only where appropriate; guidance on aria-hidden is here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden.

Practical rule of thumb: if differences are visual tweaks, use modifier classes and scoped overrides; if structure, semantics, or content change, use a separate template/partial.

Member Avatar for Monstette

Try creating an external css file and link it to the page, and if there are any edits to specific elements within your code, just pop it into the HEAD section

Member Avatar for jonadams51

Try creating an external css file and link it to the page, and if there are any edits to specific elements within your code, just pop it into the HEAD section

Thanks Monstette

What I've got at the moment resembles this..


Home Page HTML...

<div id="homePage">
	<div id="xsales">
		<div class="xsale">
			XSALE HTML
		</div>
	</div>
</div>

Product Page HTML...

<div id="productPage">
	<div id="xsales">
		<div class="xsale">
			XSALE HTML
		</div>
	</div>
</div>

and the CSS looks like this...

/* Standard xsale CSS */
#xsales {...}
#xsales div.xsale {...}

/* Homepage xsales */
#homePage #xsales {...}
#homePage #xsales div.xsale {...}

/* Productpage xsales */
#productPage #xsales {...}
#productPage #xsales div.xsale {...}

The thing I'm concerned about is using the same HTML for both pages as the pages will look very different and the CSS to change them around will be quite complex. I'm wondering whether its best to just restructure the HTML page instead.

Edited by jonadams51 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.