I have heard lots of developers say they hate CSS. In my experience, this comes as a result of not taking the time to learn CSS. So here is my latest post, I'll tell you about a few naming conventions that will save you a bit of stress and countless hours down the line. Why only CSS CSS isn’t the prettiest , but it has successfully powered the styling of the web for over 20 years now. language However, as you write more CSS, you quickly see one big downside. It is darn difficult to maintain CSS. Poorly written CSS will quickly turn into a nightmare. Conventions To Use 👊 Use hyphen Delimited strings If you write a lot of JavaScript then writing variables in camel case is a common practice. Eg: blueBox = .getElementById( ) var document '......' This is correct, right? The problem is that this type of naming is well-suited to CSS. not .blueBox { : px solid blue; } .blue-box{ : px solid blue; } border 3 /* Wrong way. Don't Do This */ border 3 /* Do This. The correct way*/ This is a pretty standard CSS naming convention. Teams have different approaches to writing CSS selectors. Some teams use , while others prefer to use the more structured naming convention called BEM. hyphen delimiters There are 3 problems that CSS naming conventions try to solve To know what selector does, just by looking at its name To have an idea where selector can be used by just looking at it To know the relationships between class names, just by looking at them Have you ever seen class names written like this: .nav--secondary{ .... } .nav__header{ .... } /* This is called BEM naming convention. */ Real-life explanation 😅👊 Today is John's first day at work. He is handed over an HTML code that looks like this. <div = > class "siteNavigation" </ > div John realizes this may not be the best way to name things in CSS. So he goes ahead and refractors like the codebase like so. <div = > class "site-navigation" </ > div Poor John, he is unknown that he had broken the codebase 😩😩. Somewhere in JavaScript code, there was a relationship with the previous class name, : siteNavigation nav = .querySelector( ) const document 'siteNavigation' So the change in the class name the nav variable became . null So SAD 😩 To prevent cases as this Developer has come with some amazing and very different strategies. Use names js-class One way to mitigate such bugs is to use a class name to denote a relationship with the DOM element in question. js-* for example:- <div = > class "site-navigation js-site-navigation" < > div and in javascript code nav = .query.Selector( ) const document '.js-site-navigation' As a convention, anyone who sees the .js-site-navigation class name would understand that there is a relationship with that element in the JavaScript code. DOM Some developer use data attributes as JavaScript hooks. This isn't right. By definition, data attributes are used to store custom data. If people use the attribute, then it's perhaps okay to use data attributes in certain cases. It's your call after all. rel This has nothing to do with name convention but will save your time too. You don't need to write a comment to say will give the colour as red. But, if you're using a CSS trick that is less obvious, feel free to write a comment. color: red; Don't forget to get extension. daily.dev Thanks For Reading. Hope this article is helpful for you. 😁 Previously published at https://blog.rahulism.co/css-guide-the-art-of-naming
