CSS Writing Methodologies: Quick Guide

oocss

Hello friends today we gonna learn about CSS Writing Methodologies: Quick Guide. So read this article, CSS Writing Methodologies: Quick Guide step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: CSS Writing Methodologies: Quick Guide

In this post we are going to see what CSS writing methodologies are, some well-known methodologies, and how they can be useful to us in optimizing our CSS code. Let’s start with the simplest question to get the ball rolling. What is a methodology?

One methodology is a system of methodsThink of a method as simply a way of doing something in a systematic way, in a certain preset way of doing things to get the desired result.

To get better results, we improve our methods by planning them better, change up the order, simplify steps – whatever that works faster and is more efficient

back to menu ↑

CSS methodology

Now let’s talk about the CSS methodology. As with just about everything in life, we also have a method of writing CSS: some write back CSS first, some put layout styles last, some start with two to three classes for styling an element, some write all CSS codes in a single file.

Our preferred methods have either been developed over time or influenced by others or required in our workplace or because of all of the above. But over time, CSS veterans have formulated it methodologies to write CSS those are more flexible, defined, reusable, understandable and manageable

We’re going to look at those formulated methodologies, including:

  1. OOCSS (Object Oriented CSS)
  2. BEM (block, element, modifier)
  3. ACSS (Atomic CSS)
  4. SMACSS (scalable and modular architecture for CSS)

Note: None of the concepts below should be confused with a framework, library or tool that has the same name and concept as these methodologies. This post is only about the methodologies to write CSS.

back to menu ↑

1. OOCSS

Developed by Nicole Sullivan in 2008, the main concepts of OOCSS (Object Oriented CSS) include CSS object identification, separation of structure and visual styles, and avoidance of location-based styles.

In OOCSS is the very first step that Nicole proposes to do identify objects in CSS

“In fact, a CSS object is a repeating visual pattern that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. That object can then be reused across a site. – Nicole Sullivan, Github (OOCSS) “

Take this structure of this site for example. Here’s something that is a repeating visual pattern and has its own independent HTML and / or CSS:

OOCSS objects

We have two types of objects here, a larger preview of titles that we will call post-preview primary and a sidebar with titles that we will call post-preview secondary.

We have to separate structure and skin (ie styles that create the look of the objects). The two types of objects have different textures, one is in a larger box, even though they look the same, with images on the left and titles on the right.

Let’s give the images of both objects a post-preview image class and add the code that puts the image to the left. This prevents us from having to repeat the code from where to place the image in objects in CSS. If there are other similar objects, we will use the post preview image for it.

Skin separation can also be done for simpler styles such as borders or backgroundsIf you have multiple objects with the same blue border, creating a separate class for the blue border and adding to objects will reduce the number of times to encode the blue borders in CSS.

Nicole also suggests not add styles based on locationFor example, instead of highlighting all links in a particular div, give those links a highlighter class with the correct CSS styles. This way you can reuse the highlighter class if you need to highlight a link in another part of the page.

Advantages of OOCSS: Reusable visual styling codes, flexible location codes, reduction of deeply nested selectors.

Cons from OOCSS: Without a fair amount of repetitive visual patterns, separating structure and visual style codes may seem unnecessary.

back to menu ↑

2. BEM

Developed by developers at Yandex, the main concepts for BEM (Block, Element, Modifier) ​​include identifying block, element and modifier and naming them accordingly.

bem

A “block” is essentially the same as an “object” (from the previous example), an “element” refers to the components of the block (image, title, preview text in the above preview post objects). A “modifier” can be used when the state of a block or element changes, for example when you add an active class to a menu item to highlight it, the active class acts as your modifier.

Once you have identified the components, give them an appropriate name. For example:

  • a menu block has the class menu
  • the items have the class menu__item (block and element are separated by a double underscore)
  • the modifier for the disabled state of the menu can have the class menu_disabled (modifier separated by a single underscore)
  • modifier for the disabled state of a menu item can be menu__item_disabled.

