The brief was to develop the CSS for a new online venue diagnostic. The online tool aimed to give a cost-effective way to allow users to control their business strategy. The back-end and basic front-end had been completed. My task was to style the tool to the design of the main designer.
Before the project, I had only worked on smaller websites with one other developer therefore how I organised my styles was not usually a big concern; however, when it came to a larger, more complex project, how I organised my code was key to how long it would take me to code and reduce repetition. This was when using BEM CSS helped to make my coding more efficient.I loved the challenge of using BEM CSS and I now understand that Blocks are standalone entities that are meaningful on their own for example a header, Elements cannot stand alone and must be attached to a Block for example a list-item in the header, and finally Modifiers are attached to a block or element and are used to change their appearance or behavior for example making a list-item yellow.
After planning out my CSS with a senior developer, I started to develop the final outcome. Initially it took me time to adjust to the style of BEM CSS because it was a new challenge; however after developing the first page, I started to gain confidence using BEM CSS. Originally the website’s style was only from Bootstrap. With Bootstrap the developer who worked on the project before me was able to produce a responsive website using the basic components for example a button or item-list. Some of the styling was suitable to keep for the styling of the website; however, some elements required me to override the styling for Bootstrap with my own CSS.
The project was a completely new challenge that pushed me out of my comfort zone when coding; however, because my ability was pushed, I have gained a clearer understanding of BEM CSS and how to implement it. I found asking questions and gaining feedback from other developers allowed me to complete my task in the short time provided.