search

HTML24 / HTML5-template

Standard HTML5-based template for HTML24.
4 stars 4 forks source link

BEM / OOCSS / SMACSS Thought patterns in Codebase #18

Closed Johns3n closed 10 years ago

Johns3n commented 11 years ago

When I write CSS and HTML I like to think about it as if I am playing with LEGO bricks.

Each website that I create is a new LEGO playset like Pirates, Star Wars, etc..

Looking at the box, the playsets do not have anything in common with each other. But when i open the boxes, all the different LEGO bricks go together ACROSS playsets with ease!

The same thing should apply to a frontend codebase / base template.

When you are making CSS you should split up your different files, something like this:

- main.less
- slideshow.less
- nav.less
- theme.less

Now main.less is the box of your LEGO playset! This is what ties everything together but all it does is import all the other "bricks" into it (slideshow.less, nav.less, theme.less).

The good thing about this thought is of course that you can make re-usable and none specific CSS, that you can quickly copy the slideshow.less from a pirate website, into a star wars website and it will work just right away! Because there are no dependies for the .slideshow class ANYWHERE else than the slideshow.less

Now I have only skimmed the surface of the subject that is BEM, OOCSS, SMACSS. But if you do not declare that kind of thought pattern (and file pattern) from the start every time you create a new project, your CSS is always going to be convoluted and unusable in other projects.

Pros:

Easy cut 25% of your development time after +10 projects, with resuable object oriented CSS code.

CSS will be more steamlined AND everyone will code HTML and CSS the same way.

No inheritence problems and convoluted !important hell pains

. Cons:

It again takes a massive effort on the developers part to learn a new thought pattern for their coding BUT again! it's not different from when we did table layouts.

If we stay in our old ways of doing HTML and CSS we are NEVER going to move forward, we will always think "Ohh this is good enough as it is! Let's not change if it ain't broke".

Might not be broken, but why not make it better?

SOURCES: http://smacss.com/ http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/ http://vimeo.com/44773888 http://vimeo.com/55021877

DKvistgaard commented 10 years ago

These are good patterns. I agree. This however not the idea of this template.

This template is served as an completely empty, skeleton template, ready to be turned in everything direction you might want to take it to that serves best for each project. For some projects it makes good sense to use one of these patterns, but for others it doesn't.

BEM, OOCSS and SMACSS is not just about splitting your LESS or SASS files up into multiple. You can use these structures in basic CSS as well. These patterns are all in code and not in the file structure. By giving your elements meaningful classes depending on what the element is used as, and name the child-elements accordingly (like .widget with the child header-element called .widget-header). This does make everything more reusable. I agree.

However this is an empty template. Completely empty. So you can take this skeleton template and use your BEM, OOCSS or SMACSS approach in it. You can use it however you like to.