UX Design and Development course

CSS Base Selectors

In short, base selectors come in three forms. Core HTML tags, classes and ids.

Native HTML tags

When talking about core HTML tags, these are analogous to setting your base CSS styles. When applying your foundational presentation layer, it is common best practice to apply these styles to these native HTML elements.

A brute force style on these elements is done with Eric Meyers CSS Reset. It's not uncommon to see something like the following:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  background: transparent;
}

Beyond the reset, you will want to build things back up again. Setting default styles to your typography(<p>, <h1>, etc ...) and core form tags(<input>, <button>, etc ...).

Classes

CSS classes(class="foo") are of course the most common form of applying presentation to the DOM. There are various architectural management solutions for this application, but in short, the HTML class attribute will accept just about any string for a name. Class names cannot start with numbers.

Classes are the most commonly used presentation application solution because they are intended to be used more then once and are very fast when it comes to browser performance.

The primary issue with CSS Classes is that they have zero semantic value. As you add classes to the DOM, these offer no real semantic value other then the taxonomy offered to the development team.

IDs

IDs(id="foo") are another common form of presentation application. While widely used, there is growing consensus that the use of IDs for presentation should be deprecated. While using an ID has a slight performance increase over Classes, this performance increases is negated by the other properties of the ID.

For one, you can only use an ID once on a page. This leads to less reused code and increased duplication.

Next, IDs are typically used to dominate the cascade. Typically when developers are in a position where the CSS cascade is not working in their favor the common response is to wrap the offending area in a <div> and place an ID as the developer knows that any rules written at that point will have priory specificity. Only to be over-ruled by inline-styles, another popular tool of choice when CSS goes wrong o_O.