File organization question

[Takazudo]

Hi Ben, I have a question about file organization.

For example, there are three namespaces below.

• TopPage
• ProductDetail
• Category

Then, here's a example structure for build.

├── gulpfile.js
└── src
    ├── baseCss
    │   ├── globalVars.css
    │   └── reset.css
    ├── namespaces
    │   ├── CategoryTop
    │   │   ├── Module1
    │   │   │   ├── Module1.css
    │   │   │   └── Module1.js
    │   │   └── Module2
    │   │       ├── Module2.css
    │   │       └── Module2.js
    │   ├── ProductDetail
    │   │   ├── Module1
    │   │   │   ├── Module1.css
    │   │   │   └── Module1.js
    │   │   └── Module2
    │   │       ├── Module2.css
    │   │       └── Module2.js
    │   └── TopPage
    │       ├── Module1
    │       │   ├── Module1.css
    │       │   └── Module1.js
    │       └── Module2
    │           ├── Module2.css
    │           └── Module2.js
    └── styles.css

Then, in stylecs.css, it concat all parital stylesheets like below.

@import "baseCss/globalVars.css";
@import "baseCss/reset.css";
@import "namespaces/**/*.css";

and gulp puts the result to the htdocs or somewhere.

Now, I have a question!

How do you think about images or svgs that belongs to each modules? Do you put those in each module directories in src, then copy those to somewhere in document root like /htdocs/assets/NAMESPCE/?

In ECSS book, you put partial html file in each namespace directories. Do you have any idea about those? For example, I thought it can be used for styleguide with some templating.

[benfrain]

Hi @Takazudo — sorry for the delay. I would put all images / assets alongside the component in an 'assets' folder. As long as you use the same structure for each you will always be writing relative paths the same way for every component. There's a little more on that in the section 'Organising Modules, their Components and naming files' here: http://ecss.io/chapter7.html

Let me know if you'd like any further clarification. :)

[Takazudo]

@benfrain Thank you for the reply, Ben!

You wrote an example in that chapter like below.

SidebarModule/
  /assets
  /css
    /components
    SidebarModule.css
  /min
  /components
  css-namespaces.json
  SidebarModule.js
  config.json

You say that you can refer images using relative path. (Is it like ../assets/foo.jpg?)

I have an extra question. In this example, where do you put SidebarModule directory? Do you put that directory under the document root or some directory under the server document root like below?

• htdocs/SidebarModule
• htdocs/namespaces/SidebarModule

or do you put that directory under the source directory that contains all files before build, then you copy those to somewhere under the server document root using gulp or some utils?

You say that we can use relative path if we put those into assets directory. But in most cases, I think we concatenate all partial css files into one file (like all.css). If we do so, it seems that the relative path does not work anymore...

Or in that example, you load SidebarModule.css directly from html?

[benfrain]

@Takazudo apologies, I don't know why I had missed this second question! I'm sure you have moved on by now!

However, in answer to the question, I would have each module in the root. E.g.:

root
   SiderBarModule/
      assets/
      css/
      etc...
   TopPage/
      assets/
      css/
      etc...

Then it's a question of your build tool/bundler doing what you need. For example, if you want to make all a single all.css file then your build tool could move all individual assets to a single asset folder that is relative to the all.css so that all paths still work. Alternatively, you might load individual components in and out, in which be better keeping separate SidebarModule.css, TopPage.css files.

So many choices! :)

[Takazudo]

@benfrain Thank you Ben! I understood that it's case-by-case! Your advice helps me!