user image

Mohamed Aboelfotoh
Published in : 2022-02-08

Is OOCSS still a good CSS architecture in 2022?

HTML & CSS

Hello everybody,

lately I was searching for the best CSS architecture approach as my projects started to grow bigger. I found an approach called (Object Oriented CSS). I read a little bit about it and found it so useful. The only thing that kept me searching not applying is that it was invented in 2013. I am afraid it turns out that it is outdated, or there is a better one out  there. Can anyone elaborate about this topic?  

Comments

Mohammed Bal'awi Date : 2022-02-09

Best answers

1

Best answers

1

In my opinion OOCSS is a good thing to know and use specially in big projects like your case, it's like a concepts or a standard instructions you need to flow to get a clean code, it has two main principles:

1 - separate structure and skin

Structure: size and position(margin, padding, width, height, ect)

Skin: the visual properties layout (color, fonts, shadow, ect)

2 - separate struc containers and content 

Container: can be presented by structure class

Content: refers to elements that are nested in other elements

……

Also you can check other css methodologies 

  • SMACSS
  • BEM

Hope this was helpful .

Mohamed Aboelfotoh Date : 2022-02-09

Best answers

4

Best answers

4

Many thanks! This is helpful! I appreciate it!

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

How to align an Textarea in the middle of the webpage
Publish date: 2022-02-27 | Comments: 1

Tag: HTML & CSS

What is the need for using (for) attr in the label of an input tag?
Publish date: 2022-02-11 | Comments: 2

Tag: HTML & CSS

Flex Box last column break to the next row
Publish date: 2022-02-10 | Comments: 1

Tag: HTML & CSS

Searching for a better way to use abstracts in Dart SASS
Publish date: 2022-02-10 | Comments: 0

Tag: HTML & CSS

How to horizontally align to the centre a li inside an ul?
Publish date: 2022-03-04 | Comments: 2

Tag: HTML & CSS

Multiple classes in :not() function in CSS
Publish date: 2022-07-25 | Comments: 2

Tag: HTML & CSS

Sticky header goes behind the Images
Publish date: 2022-02-10 | Comments: 1

Tag: HTML & CSS

Logo shrinks when resizing the browser
Publish date: 2022-02-10 | Comments: 2

Tag: HTML & CSS