adamsilver / maintainablecss.com

MaintainableCSS.com

maintainablecss.com's Issues

Wrong link

In 7th chapter the link to ARIA attribute documentation is wrong.

MaintainableCSS as a PDF

Hello Adam,

I loved your webpage/book, but i found a little bit tedious that all chapters are different links with the index on the bottom.

I then created for myself a PDF version of your book.

MaintainableCSS.pdf

I suggest that you offer this PDF as a downloadable version on your webpage, and maybe an option to see the whole document as a long webpage.

I hope this was useful

Thank you.

Instances of "Javascript" should be "JavaScript"

Thanks for your work.

[question] 10. Javascript: Classname instead globalState

When creating an element from a JS-Class, the current approach is to either use explicit module-class-names for every instance or absolute global state:

var module1Collapser = new Collapser(element1, {
  cssHideClass: 'moduleA-isHidden'
});

var module2Collapser = new Collapser(element2, {
  cssHideClass: 'moduleB-isHidden'
});

.moduleA-isHidden,
.moduleB-isHidden {
  display: none;
}

.globalState-isHidden {
  display: none;
}

---

But we already have a (JS) class name "Collapser", so the first thing I would concider is using that instead of global state.

/* selecting every "Collapser" instance that is hidden*/
.Collapser-isHidden {
  display: none;
}

/* if a specific Collapser-instance should look differnt */
.collapserA-isHidden {
  display: block;
  height: 0;
}

Question:

Are there any arguments agains JS-Class-name instead global state (assuming global state can be used for really everything)?

Proposal:

Replace .globalState with the js-class-name .Collapser.

---

The Javascript chapter sais:

[…] the global class will be referenced from within […] However, this approach doesn't always make sense. We may have two different modules that behave the same, but look different, which is something we've discussed in State.

In State:

[…] whilst states might be common, associated styles might not. For example, an empty basket has a gray background, where as an empty search has an absolutely-positioned image.
What about reusing state?
Sometimes, we may in fact want to reuse state across modules or components. For example, toggling an element's visibility. This is discussed in more detail in the chapter entitled Javascript.

Duplicated word

In 6th chapter the word the is duplicated in the sentense And the the CSS would be.