Front-End Architecture

Structuring your projects with processors and naming conventions.

So, lately I have been having an issue with naming my CSS classes and organizing my projects. I did a research and it was fairly constructive.

It lead me to a thing called BEM (Block, Element, Modifier) which is a known naming convention for organizing your style sheets and making your CSS easier to read among you and whoever looking through your source code.

How it works?

1. You name the main blocks of your page like this for instance: class="button".

2. Then, name the elements inside each block using two underscores (to show that
it’s part of the block): class="button__icon".

3. And in case you have a variant of that block, use two dashes to name a
modifier: class="button button--red".

File Structures

In structuring my projects I use the tree-house directory structure, which I picked up from some past research. Also, I use a Distribution folder along with a SASS folder (if using) in my Root folder, For Ex:

/Front-End-Architecture (root)
/Dist folder
/Images
...
...
/Javascript
/main.js
...
...
/CSS (compiled CSS)
main.css
/Sass folder
/main.scss
/_partials
/..

SASS Setup

Sass (Syntactically Awesome Style-sheets) is a CSS pre-processor.
I recently started noticing the importance of Sass by doing project tutorials to gain a better insight and understanding of the in-and-outs of the SASS Pre-processor.

The Points I want to highlight about my research in Front-End Architecture
is finding how resource full partials are; not only just mixins, functions and variables.

Using Sass partials are the way to go when I need to structure my styles accordingly.

Here is a list of the partials I use and how I use them.

• _base.scss (this includes my variables, mixins and functions)
• _config.scss (this includes my resets)
• _utlities.scss (these are to help maintain my project/s)
• _components.scss (this includes anything reusable such as buttons, navbars, cards etc. )

For the main.scss folder I use is for my main project structure, things that I would only use for that specific projects and also to @import my partials.

Read, Like and Share your thoughts and your way of architecture. Ill be in the comments :)