During Kolosek’s work on multiple projects there was often a confusion about how to use CSS properly. This document helped us and provided clarification so I wanted to share it with you. The preprocessor introduces a new syntax known as which is used in our projects. SASS 3 SCSS One of the most important things to learn is . nesting in Sass The two most frequently used guide systems are and . I’ll go through the basics of both systems in order to ensure they will be used properly in any current and future projects. RSCSS BEM General Rules First, let’s take a look at some general CSS rules that should be followed. When writing CSS, should be used, while . classes IDs should be avoided Use the syntax, syntax. SCSS never the SASS Use for indentation. two spaces When using multiple selectors in the rule declaration, . give each selector its own line When a needs to be used, first see if it could be incorporated into the elements CSS rules, to . margin or padding helper class avoid having too many classes added to a single element Do not nest selectors more than . 2 levels deep RSCSS Components When working with RSCSS you should think in . Each piece of UI should be thought as an individual component. components Classes of components should be named with two words, with a dash in the middle. Some of the naming examples include: search-form, photo-container, primary-button. Elements Each component contains . Classes should have only one . elements word If an element contains multiple words, they should be joined together to make one word. For example: userimg, smalltext, navlink. Using and while writing your CSS should be avoided. tag names ids Variants Variants can be used for both . Class names for variants are . component and element names prefixed with a dash For example: class=”button-primary -large”, class=”avatar -round”, class=”input-form -wide”. In the example below, I broke down the components into elements and showed a real life usage of RSCSS. The image shows a simple input field with a button and placeholder text. First, let’s . identify the component and break it down to elements The component includes the input field and submit button. Now, it is time to write the CSS classes. Let’s name the . component, element, and variable .signup-form { .inputfield { ... } .submitbtn { ... &.-inverted { .. } }} For naming the elements, you should connect the two words (don’t use a dash or underscore). As you can see, a variable was used for defining the style of the button. Therefore, both submitbtn and -inverted of the classes should be used on the button element. BEM BEM is a methodology that based on the Block — Element — Modifier system. Only class name selectors are used, ids are to be avoided. Blocks can be nested, or can interact with each other. They are , and are semantically equal. Blocks similar to components in RSCSS Bloks usually have a class name with one word, or two words separated by a dash. Block names may consist of Latin letters, digits, and dashes. Elements Elements are a part of the block. Element names may consist of Latin letters, digits, dashes and underscores. The class name is formed with the . For example: “ ”. name of the block plus two underscores and the element name forminput Modifiers Modifiers are used on elements to show a change in appearance, behavior or state. An elements design is changed by adding or removing a modifier. Modifier names may consist of Latin letters, digits, dashes and underscores. A modifier class name is formed by taking the name of the element class and adding two dashes plus a name of the modifier. When an element has a modifier, it must have both the element class and modifier class. For example: “ ”. blockinput blockinput — dashed In the next example, I’ll show in a practical example of the BEM methodology. The above image shows a block which has the class “ ”. It consists of an input field and a submit button. form Next, you have identified the elements within the block. Those elements are “ ” and “ ”. The “ ” element has an appearance modifier which makes the button wider. input submit submit According to all of this information, your stylesheet will be written as: .form { }.form__input { }.form__submit { }.form__submit--wide { } The HTML file will look like this: <form class="form"> <input class="form__input" placeholder="your email address" / <input type="submit" class="form__submit form__submit--wide" /> </form> I hope this article helped you understand the basics of RSCSS and BEM, as well as the class naming conventions. Check out other detailed articles related to CSS properties such as this one: , , . CSS Positions SASS and LESS Nesting CSS Columns Originally published at kolosek.com on May 24, 2018.
