{"id":1663,"date":"2018-02-06T04:32:00","date_gmt":"2018-02-06T04:32:00","guid":{"rendered":"https:\/\/binarycipher.dev\/learning-or-getting-started-with-atom-css\/"},"modified":"2018-02-06T04:32:00","modified_gmt":"2018-02-06T04:32:00","slug":"learning-or-getting-started-with-atom-css","status":"publish","type":"post","link":"https:\/\/binarycipher.dev\/learning-or-getting-started-with-atom-css\/","title":{"rendered":"Learning or getting started with Atom CSS"},"content":{"rendered":"
<\/div>
<\/div>\n
\n

<\/a><\/h2>\n

CSS is painful<\/h2>\n

CSS is a critical piece of the frontend toolkit, but it’s hard to manage, especially in large projects. Styles are written in a global scope, which is narrowed through complex selectors. Specificity issues, redundancy, bloat, and maintenance can become a nightmare. And modular, component-based projects only add to the complexity. Atomic CSS enables you to style directly in your components, avoiding the headache of managing stylesheets.<\/p>\n

Style with class<\/h2>\n

Most approaches to styling inside components rely on inline styles, which are limiting. Atomic CSS, like inline styles, offers single-purpose units of style, but applied via classes<\/em>. This allows for the use of handy things such as media queries, contextual styling and pseudo-classes. The lower specificity of classes also allows for easier overrides. And the short, predictable classnames are highly reusable and compress well.<\/p>\n

Meet Atomizer<\/h2>\n

Atomizer<\/a> is a tool for creating Atomic CSS. Generate an Atomic stylesheet dynamically from the Atomic classes you’re actually using in your project (no unused styles!), or predeclare styles in configuration – it’s up to you. Atomizer is not opinionated, brings no CSS of its own, and integrates nicely with your favorite task runner.<\/p>\n

Ref:<\/b><\/p>\n

https:\/\/acss.io\/
<\/a>
https:\/\/github.com\/acss-io\/atomizer<\/a><\/div>\n

<\/div>\n
\n
Here are the some of the book recommendations :<\/b><\/div>\n

<\/b><\/div>\n