Identifiers and classes are two important CSS selectors. The difference between the two is that the identifier can be used for one element, while the class can be used for several. Classes in CSS are needed to fetch certain elements. With this selector you can set styles. It is written like this:. Class name. One element often corresponds to several different classes, written in the tag with a space. For their names, typesetters tend to use clear, universal words in English. The right name is a whole art. Classes in CSS help create a code structure. They indicate which element an attribute refers to and clarify the meaning of the document.
Class attribute and its features
What are classes in CSS? This is the set of properties applied to a particular tag. They are used in CSS and JavaScript when performing certain tasks for elements with the specified name. If you select the tag itself as a selector, then the properties are applied to all similar elements. If you need to select one from several identical blocks and apply properties only to it, you will need a class. It is set similarly to the identifier: class = "name". For example, if you want all the headers to be blue, then just use the header tag selector. But what if you want to make only a few of them blue? Or so that the color of your headings reflects the section of the site where you are located? In this case, you need to use classes.
How is class name written
Selectors allow you to apply style to one or more elements. To do this, you need to associate it with a style, and then assign this class to some tag. A class name can contain numbers, a hyphen, underscore, but their presence is valid only in the middle or at the end of a word. You cannot start a class name in CSS with such characters. The first letter must be Latin. It is also case sensitive. You come up with it yourself. Then just add the properties and values you want to assign to the tag.
How to select an item with a specific class
To select elements with a specific class, you need to write a point, followed by its name. If you want to use the same name for several elements, but each with a different style, you need to use a dot with the name of the HTML element, for example: “p.class”. It is also possible to select elements or classes nested in another element or class. For example, when using the code “div.css-class p”, all <p> nested in the <div> that uses the .css-class class will be selected. One of the main advantages is that you do not need to apply the same properties to each element when it is nested in another using the class.
BEM methodology
Although the specification does not impose requirements on class names, web developers are encouraged to use names that describe the semantic purpose, rather than representing the element. In other words, you should not call the menu item “blue rectangle”, but for blocks use the name: “block1”, “block2”, etc. How do you name CSS classes so that your code is clear to any other developer? For this, there is a BEM methodology that allows you to streamline work on a project in a team and accelerate its implementation.
BEM Principles
“BEM” stands for “Block Element Modifier”. This methodology was invented by Yandex to facilitate the development process. She allowed to create a common language for layout designers, designers and programmers. The principles of BEM are simple:
- The typesetter must understand his code and the code of any other team member.
- Each code element can be reused.
- All team members speak the same language and name things the same.
- Specialists can freely move within different teams and work together on projects in other areas.
- Due to the clear and uniform organization of the code, a new specialist can easily enter the team and quickly get comfortable.
When using these rules, if the number of developers in a team is constantly increasing, then the speed of work on a project increases. This is due to the unity of the team. Due to the same rules, its members are able to work on various tasks.
How to name classes in CSS correctly
The BEM methodology has its own class naming rules. For example, to separate words, you must use a hyphen, and the element is isolated from the block using the underscore. The instruction on how to classify classes in CSS steps is well known to experienced professionals. But not every typesetter uses this methodology. Some will only use underscores or only hyphens when separating words. Or write the second part of the name with a capital letter. There is still debate about how to correctly name classes in CSS, and different companies have their own rules. The main thing is to learn to give them understandable names that help you not to get confused in the code, and to choose the same design for all of them.