Skip to main content

A python script for css class names conditional generation

Project description

css-class-names Build Status

A python script for css class names conditional generation. Inspered by the node package classnames.


The node classnames package has been helping me a lot with React/JSX and general javascript front-end development. I really missed something similar to use when working with django and jinja2 templates, so, I decided to create this package.


You can add css class names by calling the function with arguments as:

  • Strings
  • Numbers: Floats or Integers (0 is allowed)
  • Sequences: Lists or Tuples
  • Dictionaries
from css_class_names import class_names

class_names('header', 'is-visible') # 'header is-visible'
class_names(['is-visible', 'text-uppercase']) # 'is-visible text-uppercase'
class_names((100001000, 'clear')) # '100001000 clear'

class_names('header', { 
    'header--is-fixed': True, 
    'header--is-blue': False 
# 'header header--is-fixed'

Conditional dicts

Dictionaries can be used to concat class names conditionally using expressions:

from css_class_names import class_names

errors = ['Some error']
class_names('alert', { 
    'alert-danger': errors, 
    'alert-success': not errors,
    'small': True
# 'alert alert-danger'

class_names('client', { 
    'client-{}'.format( client, 
    'disable': not
# 'client client-989'

Excludes falsy values

Falsy values (except 0) and not supported types will be ignored:

from css_class_names import class_names

class_names([], '', False, {}, 0, object(), lambda x: x, None)
# '0'

Strip and flatten

Strings are striped and sequences are recursively flattened:

from css_class_names import class_names

class_names([' header   ', ['  green ', ' small ']])
# 'header green small'


You can dedupe names with the dedupe argument:

from css_class_names import class_names

class_names('cart', 'is-open', 'is-logged', {'is-logged': True}, dedupe=True)
# 'cart is-open is-logged'


You can add class name prefixes with the prefix argument. This is really usefull when you need a class namespace or using the BEM methodology:

from css_class_names import class_names

class_names('head', 'head--is-empty', {'head--is-large': True}, prefix='mysite-')
# 'mysite-head mysite-head--is-empty mysite-head--is-large'


After cloning the repository, create a virtualenv and use the Makefile commands to setup development requirements and run tests:

make setup
make lint 
make test 
make watch # run tests when code changes
make coverage

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

css-class-names-0.0.1.tar.gz (2.8 kB view hashes)

Uploaded source

Built Distribution

css_class_names-0.0.1-py3-none-any.whl (2.9 kB view hashes)

Uploaded py3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page