I was going to re-do my Cub from day one of the cssdailimages challenge, and then I realised it doesn't really fit my "A is for Animal" theme.

So I started a new animal for C: a crab.

I've been trying to be more savvy about how I position my elements within blocks (to stick with my BEM-like approach) and I just had a bit of a breakthrough.

I need to have a top-level div to act as the block 'container' - in this case with the class .crab.

Now, if I give this an objective width and height in px, and nest each element within it, the element dimensions can all be defined as % values of their common parent.

Similarly, their X and Y (or, top and left, rather) can be a % of the parent element.

If you do this properly, the whole thing should be scalable by varying the px values of the block class. AND, of course, the block can be transformed, moved, etc and act as a single unit.

Limitation Box-shadow parameters cannot be specified as a %, only as px offsets, which messes up my nice, clean scalability bit.

use rem as a possbible workaround??

345 0 0