- Past work experience with XHTML, CSS – first week
- Posted by: Nuwan Sameera Hettiarachchi on: January 29th, 2012
- In: CSS,Web Comments!
I am working with Web for almost three years now. I have experience in HTML and CSS by developing many web sites and web applications. Everyone knows that CSS and HTML is very simple and has small learning curve. Actually simplicity may cause some difficulties when your are working on the larger web applications.
I know, your are very much in CSS and HTML, But you may get more complex situation when project is getting bigger. Basically your styles sheet is getting larger and it may difficult to manage. This may also effect scalability into your project. If you have a team and work with front-end development, you should have a well defined process and procedures. If not, you may get trouble in future, when you are going to improve your project.
Also web page rendering speed is another matter to subject from a Web developer perspective. The front-end developer should suggest, how to improve the user experience by adding some performance best practices into the web pages.
How we can identify this situation.
- When new features add into a project, stylesheet get larger because we couldn’t reuse style rules for new elements added.
- Lack of well-defined documentations for HTML layouts and CSS may waste your time and new updates may conflict from old styles rules.
- We have to spend more time to communicate within team to do small updates.
- Basically CSS and HTML files maintainability is more difficult within the team.
- Lack of scalability
Finally we have to learn how to structure our CSS to allow for flexibility and maintainability as our project and team grows.
Here is what we did for overcome to this situation,
The main purpose was to identify how to organize CSS, flexibility, scalability and maintainability when the our project and our team grows. The following resources were found in initial research.
- Object Oriented CSS Framework by Nicole Sullivan
- Sass – is a web-framework plugin/ command line tool which can be translated to well-formatted in adding nested rules, variables, mixins, selector inheritance, and more.
- Kss – is a methodology for documenting CSS and generating style guides
In addition to great set articles for Scalable and Modular Architecture for CSS in advance reading.
The Principles Of OOCSS
The purpose of OOCSS is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain.
Documentation is a must when you work on a project as a team. This will give more understanding among the team, it will save more time as well. KSS is great small library to provide a methodology for writing maintainable, documented CSS within a team. KSS only generate well-define documents your project.
KSS is built on Sinatra ruby framework. You can enhance the documentation by adding more simple helper. It basically support Sass to parsing the CSS documented with KSS guidelines.
The first week we try to collect the resources above. So by next week we will try to implement the thing using above tools.