For modifiers, we can also use the format key_value for naming. For example, to distinguish menu items that link to obsolete articles, we can give them the class menu__item_status_obsolete, and for styling menu items that refer to pending documents, the class name can be menu__item_status_pending.

The naming convention can be changed to suit what works for you. The idea is to be able to identify blocks, elements, and modifiers of class namesCheck out some of the naming systems listed on the BEM site.

The BEM site also says how the separation of blocks, elements and modifiers can also be brought into the CSS file systemThe blocks such as “buttonsAnd “inputs” can have their own directories with the files (.css, .js) attached to those blocks, making it easier when we want to import those blocks into other projects.

Advantages of BEM:Easy to use class names and reduction of deep CSS selectors.

Disadvantages of BEM:To keep the names looking healthy, BEM recommends that we keep block-to-element nesting shallow.

back to menu ↑

3. ACSS

Made famous by Yahoo, sometime towards the end of the first decade of the 21st century, ACSS consists of creating classes for the most atomic level of styling i.e. a property-value pair, and then using them in HTML like that is needed.

acss

It is difficult to determine when ACSS (Atomic CSS) was first developed, as the concept has been in use for a while. Developers have long used classes like .clearfix {overflow: hidden}. The idea in ACSS is about have a class for almost any reusable non-content related property / value pair that we need on our site, and to add those classes to the HTML elements as needed.

Below is an example of ACSS-based classes and how they are used in HTML.

.mr-8 {margin-right: 8px;}. fl-r {float: right;}

As you can see, the number of classes will be high with this method and the HTML will be overcrowded by all those classes. This method is not 100% effective, but can be made useful if desired. After all, Yahoo uses this.

Advantages of ACSS:Format HTML without leaving HTML.

Disadvantages of ACSS:Too many lessons, not very neat and you might hate it.

back to menu ↑

4. SMACSS

Developed by Jonathan Snook SMACSS (Scalable and Modular Architecture for CSS) works by identifying the 5 different types of style rules. Based on this, class names and filing system are created.

“SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thinking process. – Jonathan Snook “

smacss

SMACSS identifies 5 types of style rules base, layout, module, state, and theme

  • Basic styles are the standard styles targeting the simple HTML tags such as

    , .

  • Layout styles are styles used to define the layout of the page, such as coding where the header, footer, and side menus go.
  • Module styles are specific to a module such as gallery or slide show.
  • Status styles are for highlighting elements with changeable states such as hidden or disabled.
  • Theme is used to change the visual scheme of the page.

The different style rules can be identified using a prefix in the class name, for example l-header (for layout) or t-header (for theme). We can also organize these different types of rules by putting them in separate files and folders.

Advantages of SMACSS:Better organized code.

Disadvantages of SMACSS: None I can think of.

There is a free online book you can read about SMACSS, or you can buy the ebook version to study it further.

back to menu ↑

Conclusion

The above CSS methodologies give you a system around manage and optimize your CSS codesThey can be combined with each other such as OOCSS-SMACSS, or OOCSS-BEM, or BEM-SAMCSS to meet your needs.

There are also frameworks and libraries if you want an automated system for running CSS methodologies such as:

  • OOCSS framework
  • BEM tools
  • Organic CSS framework (according to atomic concept).
back to menu ↑

CSS Writing Methodologies: Quick Guide: benefits

  • The CSS Writing Methodologies: Quick Guide tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the CSS Writing Methodologies: Quick Guide guide is free.

back to menu ↑

Faq

Tutorial summary of CSS Writing Methodologies: Quick Guide

In this guide, we told you about the CSS Writing Methodologies: Quick Guide; please read all steps so that you understand CSS Writing Methodologies: Quick Guide in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the CSS Writing Methodologies: Quick Guide, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the CSS Writing Methodologies: Quick Guide tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide CSS Writing Methodologies: Quick Guide. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the CSS Writing Methodologies: Quick Guide, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “CSS Writing Methodologies: Quick Guide”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide CSS Writing Methodologies: Quick Guide, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo
Shopping cart