When we work at scale, we often find that we spend a large amount of our time deciphering, maintaining, and refactoring CSS. This is the reason we should focus so much on things like architectures, naming conventions, methodologies, etc.: because writing CSS is easy; looking after it is not.
Edit me
Document Architecture
Print pieces should be created by using containers. Containers help define document blocks and help to insulate the activities in one container from intruding into or contaminating other containers. The following examples help illustrate the use of containers in a couple of flyer scenarios:
Example 1:
Example 2:
Warning: Failing to create strict containers with
overflow: hidden styling could have very negative document consequences if custom content contaminates the document design.Here’s how the HTML would look using the 2nd example:
As you can see, all elements are contained within a Section which is within a main document container, which is within the document body. Every block element needs to be namespaced which we will cover in the next section.
Using the BEM model and thoughtfully laid out using tabbed nesting, a container’s ID and corresponding element and modifier classes can be quickly identified and edited:
