ECSS and global styles

Whilst the Lion's share of CSS in a web application can be described as module based, there is an inevitable amount of global CSS we need to deal with. From an ECSS perspective we should keep this global CSS as minimal as possible. Typically, besides any requisite reset styles, there will be a default font-size, font-family and perhaps some default colours. These are styles that are usually applied to type selectors. Unless you have classes on the root HTML element of body for example.

Note

If you are looking for a base set of reset styles for a web application you may find my App Reset CSS useful. You can find it on GitHub here: https://github.com/benfrain/app-reset  or install via NPM with npm install app-reset.

There may also be some global structure needed. For example, if you have a common structure throughout your application (header, footer, sidebar etc), you may want to create some selectors to reflect this. In the past I have used a .st- or .sw- micro-namespace to define Structure or Site Wide but you can use whatever is most apt for you. However, my advice would be that there really shouldn't be many of these selectors as these typically relate to very broad areas that all the modules of an application should live within.

In terms of organising global CSS I currently favour a folder in the root of any project called globalCSS. In that folder would be any variables, mixins, global image assets, any font or icon-font files, a basic CSS reset file and any global CSS needed.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
52.15.74.25