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. Korean ?? 알림: 한국인 독자분들을 위해 본 기사는 한국어로 번역되었으며, 한국어 버전은 여기에서 보실 수 있습니다 CSS isn’t the prettiest ‘language,’ but it has successfully powered the styling of the web for over 20 years now. Not doing too badly, huh? 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. Here are a few naming conventions that will save you a bit of stress and countless hours down the line. Use Hyphen Delimited StringsIf you write a lot of JavaScript, then writing variables in camel case is common practice. var redBox = document.getElementById('...') Great, right? The problem is that this form of naming isn’t well-suited to CSS. Do not do this: .redBox { border: 1px solid red; } Instead, do this: .red-box { border: 1px solid red; } This is a pretty standard CSS naming convention. It is arguably more readable. Also, it is consistent with the CSS property names. // Correct .some-class { font-weight: 10em } // Wrong .some-class { fontWeight: 10em } The BEM Naming ConventionTeams have different approaches to writing CSS selectors. Some teams use hyphen delimiters, while others prefer to use the more structured naming convention called BEM. Generally, there are 3 problems that CSS naming conventions try to solve:
Have you ever seen class names written like this: .nav--secondary { ... } .nav__header { ... } That is the BEM naming convention. Explaining BEM to a 5 year OldBEM attempts to divide the overall user interface into small reusable components. Consider the image below: No, it’s not award winning :( The stick-man represents a component, such as a block of design. You may have already guessed that the B in BEM stands for ‘Block’. In the real world, this ‘block’ could represent a site navigation, header, footer, or any other block of design. Following the practice explained above, an ideal class name for this component would be The component should be styled like so: .stick-man { } We have used delimited strings here. Good! E for ElementsThe E in ‘BEM’ stands for Elements. Overall blocks of design rarely live in isolation. For instance, the stick-man has a The Using the BEM naming convention, element class names are derived by adding two underscores, followed by the element name. For example: .stick-man__head { } .stick-man__arms { } .stick-man__feet { } M for ModifiersThe M in ‘BEM’ stands for Modifiers. What if the stick-man was modified and we could have a In the real world, this could be a Using BEM, modifier class names are derived by adding two hyphensfollowed by the element name. For example: .stick-man--blue { } .stick-man--red { } The last example showed the parent component being modified. This is not always the case. What if we had stick-men of different This time the element has been modified. Remember, the element is a child component within the overall containing block. The As seen in the example above, double hyphens may also be used like so: .stick-man__head--small { } .stick-man__head--big { } Again, note the use of the double hyphens in the example above. This is used to denote a modifier. Now you’ve got it. That’s basically how the BEM naming convention works. Personally, I tend to use only hyphen delimeter class names for simple projects, and BEM for more involved user interfaces. You can read more about BEM. Why Use Naming Conventions?
Naming things is hard. We’re trying to make things easier, and save ourselves time in the future with more maintainable code. Naming things correctly in CSS will make your code easier to read and maintain. If you choose to use the BEM naming convention, it will become easier to see the relationship between your design components/blocks just by looking at the markup. Feeling confident? CSS Names with JavaScript HooksToday is John’s first day at work. He is handed over an <div class="siteNavigation"> </div> John has read this article and realizes this may not be the best way to name things in <div class="site-navigation"> </div> Looks good, huh? Unknown to John, he had broken the codebase ??? How? Somewhere in the JavaScript code, there was a relationship with the previous class name, //the Javasript code const nav = document.querySelector('.siteNavigation') So, with the change in the class name, the How sad. To prevent cases like this, developers have come up with different strategies. 1. Use js- class namesOne way to mitigate such bugs is to use a For example: <div class="site-navigation js-site-navigation"> </div> And in the JavaScript code: //the Javasript code const nav = document.querySelector('.js-site-navigation') As a convention, anyone who sees the 2. Use the Rel attributeI don’t use this technique myself, but I have seen people do. Do you recognize this? <link rel="stylesheet" type="text/css" href="main.css"> Basically, the rel attribute defines the relationship that the linked resource has to the document from which it’s referenced. In the previous example with John, proponents of this technique would do this: <div class="site-navigation" rel="js-site-navigation"> </div> And in the JavaScript: const nav = document.querySelector("[rel='js-site-navigation']") I have my doubts about this technique, but you’re likely to come accross it in some codebases. The claim here is, “well, there’s a relationship with Javascript, so I use the rel attribute to denote that”. The web is a big place with lots of different “methods” for solving the same problem. 3. Don’t use data attributesSome developers use data attributes as JavaScript hooks. This isn’t right. By definition, data attributes are used to store custom data. Edit #1: As mentioned by some amazing people in the comment section, if people use the ‘rel’ attribute, then it’s perhaps okay to use data attributes in certain cases. It’s your call afterall. Bonus Tip: Write More CSS CommentsThis has nothing to do with naming conventions, but it will save you some time too. While a lot of web developers try to NOT write JavaScript comments or stick to a few, I think you should write more CSS comments. Since CSS isn’t the most elegant “language,” well-structured comments can save time when you’re trying to understand your code. It doesn’t hurt. Take a look at how well commented the Bootstrap source code is. You do not need to write comments to say Ready to become Pro?I have created a free CSS guide to get your CSS skills blazing, immediately. Get the free ebook. The post CSS Naming Conventions that Will Save You Hours of Debugging appeared first on Design your way. from https://www.designyourway.net/blog/css-html/css-naming-conventions-that-will-save-you-hours-of-debugging/
0 Comments
Leave a Reply. |
AuthorPleasure to introduce myself I am Jamie 27 years old living in Searcy, AR. I am web developer and have developed over 50 sites for clients. Now a days I am focused on designing as I feel I am lacking it. Archives
April 2019
Categories |