4

We are a small front-end dev-team working with 18 months of experience and recently we got in touch with a first major project, ie. a medium complexity back-office web app, but with lots and lots of views.

Since there are obviously new sets of problems in this project that we encounter each and every day, it would really make our life much easier if we can get some pointers about best practices.

Doubts

  • If we have 100 different views, do we make 100 css files (one css per view) and 1 basic/default css file for common styling or just one big css file that would provide style for all the views?

  • In case we want to load a stylesheet as a single file, is this only possible using preprocessors where we can actually import and merge different css files?

  • How do we keep track of unique class when merging multiple css files?

  • If we load a page B inside a div in a page A, where do we keep css, in page A or B? Page B is only used as a modal in page A

  • Since there are obviously many icons, images, javascript, etc. do we separate our content folder according to views, such as content/view1, content/view2 or we put all the content in a single directory?

We would appreciate any answers about best practices!

2
  • Please read Why is asking a question on “best practice” a bad thing? then follow up by reading about cargo cult programming. My "best practice" is to figure out the correct solution to a problem without blinding copying everyone else's "best practices" because they might not be correct in my case.
    – user22815
    Mar 9, 2017 at 23:30
  • 1
    Hm, Best practice is to drive a car with average speed of 50 mph because gas consumption is at optimal level. If I want to end up at my destination faster the solution would be to speed up. So I am not actually looking for a solution to my problem, but rather for a best practice that could be a starting point for me to look for a solution according to my problem
    – John
    Mar 10, 2017 at 10:12

3 Answers 3

1

IMO, most of this could be solved using:

  • CSS pre-processers, like SASS or LESS

  • Some kind of CSS standard, whether it's BEM, something else, or something you come up with internally, just make sure that it's consistent and everyone knows it (and is on board with it).

  • Also, if you do have lots of assets (JS files, etc.) Start with having an /assets directory (or /resources, etc.) and place CSS files in /assets/css JS files in /assets/js Or, you could also use something like Bower

Of course, this all depends on what the back-office app is based on, and what things your coworkers/company are familiar or on board with.

2
  • I think this is a good answer... to a different question. This one is slippery since the the OP is asking not about the means of building his views in a way that maintains organizational integrity but seems to be asking how to drill-down into a lean structure which is adaptable to the specific view just like that. Essentially, we can assume they know the basic img, js, sass, css, php/rb/py/java folder structure. Mar 29, 2017 at 15:04
  • @PrometheanVigil Good point, but given the wording of the OP's question, it implies that they haven't decided/figured out the basic folder structure, etc. If you feel that you have an answer that addresses more so building a lean structure, etc. by all means add your answer. There's room for more than 1 :) Mar 30, 2017 at 2:14
1

As the question appears mainly to be about the CSS for a web site/application, I'll cover the basic ways I would look at the problem.

The following is a rule of thumb, there will always be exceptions - but not majorly.

CSS is used to style a website - not individual web pages.

The worst websites viewed will be those where every page is laid out, sized, or coloured differently from the rest...

There should be a standard style for all of the pages contained in a website.

Saying that, not all pages will be laid out the same, so the design should start with identifying the layouts you will need:

Master pages, navigation, asides, footer etc. There may be several layouts you will use, but not one for every page. The content in these layouts will change, but that does not require individual style sheets.

Next, there is the individual styling for the headings, labels, input controls, divs, spans, tables, etc. that should be standard across areas of the site according to the area the user is visiting. An admin area may be laid out differently to a registration area, and their control sizes and colours may differ too if really required.

Styles should be set against the individual controls as a base - all divs, tables, textboxes etc. with standard padding, margins, colours etc. Then you can define classes to apply to controls where needed; this way if you need to fix or alter the way divs are displayed for example, you only have to alter the style in one place - all divs using that class will change accordingly.

If you need a particular page to display differently to the standard styling, there is nothing wrong with placing the replacement style on the page itself - because it is particular to that page only and not used anywhere else. This is only applicable when the page is the only one with difference. If it is used elsewhere, and you need to change it, you will have to hunt down all pages that had this same difference and alter them all individually - not a nice task.

If you will need to load partials into another page, it should normally be styled the same as the rest of the page. However, if you need it to be different (but standardised because there are many partials that are styled similarly), then go ahead and create a style sheet for their use and place a link to the stylesheet in the partial.

Because CSS (Cascading Style Sheets) cascade, the last style declared will override all other styles declared previously. So if a style was declared for a class named 'important' defining bold and red for the font, you could declare 'important' again for a partial where it only defined blue as the colour. The original bold would still apply but the colour would be overridden by the new blue definition.

So basic structure is:

  • Main style sheet for all of the website's pages
  • Overriding style sheets for particular areas
  • Overriding individual styles for pages (either a style sheet or on the page itself)

Regarding your Content folder: style sheets should be created and named according to the style they are supplying - not for the view or page that they will be used in.

  • Javascript files should be placed in the 'scripts' and should be named according to the functions contained within - not the view or page they will be used in.
  • Icons and other images should be placed in the 'images' folder and should be grouped according to what the images are - not where they will be used (unless there are many images for each area in the website, then you could group them again under a name for the area).

Basically, try to shift the focus from 'this stylesheet is for a page' to 'this page uses this stylesheet' and keep the stylesheets to a minimum.

0

If we have 100 different views, do we make 100 css files (one css per view) and 1 basic/default css file for common styling or just one big css file that would provide style for all the views?

Unless you expect the styling of your views to change independently from each other and on a frequent basis you should try to stick to as few CSS as possible.

You may have a couple CSS for frameworks (e.g. if you have a datepicker that relies on certain style definitions, or if you decide to use Bootstrap CSS, which I recommend). Beyond that you really only need one CSS file.

In case we want to load a stylesheet as a single file, is this only possible using preprocessors where we can actually import and merge different css files? How do we keep track of unique class when merging multiple css files? If we load a page B inside a div in a page A, where do we keep css, in page A or B? Page B is only used as a modal in page A

A given web page should reference all the CSS it needs, directly. CSS do not need to reference one another. They will be merged (cascaded) in the browser context.

Since there are obviously many icons, images, javascript, etc. do we separate our content folder according to views, such as content/view1, content/view2 or we put all the content in a single directory?

Single folder. Or better yet, single image, using sprites.

2
  • Why single folder, why as few css as possible. Please elaborate
    – John
    Mar 9, 2017 at 9:22
  • 1
    The real question is, why multiple folders? Why 100 CSS files? The default design should be to Keep it Simple Stupid. If you have reasons to think there ought to be more complexity, you need to justify it.
    – John Wu
    Mar 9, 2017 at 9:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.