DEV Community

Discussion on: Style beautiful web pages without writing any CSS. Using W3.CSS.

 
katsanos_george profile image
George Katsanos • Edited

Also I would like to point out words used in your original comment:
"atomic CSS was hip some time ago"
"the syntax is horrible"

you know what's horrible?

.header--login__buton { 
   display: block;
   padding: 10px 0;
}

.footer--menu__button {
   display: block;
   padding: 10px 0;
}

compare this with

<header>
  <a href="/whatever" class="block-button padding-s">button</a>
<header>
<footer>
  <a href="/whatever" class="block-button padding-s">button</a>
</footer>

Thread Thread
 
tomekbuszewski profile image
Tomek Buszewski

George, this is misunderstanding of BEM principles. Your code should look like this:

.link {
  display: block;
  padding: 10px 0;
}

...

.header__link {
  color: red;
}

---

<header class="header__container">
...
  <li><a href="#" class="link header__link">Hi</a></li>
...
<footer class="footer__container">
...
  <li><a href="#" class="link">Bye</a></li>

Plus, BEM syntax also isn't the prettiest one :)

Thread Thread
 
tomekbuszewski profile image
Tomek Buszewski

George, please don't exaggerate. Yes, our decisions should be based on knowledge, metrics, etc., but also on ease of development, entry and complexity levels, adoption etc. Those factors are extremely important. I know people that would even put those higher than sheer performance, simply because, when your code is really good, differences are a lot less significant than, for example, people quitting after three months because of the tech.

Thread Thread
 
katsanos_george profile image
George Katsanos

Atomic CSS is easier to use than juggling between nested selectors and having to write CSS classes like:
main__header--nav-home.
I think we analyzed enough. This is a technology blog and we should speak like professionals, not like fanboys

Thread Thread
 
jenc profile image
Jen Chan

chomps on popcorn