This article covers best practices about HTML and CSS selectors
Hierarchy of elements on a web page
As a brief refresher, a web page is divided into two basic components: the <head> and the <body>. The <head> contains information about what is going to be loaded on the page, such as scripts, styles, and other metadata elements. The <body> is where all of the HTML content of the page is rendered, though it can also contain scripts and styling.
What are CSS selectors
CSS selectors are made of :
- Tags: defines the hierarchy of elements on an HTML page
- Attributes: values that apply rules to an element on a webpageData-Attributes: stores extra attribute information on standard elements
- IDs: used to include an absolutely unique name to one specific element
- Classes: used to include additional names for all page elements which are meant to have the exact same style
CSS selectors: Tag
Tags defines the hierarchy of elements on an HTML page.
<div>, <a>, <button>, <span>, etc.
CSS selectors: Attributes
ttributes are values that apply rules to an element on a webpage. E.g. The width and height of an image. Attributes are always specified in the starting tag and sually consists of name/value pairs like name="value".
CSS selectors: Data Attributes
Data-Attributes store extra attribute information on standard elements without requiring other non-standard attributes, or extra properties on DOM. When creating an event, use square brackets on the data-attribute.
CSS selectors: ID
The ID attribute can be used to include a unique name to one specific element. Only one element on a page should have a particular ID. Identified by a “#” followed by the unique value
E.g. : “#UniqueIDValue”
CSS selectors: Classes
Classes are used to include additional names for all page elements which are meant to have the exact same style.
Use Classes as part of the CSS selector to match the right element(s) on the page
Represented with a period “.” before the value, i.e. “.ClassValue”
CSS selector best practices
Selectors only need to be as specific as you want them to be. You can leave things out, as long as leaving something out doesn’t make the selector more broad than you intended.
There are many different ways to write the same selectors. As an example, for the below HTML, the following selectors all mean the same thing:
span b.blue
span .blue
#firstTag .blue
#firstTag b.blue
.blue
b.blue
.red .blue
.red b.blue
span#firstTag.red b.blueEach element of a selector is:
- Separated by a space.
- If a tag is present, it should be the first thing in each part of the selector.
- After that, if an ID is present and used, it should either immediately follow the tag, or be the first if no tag is present.
- Finally, any class or classes should come last, after a tag or ID if they are present, and there can be more than one class on a single element.
Best practices for creating click events
- Make sure elements of key features have unique IDs or classes.
- Make sure that the ID, class or attribute is not too specific or too general.
- If a button can show up in multiple spots, make sure something in the hierarchy and/or URL identifies which exact button it is.
Best practices for creating 'Change on' and 'Submit' events
Where possible, validate forms before submission to prevent inflated submission counts.
Best practices for defining pageviews
For accuracy, we recommend creating pageview events based on their path or hash, though you can create them using any of the four properties provided by the pageview URL (domain, path, query, and hash).
Considerations
1. Dynamic CSS includes random numbers or strings that change every time the site is updated. Consequently, data flow will stop or fail to initiate when the site and id/class values change.
2. React often generates unpredictable class names.