Learn the Different CSS Writing Methods – Part 1

In this blog post, I want to share a summary of the various CSS writing methods I’ve learned.

However, before going any further, we should know what the term methodology means.

what is the system

According to wikipedia, methodology is the science/method that is used to find truth using discovery along with some procedures in finding the truth. Methodology includes structured methods of acquiring knowledge.

Wikipedia – Methodology

How? Can you imagine if we associate this functional term with CSS?

To be sure, let’s emphasize.

CSS is very difficult to maintain in large, complex and rapidly repeating systems.
One reason is that CSS doesn’t have a built-in scoping mechanism. Everything is global in CSS. This means that any change we make has the potential to drop and change the appearance of unrelated elements.

CSS preprocessors, such as Sass, Less and Stylus, make things easier by offering features that make writing CSS easier. But it doesn’t really fix its scalability issues.

This is why methodology is the solution to scalability and scalability in CSS.

So…,

CSS Methods are documented methods for creating CSS in a way that allows us to develop, maintain, and scale front end As a set of small and systematically separated modules.

important! There is no “best” CSS method. Each method has its advantages and disadvantages. Different approaches work better for different individuals/teams/projects.

1. OOCSS (Object Oriented CSS)

Developed by Nicole Sullivan in 2008, the key concepts of OOCSS (Object Oriented CSS) are object identification CSS, separating visual structures and styles, and avoiding location-based styles.

OOCSS focuses on Flexibility and Modernization, Single Responsibility Principle, Separation of Concerns, and other concepts from the OOP paradigm.

In OOCSS, the first step proposed by Nicole is to identify objects in CSS.
OOCSS advocates separation of the structure from the skin. This method makes a clear distinction between contents and containers.

Example:

  • .button – Provides basic structure of buttons
  • .grey-button – Apply colors and other visual properties

This method isolates codes that are likely to be written over and over again. Class Different, so when there is a new object that has the same code structure, we only need to add the class.

Example:

  • <button class="button grey-button">

Supporter:

  • reusable view styling code
  • Reduces duplication of the same property across multiple style rules
  • Location codes become more flexible
  • Deep nested selector reduction

against:

  • without enough repetitive visual patterns
  • Unnecessarily separating structure and visual style code
  • Having too many classes that can be difficult to maintain and manage

Official Documentation: http://oocss.org/

2. BEM (Block, Element, Modifier)

Developed by developers at Yandex in 2009, key concepts for BEM (Block, Element, Modifier) ​​include identifying blocks, elements, and modifiers.
The idea behind BEM is to differentiate CSS classes that fulfill different roles. This CSS classes are named in a way that indicates their role.

Example:

  • .Section Matha
  • .block__element
  • .block__element–modifier

Blocks are independent, modular UI components, while elements refer to the components (image, title, text) of the block, and modifiers can be used when the state of the block or element changes, for example when we’re using an active element. To highlight the class you want to add to a menu item, the active class acts as a modifier.

block
block is a container or Reference Where the element finds itself, such as the header, sidebar, footer.

Example: .search-form

elements
Elements are part of a block. The clause is the whole and the parts are the elements. Elements are marked by adding two underscore separators __ And the name of the element after the name of its parent.

Example: .search-form__heading, .search-form__text-fieldAnd .search-form__submit-button

modifier
A modifier is applied to a block or element to indicate a change in its presentation, or a change in its position. They are indicated by adding a separator and a modifier name to the block or element to which they are addressed.

In the official BEM site documentation, the modifier separator must be a single underscore _, However, the “BEM-like” CSS guideline convention by Harry Roberts uses two lines --It is more widely used and known than the official BEM convention.

Example: .search-form--advanced

Supporter:

  • It’s easy to use because each tag will have a class name and there is a deep lack of CSS selectors.
  • can avoid using !important which css. has an anti-pattern
  • easy to develop
  • Avoid making elements directly selectors

against:

  • To make the names intelligible, BEM suggests blocking shallow nested elements
  • For nested HTML that is more than 2-3 levels, we may find it difficult to determine the name
  • Naming conventions are not intuitive for inexperienced developers

BEM comparison with standard CSS

Well:
• Gives us more modular code. We can take any part separately.
• Allows anyone to write CSS. We don’t need to be careful with writing style and custom substitutions. It’s a good thing in a big team.
• Eliminate any exclusivity issues.
• Significantly more action.

Standard CSS (which relies on using descendant selectors):
• This means that our style depends on the context.
• Cascade awareness is required. Code in one place can affect code in another. This is not a problem in smaller teams, but it will be a serious problem in larger teams.
• May suffer from exclusivity issues that can be difficult to debug for novice developers.
• Remarkably tough.

If you don’t have a component-oriented architecture, if you have a backup of legacy code, or if you find it too difficult to do everything manually without tools (SAS, stylus, etc.), consider using BEM. Consider.

Official document: https://en.bem.info/methodology/

ending

So, so that this blog is not too long, we will split it into two parts, in the next post we will continue the discussion about this method. Stay tuned, friends!

Leave a Comment