Three bits of CSS advice

R. Alexander Miłowski

milowski@ischool.berkeley.edu

School of Information, UC Berkeley

Not Separable

The choices of markup and its styling are not completely separable. Good or bad choices in one can easily affect the other.

Let's examine a few bits of advice ...

Separate Concerns

  1. Use separate stylesheets for separate components of your application.
  2. Compartmentalize styles for widgets and imported content.
  3. Utilize media queries for specific environments (e.g. print vs mobile)
  4. Classes can be used for styling and for navigation; these do not always work together.
  5. Elements can easily have more than one class.

Remember, you can also use a build tool to combine your CSS into one file.

Scoping vs Identifiers

  1. Use classes (e.g. .list) for generic styling.
  2. Use identifiers (e.g. #mylist) for contextual specifics.

Example: In the todo list, the width of the list is specific to the layout within the document. The rule uses the element's identifier rather than class to set the width within the specific document.

Use the Cascade

  1. Don't modify other people's stylesheets unless.
  2. Override their style by using specificity in your own stylesheet.
  3. If you can't get specificity to work, the design is probably broken.
  4. If their stylesheets are really broken, just don't import them.

To use the cascade, there needs to be enough markup and class annotations. You can't easily fix impoverished markup.