Please enable JavaScript.
Coggle requires JavaScript to display documents.
SMACCS (STATE (State rules are ways to describe how our modules or layouts…
SMACCS
BASE
-
almost exclusively single element selectors but it could include attribute selectors, pseudo-class
selectors, child selectors or sibling selectors
it doesn’t include any class or ID selectors
include setting heading sizes, default link styles, default
font styles, and body backgrounds. There should be no need to use !important in a Base style
STATE
-
A state is something that augments and overrides all other styles.
For example, an accordion section may be in a collapsed or expanded state.
-
-
Sub module styles are applied to an element at render time and then are never changed again. State styles are applied to elements to indicate a change in state while the page is still running on the client machine.
LAYOUT
-
-
Layout styles can also be divided into major and minor styles based on reuse. Major layout styles such as header and footer are traditionally styled using ID selectors
Some sites may have a need for a more generalized layout framework (for example, 960.gs 1 ). These minor Layout styles will use class names instead of IDs
-
CSS RESET
A CSS Reset is a set of Base styles designed to strip out or reset The default margin, padding, and other properties.
-
MODULE
Modules are the reusable,
modular parts of our design
They are the callouts, the sidebar sections,
the product lists and so on
Module is a more discrete component of the page. It is your navigation bars and your carousels and your dialogs and your widgets and so on.
Modules sit inside Layout components. Modules can sometimes sit within other Modules, too. Each Module should be designed to exist as a standalone component
When defining the rule set for a module, avoid using IDs and element selectors, sticking only to class names
THEME
-
-
Themes can affect any of the primary types. They can override base styles like default link colours. They can change module elements such as colours and borders. They can affect layout with different arrangements. They can also alter how states look
CHANGING STATE
class name
change happens with JavaScript. Via some interac-
tion, be it moving the mouse around, hitting something on the
keyboard, or some other event occurring.
pseudo-class
done via any number of pseudo-classes,
and there are a lot. In these cases, we no longer have to rely on
JavaScript to describe the state change
media query
describe how things should by styled under
defined criteria, such as different viewport sizes.
SELECTOR PERFORMANCE
- Use child selectors
- Avoid tag selectors for common elements
- Use class names as the right-most selector