The priority of a selector can be expressed as a list of 4 digits: 0,0,0,0.
Starting from the right:
- the first digit is the number of elements and pseudo-elements in the selector.
- The second is the number of classes, attributes and pseudo-classes.
- The third is the number of ID elements.
- The last one if there is inline style property.
As an example:
#myId.myClass {} // 0,1,1,0
h1.myClass {} // 0,0,1,1The first one is hence more specific than the second one.
For the property height and width to be taken into account the element has to be of display: block|inline-block. However when the element is in absolute positioning it doesn't need to be in a specific display.
When specifying top/left/right/bottom in %, it refers to the size of the relative referral.
When using translateX/translateY with %, it refers to the dimension of the element itself. You can use absolute positioning and translate both in % to center an element in relative container.
It is another unit to specify font-size. It depends on the context in which it is used thus influenced by parents font-size.
A good practice is to set font-size: 16px on <html> tag and then font-size: 62.5% on the <body> tag so that 1em = 10px.
The calculation you have to use to get the pixels you want is: target size / context size = em value. For example, we want to set a <p> at 14px which is inside a <div> having font-size: 2em considering the value on html and body tag as expressed above. The resulting calculation would be 14px / 20px = 0.7em.
Images that are part of the content should be inlined as an HTML tag. Images that are part of the layout should be defined as background images.
On the parent element of the image you add overflow: hidden and set a width and height on it. That way you are sure the images are all the same size but it will crop some of the images if the dimensions do not respect the images ratio.
If you put either a width or height property on the image and set the other one to auto, the image will take into account the dimension and resize as to respect its ratio. You can pair that method with the previous one by setting the height of the image to the height of the container and adding width: auto. It will force the image to respect its ratio and have the same height as the other images.
When you want to display a logo as a background image of <a> tag the link tag should not be empty therefore you can add the text inside and then use the text-ident: -999999px property to set if off the viewport.
When you want to display a different image when an event is triggered on an image (hover for example) sprites are a good way to do it. A sprite is an image containing multiples image and then you change the one displayed based on the background-position property. The container has to be the same size as one of the image.
Benefits of sprites are:
- Less HTTP requests to get the assets
- No flashing when switching between images
Another way to optimize the images could be to use the base64 encoding directly in the CSS sheet.
Margins collapse. If you have 2 subsequent elements, the first with a bottom 40px margin and the second with a top 20px margin the total margin will be 40px.
Margins collapse does not occur when one or more elements has:
- Padding or border
- Relative or absolute positioning
- A float left or right
Inline elements take into account only the horizontal margin whereas block and inline-block respect both horizontal and vertical margin.
You can v-align elements that are inline using the property :
vertical-align: middle; It has to be added on all inline elements you want to align.
If you want to add scroll behavior to an element, it has to have a fixed height either max-height or height.
If a container has a height set and its content overflows the container siblings and upper will not take into account the height of the content but only the height of container.
There are 2 ways to animate stuff in CSS:
- Transitions
- Animations
The former is better suited when the movement has to be triggered (hover, click, adding class ...) and the latter is more of something that runs automatically (when the page loads for example).
- They don't loop.
- Cannot define intermediate stages during the animation. They are designed to go from A to B and the value in-between are interpolated.
- Interoperates well with JS.
Use CSS transition property to declare a transition. It can have comma separated values to declare multiple transition.
If you want to transition when the property changes due to user interaction and then reverts back (hover for example) then you need to put the transition on the element without the :hover state selector otherwise it will be applied only when the element gets into the hover state.
- They can loop.
- You can define as many intermediate stages (keyframe) of your animation. Interpolation will be used for the points between the stages you defined.
- Does not interoperate well with JS. It is really complex to alter a keyframe.
Define a @keyframes section where you describe the different stages of your animation. You need to name that keyframe.
Bind that keyframe to a selection using the CSS animation property. You can use comma separated values to declare multiple animation i.e:
@keyframes my-animation { ... }
@keyframes my-second-animation { ... }
div {
animation: my-animation 2s .5s infinite linear alternate,
my-second-animation 1s 2s infinite ease-in forward;
}