CSS Tips

Personally, I dislike CSS. I find it difficult to use because of the lacking documentation and the fact that different Browsers implement things subtly different. Unfortunately, it is something that one has to use today in order to create funtioning web sites, and things are getting better all the time.

Some things that I have learned over time:

Style editor

A feature of Firefox, let's me edit and try CSS styles on the fly. I find it very conventient.

To access it:

1. Open the Firefox menu
2. More tools
3. Developer tools
4. Click on the Style Editor tab.

In addition, Firefox comes with a "Responsive Design" mode that let's you simulate the form factor of different devices. Granted, you can do this by just resizing the window but this is very convenient.

Sending query string with PHP

Normally, web browsers would cache JS and CSS files for performance. For normal usage, this is the best approach. For developing, this is a bit inconveneint as you may be debugging problems that may have been fixed, but the web browser is still using buggy versions of resource files.

To get around this, you can code your URLs to include a query string so that you can change the query string every time you make changes to resources.

In PHP, what I do, is add to the resource URL, a query string containing the modification time of the file. That way, when I update a resource file, it the query string changes automatically, so the cache expires and renders the latest version.

Position sticky

Very often you would like to have a header part of the page to be always displayed. I create this effect with the following CSS:

css-selector {
  position: sticky;
  top: 0;
  z-index: 100;

The important setting is the posistion: sticky which makes that element stick to the window. The top: 0 positions the element to the top of the page. Finally, the z-index: 100 makes it so that it will be rendered above other elements rather than being obscured by them.

Flexbox and Grid

These are layout managers that can be used for arranging the page. For navigation bars, I prefer to use flexbox. Whereas for table like layouts, Grid is usually a good option.

You should consider using grid layout when:

• You have a complex design to work with and want maintainable web pages
• You want to add gaps over the block elements

You should consider using flexbox when:

• You have a small design to work with a few rows and columns
• You need to align the element
• You don’t know how your content will look on the page, and you want everything to fit in.