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 example 2 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.
Top comments (0)