CSS Guidelines (2.2.5) – High-level advice and guidelines for writing sane, manageable, scalable CSS. 8 règles pour organiser son code CSS – alticreation. Rédiger du code CSS n'est pas aussi simple qu'il n'y parait. Sans quelques règles de rédaction, on peut se retrouver rapidement avec un code compliqué à lire et difficile à débuger. Voici une liste non exhaustive de bonnes pratiques et règles qui vous aidera à créer et maintenir une feuille de style CSS claire et extensible. 1 - Segmenter le CSS en fichiers multiples Il est préférable de séparer son code CSS en plusieurs fichiers chacun correspondant à un module, une vue ou une page de votre application. ITCSS: Scalable and Maintainable CSS Architecture - Xfive.
How do I make my CSS scalable and maintainable? It’s a concern for every front-end developer. ITCSS has an answer. Last year when we started to plan our HEROized redesign and new Xfive.co website, I was looking for a CSS architecture which would allow for easy website development and further maintenance. CSS Modules were quite young and exotic at that time and I’ve always considered the Atomic Design chemistry analogy to be a bit artificial. Then I came across Harry Roberts’s ITCSS in the June 2015 issue of the net magazine and immediately fell in love with this simple, down to earth CSS approach. What is ITCSS? ITCSS stands for Inverted Triangle CSS and it helps you to organize your project CSS files in such way that you can better deal with (not always easy-to-deal with) CSS specifics like global namespace, cascade and selectors specificity.
Rscss. Basic Rules of RSCSS and BEM Systems. Often, there is a lot of confusion on how to use CSS properly.
This document is here to provide a clarification. The SASS 3 preprocessor introduces a new syntax known as SCSS which is used in Kolosek's projects. One of the most important things to learn is nesting in Sass. The two most frequently used guide systems are RSCSS and BEM. I will go through the basics of both systems in order to ensure you use them properly in any current and future projects. General Rules. ABEM. A more useful adaptation of BEM. By Daniel Tonon On bem BEM (Block Element Modifier) is a popular CSS class naming convention that makes CSS easier to maintain.
This article assumes that you are already familiar with the naming convention. If not you can learn more about it at getbem.com to catch up on the basics. The standard syntax for BEM is: block-name__element-name--modifier-name I'm personally a massive fan of the methodology behind the naming convention. [a/m/o]-blockName__elementName -modifierName #An Atomic Design Prefix. Suit/doc/naming-conventions.md at master · suitcss/suit. Conseils et bonnes pratiques. CSS character escape sequences · Mathias Bynens. There are some other cases where you might want or need to escape a character in CSS.
You could be writing a selector for a funky id, class, attribute or attribute value, for example; or maybe you want to insert some weird characters using the content property without changing your CSS file’s character encoding. Identifiers and strings in CSS The spec defines identifiers using a token diagram. They may contain the symbols from a to z, from A to Z, from 0 to 9, underscores (_), hyphens -, non-ASCII symbols or escape sequences for any symbol. They cannot start with a digit, or a hyphen (-) followed by a digit. The grammar for identifiers is used for various things throughout the specification, including element names, class names, and IDs in selectors.
The spec definition for strings says that strings can either be written with double quotes or with single quotes. As you can see, character escapes are allowed in both identifiers and strings. How to escape any character in CSS Leading digits. OOCSS, ACSS, BEM, SMACSS: what are they? What should I use? – clubmate.fi. The way we write CSS has changed a lot in last few years, and the abbreviation jungle gets deeper and deeper.
Heres a list of links to influential articles and quick summaries of these techniques. update: 2014.01.23 rewrote the Atomic and the BEM sections. I think there have bee happening big things in how we write CSS, for a reason I suppose. The will to make CSS more modular is strong (to make CSS so that it’s easier to control without breaking everything when you change a small thing). Object Oriented CSS (OOCSS) In a nutshell: Keep the structure and skin separate Keep the visuality separate, so you can reuse the visual classes. Separate container and content “rarely use location-dependent styles.”
Code Guide by @mdo. What Makes For a Semantic Class Name? Learn Development at Frontend Masters Semantics in HTML is always a hot topic.
Some people strive for it at all times. Some people critisize a dogmatic adherence to it. Some people don't know what the heck it is. I'd describe semantics as it relates to HTML as tags, classes, IDs, and attributes describing but not specifying the content they enclose. Bad Semantics <div class="article"><div class="article_title">Smurf Movie Kinda Sucks</div><div class="the_content">Not surprisingly, this weeks release of <div class="darkbold">The Smurfs</div> kinda sucks. Good Semantics. SUIT CSS: style tools for UI components.
OOCSS (Object-Oriented CSS) BEM (Block Element Modifier) SMACSS.