Expressive is a term loosely borrowed from the concept of expressiveness in programming languages. A programming language is generally considered expressive if it allows you to naturally express your thoughts in code that is easy to understand.
32 |
33 |
34 |
35 |
This is not new thinking.
36 |
Often referred to as Utility First, Functional or Atomic, this type of approach to CSS been explored in many blog posts, articles and projects.
37 |
38 |
Related Articles and Projects
39 |
40 |
For individuals weaned on an ideology where “semantic HTML” means using content-derived class names (and even then, only as a last resort), it usually requires you to work on a large application before you can become acutely aware of the impractical nature of that approach. You have to be prepared to disgard old ideas, look at alternatives, and even revisit ways that you may have previously dismissed.
Classes are for visual styling. Tags are for semantics.
69 |
Start from a good foundation of base html element styles.
70 |
Use utility classes for DRY CSS.
71 |
Class names should be understandable at a glance.
72 |
Responsive layout styling should be easy (fun even).
73 |
74 |
75 |
Benefits
76 |
77 |
Smaller, Simpler CSS
78 |
Easier layout refactoring and experimentation.
79 |
Spend less time writing CSS.
80 |
Scalability and portability.
81 |
82 |
83 |
84 |
85 |
86 |
Principles
87 |
88 |
89 |
Classes Are For Visual Styling
90 |
91 |
92 |
Do classes need to be ‘semantic’?
93 |
Browsers do not care what your classes are named. People who visit your site do not care what your classes are named.
94 |
The people who do care are those who will inherit your code. Consider how quickly an author can understand your front end codebase.
95 |
Utility/Helper classes are widely used.
96 |
Expressive CSS takes the idea of Utility/Helper classes that are already widely used in many popular front end frameworks, and encourages you to take it further.
97 |
Utility classes are commonly and extensively used by many popular front end libararies.
People like to use these classes because they are straightforward and easily understood. Why fight that? Embrace it. That is what Expressive CSS is all about.
How long does it take before the different classes you make for widgets, blocks, modules, menus, modals, forms and components start to become unmaintainable? Writing CSS for all of these can lead to a stylesheet overloaded with declarations of font-size, padding, margin and more.
168 |
How many CSS declarations are in your stylesheets for...
Avoid defining the same styles over and over again. In most cases, use a utility class to avoid multiple declarations of the same styling property, especially for common properties like padding/margin, typography, colors, alignment and container styles. This is the key to unlocking the benefits of Expressive CSS.
190 |
191 |
A trade-off. You will have more classes in HTML. However, this will result in smaller stylesheets, especially as your codebase grows. By making extensive use of utility classes, you can avoid nesting and overrides which will reduce the complexity of your CSS architecture.
192 |
193 |
194 |
195 |
196 |
197 |
198 |
Strive For At-A-Glance Understandability
199 |
200 |
201 |
Consider the view sourceror.
202 |
When naming classes, consider those viewing your markup for the first time. With Expressive CSS, they should be able to get some sense of layout from the markup alone, without the need to even open a browser. This enables them to understand the element styles quickly and work faster.
203 |
204 |
Given the markup below, which div can you better guess what it might look like?
Avoid overly abbreviated class names. Hyphens help the eye when scanning markup.
211 |
212 |
.fr // too abbreviated
213 | .floatr // better, but..
214 | .float-right // this is more readable..
215 | .float-r // or abbreviate a little if you prefer
216 |
217 |
218 |
Component class names should be clear and easily understood. Avoid names that are mysterious.
219 |
220 |
221 |
222 |
Mysterious
223 |
.widget .module
224 |
225 |
226 |
Obvious
227 |
.ribbon .modal
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
Breakpoint Prefixing For Quick, Easy Responsive Layouts
236 |
237 |
238 |
Build responsive layouts quickly by prefixing them inside of media queries across common breakpoints. Many grid systems and front end frameworks already use this technique.
239 |
240 |
241 | .grid-4 .m-grid-6 .s-grid-12
242 |
243 |
244 | .grid-4 .m-grid-6 .s-grid-12
245 |
246 |
247 | .grid-4 .m-grid-6 .s-grid-12
248 |
249 |
250 | .grid-4 .m-grid-6 .s-grid-12
251 |
252 |
253 | .grid-4 .m-grid-6 .s-grid-12
254 |
255 |
256 | .grid-4 .m-grid-6 .s-grid-12
257 |
258 |
259 |
Create breakpoint prefixes for any properties that you want to change based on screen size.
260 |
261 |
.s-hidden // hide when on small screen
262 | .s-text-right // align right on small screen
263 | .l-hidden // hide when on large screen
264 | .l-text-large // large text when on large screen
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
Benefits
273 |
274 |
275 |
Smaller Simpler CSS
276 |
277 |
278 |
Too Much C in CSS
279 |
Every time you write a style declaration, you are creating an exception to a default behavior.
280 |
281 |
282 |
More levels of cascade leads to..
283 |
284 |
285 |
286 |
287 |
More complexity leads to..
288 |
289 |
290 |
291 |
292 |
Harder to maintain CSS leads to..
293 |
294 |
295 |
296 |
297 |
Harder to scale leads to..
298 |
299 |
300 |
301 |
302 |
A giant mess
303 |
304 |
305 |
306 |
Lightweight Simple Scalable Portable
307 |
By restricting the style declarations of related properties to one area of your stylesheet, you not only reduce the size of your CSS, you create a unified visual style for your site that is easy to maintain and to change.
308 |
309 |
310 |
311 |
312 |
313 |
Easy Refactoring and Experimentation
314 |
315 |
316 |
Apply styles like an artist paints on a canvas
317 |
Let’s make the link at the bottom of that widget aligned right instead of aligned center. Instead of having to hunt for the line of css that controls alignment in devtools, then drilling into the css and editing, all you need to do is change class="text-center" to class="text-right".
318 |
319 |
320 |
321 |
322 |
323 |
Write Less CSS
324 |
325 |
326 |
As you build up a system of utility classes, the number of times you need to author new styles will greatly decrease.
A test page filled with common HTML elements to provide visual feedback while building CSS systems and frameworks. Forked from: github.com/cbracco/html5-test-page
15 |
16 |
17 |
57 |
58 |
59 |
60 |
Text
61 |
62 |
63 |
64 |
Headings
65 |
66 |
67 |
68 |
Heading 1
69 |
Heading 2
70 |
Heading 3
71 |
Heading 4
72 |
Heading 5
73 |
Heading 6
74 |
75 |
76 |
77 |
78 |
79 |
80 |
Paragraphs
81 |
82 |
83 |
A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
84 |
85 |
86 |
87 |
88 |
89 |
90 |
Blockquotes
91 |
92 |
93 |
94 |
A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.
95 |
It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.
Sample output:This is sample output from a computer program.
208 |
209 |
Pre-formatted text
210 |
211 |
P R E F O R M A T T E D T E X T
212 | ! " # $ % & ' ( ) * + , - . /
213 | 0 1 2 3 4 5 6 7 8 9 : ; < = > ?
214 | @ A B C D E F G H I J K L M N O
215 | P Q R S T U V W X Y Z [ \ ] ^ _
216 | ` a b c d e f g h i j k l m n o
217 | p q r s t u v w x y z { | } ~
281 |