Let’s briefly look into the concept of Structure and Semantics in Programming languages, with major references to CSS class names.

The Syntax of a programming language is a collection of rules to specify the structure or form of code, whereas, semantics refers to the interpretation of the code or the associated meaning of the symbols, characters or any part of a program. (source: techdifferences.com)

In this context, I can simply say,

Syntax relates to the rules guiding how class names can be written.

while,

Semantics refers to what class names can be interpreted to mean.

For the remaining part of today’s nudget, we’ll be using our understanding of Syntax and Semantics (S&S) to answer the questions;

Q1. How do you properly name CSS class properties?

Ans

A proper or conventional CSS class name must obey both concepts of S&S.

i.e the class name must be inline with the rules guiding naming of CSS classes, and as well, it’s meaning must be easily interpreted.

Consider a div containing a user’s personal details.

A proper CSS class naming could be

<div class="user-details">...</div>
.user-details { color: #042; }

An improper class naming could be

<div class="p2">...</div>
.p2 { color: #042; }

Q2. If a class name works, does it make it conventional?

Ans

There are conventional ways of naming classes, mainly to enhance development speed and debugging, one of which is the BEM (which stands for Block Element Modifier …see my previous article for in-depth analysis).

Even though most css codes developed without any Structure or naming conventions still works, the knowledge of S&S proves that not every code that works is conventional.

Consider the example above, although the code works, it’s is not conventional.

The concept of Semantics calls for the use of class names that are easily interpreted. I like to imagine that another developer would continue on every code I write, to help me define ‘easy-to-interpret’ class names.

Therefore, take out time for in-depth study of conventional class naming.

I hope you found this insightful, do drop a comment if you did, and if you would like to read more of my articles as well.

AUTHOR: SAMUEL UWOM

Marine Engineer | Software Developer | Graphic Designer | Technical Writer.

Samuel Tolanemugh Uwom is a certified Marine Engineer from Rivers State University, Nigeria. He is and experienced media personnel with years of experience and the lead content creator at No Limit TV; a Media Company and subsidiary of No Limit Media Production. He has worked with several SME’s and multinational agencies on Media and Tech projects. He has developed numerous software solutions which spans desktop, web, mobile and embedded systems.

In 2018, he founded Samfores Information and Technology Services (SITS), a software development firm empowering African businesses with the needed Tech solutions to enable them dominate the next industrial revolution.

Samuel is passionate about developing Africa which has seen him co-found Beamer Africa (2020); a brand showcasing African creativity in Arts and Entertainment, and a co-pioneer at TIVA Groups (2021); a non-Profit Organization aimed at powering positive social change globally.