{"id":16456,"date":"2017-03-28T12:00:42","date_gmt":"2017-03-28T16:00:42","guid":{"rendered":"http:\/\/webdevstudios.com\/?p=16456"},"modified":"2024-04-15T12:01:23","modified_gmt":"2024-04-15T16:01:23","slug":"evolution-css-class-naming-methodologies","status":"publish","type":"post","link":"https:\/\/webdevstudios.com\/2017\/03\/28\/evolution-css-class-naming-methodologies\/","title":{"rendered":"Evolution of CSS: Class Naming Methodologies"},"content":{"rendered":"
\n

This is Part II of a series called “Evolution of CSS”.<\/p>\n

    \n
  1. Evolution of CSS: Becoming a CSS Composer<\/a><\/li>\n
  2. Evolution of CSS: Class Naming Methodologies<\/strong><\/li>\n
  3. Evolution of CSS: Overview of\u00a0Tachyons<\/li>\n<\/ol>\n<\/div>\n

    Perhaps you’ve heard this one before?<\/p>\n

    There are only two hard things in Computer Science: cache invalidation and naming things.<\/p>\n

    – Phil Karlton<\/cite><\/p><\/blockquote>\n

    Well, as any developer that writes code daily could attest those words are very true; and CSS class naming and assignment is no exception. Let’s discuss some of the reasons why and some of the solutions and theories offered to help mitigate this conundrum. But first, let’s try and clear the air around one particular subject: semantics.
    \n<\/p>\n

    Semantics<\/h2>\n

    Semantics is the study of symbols, words, phrases and signs and their meaning, both philosophically and linguistically.<\/p>\n

    In the context of front-end web development, semantics are largely concerned with the agreed meaning of HTML elements, attributes, and attribute values (including extensions like Microdata). These agreed semantics, which are usually formalised in specifications, can be used to help programmes (and subsequently humans) better understand aspects of the information on a website. However, even after formalisation, the semantics of elements, attributes, and attribute values are subject to adaptation and co-option by developers. This can lead to subsequent modifications of the formally agreed semantics (and is an HTML design principle).<\/p>\n

    “About HTML semantics and front-end architecture<\/a>” – Nicolas Gallagher<\/cite><\/p><\/blockquote>\n

    As front-end developers, we tend to toss around the word semantics a lot. We want our code to be semantic, but what do we mean?<\/p>\n

    There are certain fallacies in regards to CSS and HTML semantics. Yes, HTML can have semantic purpose and help browsers render proper markup to end-users. However, CSS has no semantics; and if it does, it is merely cultural, internal, agreed-upon semantics. In other words, to say certain classes or class naming conventions are \u201cunsemantic\u201d is moot. You’re merely stating that the class names don’t make sense (lack meaning) to you. For the most part, any class name has meaning and purpose to somebody<\/em>.<\/p>\n

    The main purpose of class naming should be to help developers. If your HTML is outlined properly, then the content’s meaning is already established. Assigning classes to any of those elements won’t affect that content’s meaning.<\/p>\n

    This is where we can differentiate content-semantic (e.g. .header<\/code> or .submenu<\/code>) vs visually semantic (e.g. .col4<\/code> or .btn-success<\/code>) class naming conventions. Later we’ll also discuss the new kid on the block: functional (or composeable) class naming.<\/p>\n

    Analyzing Scalable and Performant Methodologies<\/h2>\n

    Many people far smarter than me have written about their experience on scaling CSS. Similarly, many approaches have been born from these conversations. Here are a few and a brief overview of them individually. Hopefully, you’ve already heard of some, and you may be already using a preferred method.<\/p>\n

    Object Oriented CSS<\/a> (OOCSS)<\/h3>\n
    \"\"
    Nicole Sullivan<\/figcaption><\/figure>\n

    Nicole Sullivan first introduced the concept of Object Oriented CSS back in 2009<\/a>. Her insight and analysis of existing enterprise methods for writing CSS established a larger conversation, which many of the preceding methods stemmed from, and extended on.<\/p>\n

    The gist of the concept for OOCSS was the idea of marrying traditional object oriented programming methods with CSS. Whereas, objects are merely referring to HTML elements.<\/p>\n

    The two main tenets of OOCSS are:<\/p>\n

    Separate structure from skin<\/h4>\n

    Essentially, this means to abstract the structure and positioning styles of an object from the presentational styles, or skin.<\/p>\n

    Separate container from content<\/h4>\n

    This means to break components\u2019 dependency of their containers. Any object should be able to be placed in another container and still look and behave the same.<\/p>\n

    Block Element Modifier<\/a> (BEM)<\/h3>\n

    \"\"
    \nThe Block Element Modifier (BEM) method was developed by Yandex. BEM offers a strict means to class naming in your CSS in order to purpose them as reusable modules.<\/p>\n