CSS Best Practices When Starting A New Project

Question

I wanted to know what is the best approach to take when starting work on CSS for a large project? Since I see in most large projects (for example, wordpress) that they combine all classes that share the same properties, however, how can you know in advance that they will be mapped or is this firmware after programming?

In any case, I just wanted to know the best practices for grouping classes, identifiers, etc., as well as what works at this level as standard.

Answer 1

CSS frames

For large projects, you will most likely need additional functionality on top of the “regular” css, such as nesting, inheritance, and mixins. Any of them should do their job:

• Sass
• xCSS
• LESS
• Oocss

Performance optimization

In addition, you will want to do automatic performance optimization (concatenation, minimization and compression of source files), so take a look at:

• Minify

or something that suits your development platform.

Naming

Many large sites use some kind of prefix for class names to separate style classes from script classes. For example:.

<div class="navigation dynHomepageNav">(...)</div> 

If the dyn* class is used as a selector in scripts and the navigation class is used for styling. The advantage is that you can edit encoder scripts without touching a design, and designers change templates without worrying about functionality violations.

However, with modern Javascript and HTML5 frameworks you can do better; use semantic naming for identifiers and classes, apply style using these identifiers and classes, and use the data-* attributes for all data-* instead. Example:

 <section class="navigation" data-hook="homepageNav">(...)</div> 

What you will use with class id:

 .navigation { border: 1px dotted #9c9; padding: 12px; } 

And a script using data binding (using James Padolsey's data selection attribute for jQuery ):

 $('section:data(hook="homepageNav")').fadeIn(); 

It may not be as concise or look as good as the good old use-semantic-classes-for-all method, but it will create a neat separation of style and behavioral properties that you will appreciate when you have 50,000 HTML lines and you need to update the design.