Working as a web developer can suck oftentimes, especially when rendering codes of the client’s project. It it becomes very prerequisite for a web developer to pay special attention towards HTML, CSS and JavaScript code, concentrating more to maintain the preexisting look and feel of a web application or a website.  A web programmer has to be very careful and make sure that HTML & CSS codes written by him doesn’t create any bad effect on the parent page on a web application or website.
All this brings defensive HTML and CSS codes rendering into a limelight. Many web developers have already started practicing defensive rendering to minimize the impact of the parent page, which mainly comprises of HTML and CSS namespacing, CSS overspecifying, CSS specificity, CSS rule priorities, CSS preprocessor and more with some level of customization.
Here are some cool guidelines for defensive HTML and CSS rendering :-
Namespaces
Generally, web developers prefix Document Object Model (DOM) Level 2 HTML Specification, classes, data attributes, as well as CSS selectors with a stork to minimize the risk of conflict between the parent page and attributes.  Another trick is to prefix all of your class names and attributes with a unique name— namespace, a JavaScript code enables you to declare all global objects that can possibly conflict with code running on the parent page and prevent conflicts CSS rules.
Namespacing HTML and CSS is quite prerequisite if you’re working for any third-party application rendering directly to the publisher’s page. Make sure that all namespaced elements with namespaces have an explicit prefix and CSS selectors can easily recognize a namespaced element via its prefix. A programmer can also use the HTML namespace with CSS, especially when browsing XML with CSS. It allows you to access many useful HTML elements such as <TABLE>, <A>, <IMG>, <SCRIPT>, and <STYLE>.
CSS specificity
Namespacing your HTML and CSS is not enough to prevent  the conflict on the publisher’s page that using styles, queries, class names, CSS uses IDs, and attributes. It may result in CSS rules heavily weighed by the web browser referred to as CSS specificity. It is one popular practice used to determine the CSS rule applied by the web browsers. Inline styles, IDs, classes+attributes and elements are four key categories that define the specificity level of a CSS selector.
Overspecifying Of CSS
In the web development industry, the approach to overspecifying CSS is quite useful to stop a conflict on the publisher’s page. Overspecify the CSS rules plays great role in declaring additional selectors boosting the specificity. It prioritizes the rules whenever any web browser makes a comparison between your CSS rules against the parent page.
By using aforementioned techniques, a web programmer can easily injecting HTML and CSS codes into the publisher’s page without any conflict.