When it comes to CSS, the "sanctity" of the Separation of Concerns principle (SoC) has lead us to accept bloat, obsolescence, redundancy, poor caching, and more. We're introducing a new CSS architecture that we called "Atomic CSS". It challenges best practices to address many of these common issues.
40. Large Scale Websites Modularity
Poor caching from page to page
Limited reusability of styles
Specificity wars
Contextual selectors used to scope styles
Bloat!
Thursday, October 24, 13
54. SEO & Responsive Web Design
Same HTML: Crawling optimization
AWD: Vary HTTP header
Responsive Page Grid
Thursday, October 24, 13
55. HTML5 specification section on classes
... authors are encouraged to use [class
attribute] values that describe the
nature of the content, rather than
values that describe the desired
presentation of the content.
Thursday, October 24, 13
56. Nicolas Gallagher
About HTML Semantics Front End Architecture
http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
Thursday, October 24, 13
57. ...there is no inherent reason to do this. In
fact, it’s often a hindrance when working on
large websites or applications.
Thursday, October 24, 13
58. The most reusable components are
those with class names that are
independent of the content.
Thursday, October 24, 13
59. Class names should communicate useful
information to developers
Thursday, October 24, 13
60. Wilson Page
Building the new financial times web app
http://coding.smashingmagazine.com/2013/05/23/building-the-new-financial-times-web-app/
Thursday, October 24, 13
61. Components need to be dumb, they can’t know
anything of their context, or the consequences of
any interactions that may occur within them.
Thursday, October 24, 13
64. Nicole Sullivan
Our Best Practices Are Killing Us
http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/
Thursday, October 24, 13
66. Keep specificity as low as
possible and abstract repeating
visual patterns
Thursday, October 24, 13
67. Treat code like Lego. Break code into the
smallest little blocks possible.
smashing magazine - @csswizardry (via @stubbornella) #btconf
Thursday, October 24, 13
106. Re-evaluate the benefits of the
common approach rather than
adopt it as the de facto tool for
styling web pages.
Thursday, October 24, 13
107. Break code into the smallest
presentational classes as possible
Thursday, October 24, 13
108. “Everything is changing too quickly for
commandments that are etched in stone.
We all need to be open to new learnings,
new approaches, new best practices and
we need to be able to share them.
Not rules, tools.”
http://notrulestools.com/
Thursday, October 24, 13