UX Design and Development course

Semantics and naming

The following examples are the prevailing concepts for proper naming conventions with CSS

About HTML semantics and front-end architecture

A collection of thoughts, experiences, ideas that I [Nicolas Gallagher] like, and ideas that I have been experimenting with over the last year. It covers HTML semantics, components and approaches to front-end architecture, class naming patterns, and HTTP compression.

A really well written opinion on the semantics of naming of CSS class creation by Nicolas Gallagher. When it comes to naming things, without some type of conceptual structure, inevitably you will create total chaos.

Aside from naming, the next conceptual issues that we run into is how to apply these CSS classes to the DOM. While I agree with many of the points described in this article, I disagree with the continued use of multi-class patterns, especially when using CSS pre-processors like Sass.

If you use a pre-processor, you might use Sass’s @extend functionality to reduce some of the maintenance work involved in using the “single-class” pattern. However, even with the help of a pre-processor, my preference is to use the “multi-class” pattern and add modifier classes in the HTML.

Keep reading ...

MindBEMding – getting your head ’round BEM syntax

BEM – meaning block, element, modifier – is a front-end naming methodology thought up by the guys at Yandex. It is a smart way of naming your CSS classes to give them more transparency and meaning to other developers. They are far more strict and informative, which makes the BEM naming convention ideal for teams of developers on larger projects that might last a while.

This is a good read on how the methodology works and how you could possibly use this in your application. Many find this naming convention to be extremely helpful and a solid tool to utilize within an organization.

Criticism to this methodology comes from two points. One, this methodology was initially created as a means to automate the creation of HTML pages with CSS already applied via BEM tools. Two, the naming convention and application of these CSS classes are not meant to work with the cascade, but dominate it. In this article Harry takes point on how 'he' uses this methodology within his projects.

Keep reading ...